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

叁歲伎倆 2022-04-13 12:27 231阅读 0赞

# 组合选择器的优先级 #

*  比较优先级时，保证精准控制到了元素
 *  比较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标签