7.19 Web前端-css特殊选择器

最新推荐文章于 2024-05-09 11:34:16 发布

执笔绘江山

最新推荐文章于 2024-05-09 11:34:16 发布

阅读量172

点赞数 3

文章标签：前端 css servlet

本文链接：https://blog.csdn.net/qq_45059691/article/details/125880381

版权

大家晚上好，今天我么把选择器部分说完，今天说的都是与伪类相关的知识点。

1.伪类选择器：

1.1伪类的意思是不存在的类，或者说特殊的类，伪类用来描述一个元素的特殊状态

例如：第一个元素，被点击的元素，鼠标移入的元素···

一般请情况下，使用：开头，在这里我们使用到的有三种：

1、 :first-child 代表第一个子元素

2、 :last-child 代表最后一个子元素

3、 :nth-child() 代表选中第n个子元素

第三个括号内部可填的特殊值有： n，2n或even选中偶数，2n+1或odd选中奇数

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

1、:first-of-type 第一个子元素

2、:last-of-type 最后一个子元素

3、:nth-of-type() 选中第n个子元素

功能跟上面三个差不多，但是不同的是，这是在同类型的子元素中去选择

1.2否定伪类

否定伪类的作用就是将符合条件的元素从选择器中去除，和上面选中的恰好相反

语法 :not() 括号中放元素名

2.a元素的伪类：

a标签之间的介绍中就说过是一个特殊的标签，对于a元素来说，它有各种各样的变化，在这我们说四个a元素的伪类：它们分别是：

link：用来表示未访问过的链接

visited：用来表示访问过的链接

hovor：用来表示鼠标移入的状态，在后面会经常用到

active：用来表示鼠标点击后的状态

下面我来用代码举个例子给大家看看四个伪类的用法：

<!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>
  </head>
  <body>
    <a href="#">第一个链接</a><br />
    <a href="#">第二个链接</a><br />
    <a href="#">第三个链接</a><br />
    <a href="#">第四个链接</a>
  </body>
</html>

上面是四个普通的a标签的链接，运行结果如图：

我们添加四个伪类：

<!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>
      .a1:link {
        color: red;
      }
      .a2:visited {
        color: gray;
      }
      .a3:hover {
        background-color: red;
      }
      .a4:active {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <a href="#" class="a1">第一个链接</a><br />
    <a href="#" class="a2">第二个链接</a><br />
    <a href="#" class="a3">第三个链接</a><br />
    <a href="#" class="a4">第四个链接</a>
  </body>
</html>

运行结果如下：

可以看到实现了上述所述的功能。

3.伪元素选择器：

伪元素的定义是表示页面中一些特殊的并不真实存在的元素，我们选择伪元素要用到五个语法,它们分别如下：

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 选中的内容

::before 元素的开始位置

::after 元素的结束位置

注意：before和after必须要结合content使用

伪元素选择器在这里不针对具体的某个元素，而是针对它所指代的一行或者某个字母。

4.选择器的权重问题：

选择器的权重：

内联样式 1000

id选择器 100

类和伪类选择器/属性选择器 10

元素选择器 1

通配符、子选择器、相邻选择器等。如*、>、+ 0000

继承的样式没有优先级

!important 最高优先级

注意：

比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则优先显示

(并集选择器)分组选择器是单独计算的

如果优先级计算后相同，此时则优先使用靠下的样式

选择器的累加，不会超过上一级数量级，例如：类选择器再高也不会超过id选择器量变达不到质变

一般来说：

选择器越具体，优先级越高

!important 慎用

那么选择器部分就说完了，如果有什么错误希望大家指正，感谢大家的观看！

执笔绘江山

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
7.19 Web前端-css特殊选择器

选择器的累加，不会超过上一级数量级，例如类选择器再高也不会超过id选择器量变达不到质变。伪元素选择器在这里不针对具体的某个元素，而是针对它所指代的一行或者某个字母。大家晚上好，今天我么把选择器部分说完，今天说的都是与伪类相关的知识点。伪类的意思是不存在的类，或者说特殊的类，伪类用来描述一个元素的特殊状态。否定伪类的作用就是将符合条件的元素从选择器中去除，和上面选中的恰好相反。功能跟上面三个差不多，但是不同的是，这是在同类型的子元素中去选择。通配符、子选择器、相邻选择器等。...
复制链接

扫一扫