1.01.18CSS选择器2-CSDN博客

本文链接：https://blog.csdn.net/m0_59593735/article/details/123275370

1.01.18CSS选择器2

1. 伪类选择器

伪类选择器前面是有冒号(:)的
伪类选择器一般的用法，都使用交集选择器：
如：选择器：伪类选择器{
样式：值;
}
也可以直接用，如：
：伪类选择器{
样式:值;
}
伪类选择器后可以接其他选择器的，可以参考下面的：hover例子

用于a标签
- link
  - 未访问时的样式
  - 用法：
    a:link{
    样式：值;
    }
- visited
  - 访问过后的样式
  - 用法
    a:visited{
    样式：值;
    }
- 注意：a标签的四种状态(link、vixited、active、hover)的样式时，要遵循LVHA的顺序，不然会有样式覆盖，有些样式会不生效，没有效果
其他
- active
  - 点击但不松开的样式（针对a标签）或获取焦点时（针对输入框）的样式
  - 用法
    a:active{
    样式：值;
    }
    input:active{
    样式：值;
    }
- hover
  - 鼠标悬浮时的样式
  - 用法
    1. ：hover后面不带东西时,选择器1选中的元素样式会改变：
      选择器1：hover{
      样式：值
      }
    2. ：hover后面带东西时,悬浮住选择器1，其他的选择器选择中的元素的样式改变：
      选择器1：hover~兄弟选择器{
      样式：值;
      }
- focus
  - 获取焦点时的样式
  - 一般用在input标签：type=radio checkbox text
- disabled
  - 被禁用的元素的样式，一般用于带有disabled属性的元素
- enabled
  - 可以交互并且可用的元素的样式，一般用于不带有disabled属性并且可以用作交互的元素
- checked
  - 处于选中状态的元素
  - 一般针对单选框与复选框
  - 获取焦点与选中状态的区别:
    - 就是单选框与复选框点击了选中状态，其一定获取了焦点
    - input type="text"获取焦点时，其不是选中状态
- not
  - 选中不含有选择器的元素
  - 用法：
    选中选择器1选中的但不包含选择器2的元素：
    选择器1：not(选择器2){
    样式：值;
    }
- empty
  - 选中空元素，即没有任何子元素或内容的标签,还有一些单标签（因为其绝对不含子标签与内容）
- target
  - a标签设置了锚点，锚到的元素的样式
用于描述位置的伪类选择器
选中的是该元素的父代元素的子元素(选中的是一组兄弟元素中的元素)
- 一般搭配后代或子代选择器使用
- first-child
- last-child
- nth-child()
  - 从前往后数
  - ()里面可以写n,n默认为>=0的整数
  - 选前面x个,()里面可以写-n+x：nth-child(-n+x)
  - 选后面x个,()里面可以写n+x：nth-child(n+x)
  - 注意：n需要写在前面，即-n+2,不能写成2-n，不然没有效果
- nth-last-child()
  - 从后往前数，规则如nth-child
- only-child
  HTML：

        <ul>
            <!-- <div>这是一个div</div> -->
            <li>这是第1个li</li>
            <li>这是第2个li</li>
            <li>这是第3个li</li>
            <li>这是第4个li</li>
            <li>这是第5个li</li>
            <li>这是第6个li</li>
            <li>这是第7个li</li>
            <li>这是第8个li</li>
            <!-- <i>asdfasdf</i> -->
</ul>
        
        <ol>
            <!-- <p>a</p> -->
            <li>这是唯一一个li</li>
        </ol>

