前端基础学习笔记 选择器（高级）

组合选择器的优先级

• 比较优先级时，保证精准控制到了元素
• 比较id选择器，如果id多，那优先级高
• id选择器一样多时，比较class选择器，class多的则优先级高
• class如果相等，比较标签选择器，标签选择器多则优先级高
• 伪类选择器，如hover，优先级相当于类名class

伪类选择器

 用于向某些选择器添加特殊的效果。

锚伪类 : 
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已
被访问状态，未被访问状态，和鼠标悬停状态。

1. link  未被点击的链接
2. visited  已被点击的链接
3. active  选定的时候
4. hover  鼠标悬停的时候

div：hover{}/*选择自己本身*/
div p：hover a{}/*后代元素如何选中*/
div + p：hover a{}/*兄弟元素如何选中*/

结构性伪类选择器

 根据嵌套结构选择元素(用起来还是很舒服的,但是属于css3部分,低版本浏览器不兼容)

1. li:first-of-type{background:red;}
   /*选择父元素里面的第一个li元素 无视其他元素*/

   <ul>
       <li>小明</li>
       <li> 小王
   <ul>
       <li>小绿</li>
   </ul>
       </li>
   </ul>

    

2. li:last-of-type{background:blue;}
   /*选择父元素里面的倒数第一个li元素 无视其他元素*/

    

3. p:only-of-type{background:;}

   /*选择父级元素里面唯一的p 可以存在其他子元素*/
   <div>
       <span></span>
       <p></p>
       <span></span>
   </div>

    

4. li:first-child{background:;}
   /*选择父元素的第一个元素 并要求第一个元素为li*/

   <ul>
       <li></li>
       <li></li>
       <li></li>
   </ul>

    

5. li:last-child{color:;}
   /*选择父元素的倒数第一个元素 并要求这个元素为li */

   <ul>
       <li></li>
       <li></li>
       <li></li>
   </ul>

    

6. p:only-child{background:;}
   /*选择父元素中唯一的子元素p 不允许有其他子元素*/

    

7. p:nth-of-type(2){background:;}
   /*选择父元素中第二个p元素 无视其他元素*/

    

8. p:nth-last-of-type(2){bakcground:;}
   /*选择父元素中倒数第二个p元素 无视其他元素*/

    

9. p:nth-child(2)
   /*选择父元素中第二个子元素 并要求此元素为p*/

    

10. p:nth-last-child(2){background:;}
    /*选择父元素中倒数第二个子元素 并要求此元素为p*/

     

11. p:not(.box){color:red;}
    /*选择除了.box之外的p*/

     

12. E：first-line
    表示E元素中的第一行
    E：first-letter
    表示E元素中的第一个字符
    E::selection{background:;}

     

伪元素选择器

通过样式的方式在元素后面添加内容 字面意思假的元素

:before 元素内容里的最前面添加内容 
:after 元素内容里的最后面添加内容 
::为了区分伪类

属性选择器

根据属性和属性值选择元素

[class] 匹配所有具有class属性的元素  
[class=’box’] 匹配所有具有class属性并且值等于box的元素 不仅要具备class属性 并且值也要
符合  
img[src^='image'] 选择src属性以image开头的img标签 
img[src$='png'] 选择src属性以png结尾的img标签