首页 > 代码库 > Css(选择器)

Css(选择器)

语法

  1. <style type="text/css>
  2. </style>

     标签选择器

  1. li {
  2. color: red;
  3. }


     ID选择器

  1. #li{
  2. color: yellow;
  3. }
        唯一的,同一页面只能有一个
        优先级高于类选择器

    类选择器

  1. .li{
  2. color: blue;
  3. }

        优先级高于标签选择器

     通用选择器  

        优先级最低

  1. *{
  2. }

     后代选择器

        
  1. div li{
  2. color:red;
  3. }

>子代选择器,只能选择下一层级的类或标签,不能越级使用

  1. div>ul>li{
  2. color:red;
  3. }

     交集选择器

  1. .li#li{
  2. /*
  3. 元素必须同时满足.li和#li才能使用
  4. */
  5. }

     并集选择器

  1. .li,#li,div{
  2. /*
  3. 元素只要具备一个条件即可生效
  4. */
  5. }

    CSS3新增选择器

选择器优先级

    1.第一原则:近者优先,最内层选择器永远比外层优先
        例:div ul li >div #ul,li在ul内层,所以li标签选择器能覆盖外层id选择器
    2.当作用在同一层时,ID选择器>class选择器>标签选择器
        例:div #li>div .li>div li
    3.当作用于同一层,且最后一层选择器没有优先关系(均为class或id)
        例:div ul li >div li,作用范围选的更精准,则优先级更高
    4.优先级完全相同时,按照代码执行顺序,后面的选择器会覆盖前面的选择器


null


Css(选择器)