CSS Selector 高级用法

1.id 选择器

　　选中具有特定id的HTML元素,css中的id选择器以 # 来定义

<style>

       #abc {
            color: #0044bb
        }
    
</style>

<body>
        <p id="abc">独怜幽草涧边生</p>
</body>

2.class属性选择器

　　选中具有特定class的HTML元素,css中的class选择器以 . 来定义

        .ab1 {
            color: #cc0000
        }

<p class="ab1">东边日出西边雨</p>

3.标签选择器

　　选中特定类型的HTML元素，标签选择器，直接就是标签的名称来定义

       p {
            font-size: 20px
        }

<p id="abc">独怜幽草涧边生</p>
<p class="ab1">东边日出西边雨</p>

4.分组选择器

　　可以选中一组HTML元素，在css当中，分组选择器以，来定义

        a, span {
            background: #51a7e8
        }

<a>春蚕到死丝方尽</a>
<br>
<span>相见时难别亦难</span>
<br>

5.属性选择器

　　a.选取具有特定属性的html元素，在css当中，属性选择器以 [] 来定义

        [class="li"] {
            color: #cc0000
        }

<ul>
    <li class="li">十年生死两茫茫</li>
    <li class="li">不思量</li>
    <li class="li">自难忘</li>
</ul>

　　b.我们也可以不为属性指定值

        [titl] {
            background: #4d4d4d
        }

<a titl="hello python world">只愿君心似我心，定不负相思意</a>

　　c.属性选择器还支持匹配单词边界，使用 ~= 来定义

　　　　匹配title属性值的单词边界值为 hello 的

 a[title~="hello"] {
　　　　　　 background: #cc0000 
　　　　　　} 

<a title="hello python world">只愿君心似我心，定不负相思意</a>

#这样就渲染不到，他不是hello为边界值

<a title="ello python world">只愿君心似我心，定不负相思意</a>

  #这个就不能渲染到      

a[title~="python"] {
            background: #cc0000
        }

<a title="hello python world">只愿君心似我心，定不负相思意</a>

6.组合选择器，css中有四种组合选择器

　　a.后代选择器（以空格分开）：后代选择器，用于选取某元素的后代元素，无论层级有多深。

#ab1 p {

    color: #cc0000

        }        

#会渲染id属性为ab1，下的所有p标签

<div id="ab1">
    <ul>
        <li>玉带林中挂</li>
        <li>金钗雪里埋</li>
    </ul>
    <div>
        <p>一从二令三人木</p>
        <div>
            <p>可叹停机德</p>
            <p>堪怜咏絮才</p>
        </div>
    </div>
    <p>子系中山狼，得志便猖狂</p>
</div>

　　b.子元素选择器以大于号(>) 进行分割：子元素选择器，与后代选择器相比，子元素选择器只能选中直接子元素

#ab1 > p {

    background: #51a7e8

                }
#只会渲染下面红色的标签，其余P标签不渲染

<div id="ab1">
    <ul>
        <li>玉带林中挂</li>
        <li>金钗雪里埋</li>
    </ul>
    <div>
        <p>一从二令三人木</p>
        <div>
            <p>可叹停机德</p>
            <p>堪怜咏絮才</p>
        </div>
    </div>
    <p>子系中山狼，得志便猖狂</p>
</div>

　　c.相邻兄弟选择器以加号(+)分隔：兄弟选择器，可选择紧挨在另一元素后的一个元素，且二者拥有相同的父元素

       
#xyz + .hello {

        color: yellow
            
            }
#自会渲染相邻后的属性值为hello的值
<ul>
    <li id="xyz">欲洁何曾洁</li>
    <li class="hello">云空未必空</li>
    <li class="hello">可怜金玉质</li>
    <li>终陷淖泥中</li> 
</ul>

#xyzzz + li {
　　　　font-size: 50px
　　　　}

#只会渲染“右擎苍”的标签

<ul>
    <li>老夫聊发少年狂</li>
    <li id="xyzzz">左牵黄</li>
    <li>右擎苍</li>
    <li>锦帽貂裘千骑卷平岗</li>
</ul>

　　d.后续兄弟选择器以小波浪线(~) 分隔：后续兄弟选择器，选取指定元素之后的所有弟弟

        #xyzz ~ li {

               color: blue

                     }


<ul id="abc2">
    <li id="xyzz">老夫聊发少年狂</li>
    <li>左牵黄</li>
    <li>右擎苍</li>
    <li>锦帽貂裘千骑卷平岗</li>
</ul>

7.伪类 nth-child 使用

伪类
nth-child(n) 匹配属于其父元素的第 N 个子元素
nth-last-child(n)，如字面意思：倒数第几个标签
nth-of-type(n)，第 N 个指定类型的标签
first-child,第一个标签
last-child,最后一个标签