对应的CSS

        /* 伪类选择器 */
        /* :first-child  第一个子元素*/
        ul>li:first-child{
            color: lightcoral;
}
        
        /* :last-child 最后一个子元素*/
        ul>li:last-child{
            color: lightgreen;
}
        
        /* :nth-child( n【从0开始】 | odd | even )  指定第n个元素*/
        /* 选中第三个子元素 */
        ul>li:nth-child(3){
            color: orange;
}
        
        /* 选中奇数个li */
        /* ul>li:nth-child(odd){ */
        ul>li:nth-child(2n-1){
            font-weight: bolder;
            letter-spacing: 3px;
}
        
        /* 选中偶数个li */
        /* ul>li:nth-child(even){ */
        ul>li:nth-child(2n){
            background-color: slategrey;
}
        
        /* 前面3个li */
        /* n = 0 1 2 3 4 5 6 7 8 ....... */
        /* -n+3 =  3   2   1  (0  -1  -2  -3)  */
        ul>li:nth-child( -n+3 ){
            font-style: italic;
}
        /* 从第3个li开始带后面的所有li */
        /* n = 0 1 2 3 4 5 6 7 8 ....... */
        /* n+3 =  3   2   1  (0  4  5  6)  */
        ul>li:nth-child(n+3){
    font-style: italic;
        }
        
        /* :nth-last-child(n)  选中倒数第n个元素*/
        ul>li:nth-last-child(2){
            line-height: 60px;
        }

        /* 最后两个元素 */
        /* n： 0 1 2 3 4 5 .... */
        /* -n+2: 2   1   (0  -1) */
        ul>li:nth-last-child(-n+2){
            border-left: 10px solid red;
        }
        
        /* :only-child 选中唯一一个子元素*/
        ol>li:only-child{
            color: red;
        }

选中的是该元素的父代元素的指定类型子元素(选中的是一组指定类型的兄弟元素中的元素)
- first-of-type
- last-of-type
- nth-of- type
- only-of-type
  HTML：

        <ul>
            <div>div元素</div>
            <div>div元素</div>
            <div>div元素</div>
            <div>div元素</div>
            <div>div元素</div>
            <li>第1个li</li>
            <li>第2个li</li>
            <li>第3个li</li>
            <li>第4个li</li>
            <li>第5个li</li>
            <li>第6个li</li>
            <li>第7个li</li>
            <li>第8个li</li>
            <i>斜体</i>
            <i>斜体</i>
            <i>斜体</i>
            <span>啊的撒法发</span>
        </ul>

对应的CSS：

        /*  :first-of-type  选中第一个指定类型（这里是li）的元素*/
        ul>li:first-of-type{
        color: red;
        }
        
        /* :last-of-type 选中最后一个指定类型（这里是li）的元素*/
        ul>li:last-of-type{
        color: blue;
        }
        
        /* :nth-of-type(n)  选中第n个指定类型(这里是li)的元素 */
        ul>li:nth-of-type(1){
        color: skyblue;
        }
        
        /* 选中倒数第3个指定类型(这里是li)的元素 */
        ul>li:nth-last-of-type(3){
            color: teal;
        }
        
        /* 选中子元素中, 唯一一个指定类型（span）的元素 */
        ul>span:only-of-type{
            background-color: red;
        }

2. 伪元素选择器

伪元素选择器前面是有两个冒号(::)的
before
- 元素前面的样式
- 一定要content属性,不然不起效果,content可以为空值：content:""
- 同span元素特性一致,即span有的css属性他也都有
- 他是选中元素的子元素，所有单标签没有before,因为单标签规定不具有子元素
after
- 元素后面的样式
- 一定要content属性,不然不起效果,content可以为空值：content:""
- 同span元素特性一致,即span有的css属性他也都有
- 他是选中元素的子元素，所有单标签没有after,因为单标签规定不具有子元素
selection
- 元素被I型(光标)鼠标标选中时的样式，一般用于图片和文字标签
first-line
- 首行文字的样式
first-letter
- 首字的文字样式

3. 选择器的优先级

!important关键字>内联样式(元素自身style设置属性) > id选择器>类选择器(属性选择器、伪类选择器) >元素选择器>通配符选择器>继承的样式>浏览器的默认样式
选择器层级越多，样式优先级越高
- 层级方面的优先级也受上面那条规则的影响，就是说，一个2层级的id选择器>一个3层级的类名选择器
选择器权重相同,遵循就近原则
使用VS Code编辑器时，鼠标悬浮在CSS文件的选择器上可以显示优先级的权重

4. 基准参考点

把相同的域名放到头部，页面中可以忽略掉域名，直接写路径和文件名就行
关键字>内联样式(元素自身style设置属性) > id选择器>类选择器(属性选择器、伪类选择器) >元素选择器>通配符选择器>继承的样式>浏览器的默认样式
选择器层级越多，样式优先级越高
- 层级方面的优先级也受上面那条规则的影响，就是说，一个2层级的id选择器>一个3层级的类名选择器
选择器权重相同,遵循就近原则
使用VS Code编辑器时，鼠标悬浮在CSS文件的选择器上可以显示优先级的权重