css笔记 三.css3选择器

属性选择器

[属性名 = “属性值”] (完全等于)

eg: 
	li[class = "a"]  选择class为完全等于a的li节点
       
    <li class="a">222</li>
    <li class="b a">333</li>
   只能匹配值为222的li,不能匹配333的li

属性名 ~= “属性值”

eg: 
   li[class ~= "a"]  选择class属性值中包含a的li节点
    
   <li class="a">222</li>
   <li class="b a">333</li>
  两个li都能匹配到

属性名 ^= “属性值”

eg: 
   li[class ^= "a"]  选择class属性值中以a开头的li节点
    
   <li class ="aa b">111</li>
   <li class ="a b">222</li>
   <li class ="b a">333</li>
   只能匹配到值为111与222的li

同理,$=(结尾) 属性值必须以我们匹配的属性值结尾才能匹配到
*=(存在) 属性值中只有有目标值即可

empty空节点选择器

选中所有没有一点内容(空格注释也算内容)或不在dom树中(使用after等添加的伪元素)的节点

    <li class ="aa b">
        <!-- 注释内容 --\>
    </li>
    <li class ="b a"></li>
    <li class ="a b"></li>

    [class ^= "b"]::after{
        content: "伪元素";
    }

    li:empty{
        width: 100px;
        height: 100px;
        background: red;
    }

    两个li标签都会被选中

target选择器

选中当前被锚住的元素

将被a标签锚住的元素变成圆形
    <a href="#box1" style = "left:100px">111</a>
    <a href="#box2" style = "left:200px">222</a>
    <a href="#box3" style = "left:300px">333</a>


    <div id = "box1" class="box">1</div>
    <div id = "box2" class="box">2</div>
    <div id = "box3" class="box">3</div>


    .box{
        height: 100px;
        width: 100px;
        background-color: red;
        margin-top: 1000px;
    }

    a{
        position: fixed;
        top:10px;
    }

    :target{
        background-color: yellow;
        border-radius: 50%;
    }

子元素伪类选择器

目标元素:first-child 是目标元素的类型且是第一个子元素

目标元素:last-child 是目标元素的类型且是最后一个子元素

目标元素:nth-child(?) 是目标元素的类型且是第n个子元素(参数为even时选择偶数,为odd时选择奇数)

目标元素:nth-last-child(?) 是目标元素的类型且是倒数第n个子元素

弊端:首先要满足是第几个子元素,其次类型还得与目标元素一致

    <span>span</span>
    <li>one li</li>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
 
    span:first-child{
        color: red;
    }
    只有值为111的li被选中了,
    虽然span是body的第一个子元素,但是节点类型不是li

目标类型:first-of-type 会选择目标类型中的第一个子元素

目标类型:nth-of-type(n) 会选择目标类型中的第n个子元素

他会首先选择是目标类型的所有子元素,然后再选择其中第n个

    li:first-of-type{
        color: red;
    }
   
    <span>span</span>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <li>one li</li>
    <li>two li</li>
   
   值为111与one li的节点会被选中

enable disable 可用选择器

  :enabled{
       background-color: green;
   }

   :disabled{
       background-color: red;
   }
   <input type="text">
   <input type="text" disabled>