css伪类选择器相关知识点

最新推荐文章于 2023-03-20 18:27:54 发布

qq_47651772

最新推荐文章于 2023-03-20 18:27:54 发布

阅读量138

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_47651772/article/details/127971657

版权

一、伪类（不存在的类，特殊的类）

定义：不真实存在的类，是一种特殊的类，它表示的元素的一种状态，不是固定

例如：第一名，倒数第一名，鼠标悬浮，鼠标点击等

常见的伪类选择器：

语法使用‘:’开头

:first-child 第一个元素

:last-child 最后一个元素

:nth-child() 选中第几个元素

特殊值：

2n或even 偶数

2n+1或odd 奇数

—以上这些伪类都是根据所有的子元素进行排序。

:first-of-type 第一个元素

:last-of-type 最后一个元素

:nth-of-type() 选中第几个元素

—功能跟上面相似，不同的是，这是在同类型的子元素中去选择

：not() 否定伪类，将符合条件的元素从选择器中去除。

需求二：给所有诗句加背景色，除了l1

span:first-child{

color: red;

}

li:not(#l1){

background-color: green;

}

li{

/* 去除li的项目符号 */

list-style: none;

}

/* 去除a标签的下划线 */

text-decoration: none;

}

h1{

/* 增加下划线 */

text-decoration: underline;

}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 需求一：将ul里的第一个li自动一直设置为红色 */

      /* 一 、伪类（不存在的类，特殊的类）
          定义：不真实存在的类，是一种特殊的类，它表示的元素的一种状态，不是固定某一定
          例如：第一名，倒数第一名，鼠标悬浮，鼠标点击等

          常见的伪类选择器
              语法使用‘:’开头
              :first-child   第一个元素
              :last-child    最后一个元素
              :nth-child()   选中第几个元素
                特殊值：
                  2n或even    偶数
                  2n+1或odd   奇数

          —以上这些伪类都是根据所有的子元素进行排序

            :first-of-type 第一个元素
            :last-of-type  最后一个元素
            :nth-of-type()   选中第几个元素
         
          —功能跟上面相似，不同的是，这是在同类型的子元素中去选择
                          
      */
      /* 二、:not() 否定伪类
           -将符合条件的元素从选择器中去除  */
        /* 需求二：给所有诗句加背景色，除了l1 */

最低0.47元/天解锁文章

qq_47651772

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css伪类选择器相关知识点

3、所有的选择器权重相加，最高也不会超过上一等级的权重,如再多的类选择器权重相加，也不会超过id选择器权重。样式冲突：给同一个元素设置相同的样式名，不一样的样式值，最终哪个样式有效果，是看选择器的权重，谁的权重高，就有效果。4、在并集选择器（群组选择器）当中，选择器权重是各算各的,最终谁大听谁的。5、::after 在元素的最后面，必须要配合content样式名使用。一般情况下，可以测试使用,测试是否是选择器权重的问题。定义：不真实存在的类，是一种特殊的类，它表示的元素的一种状态，不是固定。
复制链接

扫一扫