CSS常用选择器及优先级总结

转生成为小睦瓜

于 2024-04-21 19:12:00 发布

阅读量702

点赞数 8

文章标签： css 前端

本文链接：https://blog.csdn.net/lgy422717070/article/details/138039761

版权

本文详细介绍了CSS选择器的11种类型，包括标签选择器、类选择器、id选择器等，以及它们的优先级计算规则。通过实例演示了如何应用这些选择器来控制HTML元素的样式。

摘要由CSDN通过智能技术生成

一、常用选择器

1.标签选择器(标签名{}），选中对应标签里的内容，例(div{})

2.类选择器（.类名{}），选中对应类名的内容，例（.one{}）

注：不可以数字开头，一个标签中可有多个类名

3.id选择器（#id{}），选中对应id的内容，例（#one{}）

注：不可以数字开头，一个标签里只能有一个id属性

4.通配符选择器（*{}），选中页面内所有标签

5.后代选择器（元素1 元素2 {}），选择元素1里中所有的元素2,例（ul li{}）

6.子元素选择器（元素1 > 元素2{}），选择元素1里所有直接后代元素2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav>a {
            color: pink;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

</html>

此时只有第一个元素a会变色，二第二个元素a属于p元素的直接后代，不能被选中

7.并集选择器(元素1,元素2{}），同时选中多个元素，例（div,p{}）

8.伪类选择器

:visited	选取已被访问的链接
:link	选择未被访问的链接
:active	选择鼠标点击后的元素
:hover	选择鼠标移动到上面的元素

9.结构伪类选择器

:first-child	父元素中第一个子元素
:last-child	父元素中最后一个子元素
:nth-child(n)	父元素中第n个元素
:first-of-type	指定类型的第一个子元素
:last-of-type	指定类型的最后一个子元素
:nth-of-type(n)	指定类型的第n个元素

注:两者区别为上面的都是在所有元素中选择，下面的在同类别元素中选择

10.属性选择器

E[属性]	选中含有指定属性的元素E
E[属性="val"]	选中含有指定属性和切属性值=val的元素E
E[属性^="val"]	选中含有指定属性和val开头的元素E
E[属性$="val"]	选中含有指定属性和val结尾的元素E
E[属性*="val"值]	选中指定属性名和含有val的元素E

11.伪元素选择器

::first-letter	选择元素首个字母
:first-line	选择元素首行
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注：befor和after的使用必须配合content

二、选择器优先级

! important>内联(style)> ID选择器 > 类选择器 > 标签选择器>通配符选择器

三、优先级的计算

选择器的优先级是由（A 、B、C、D）的值来决定的

1.若有内联(style)，A=1

2.B= ID选择器出现的次数

3.C的值= 类选择器和属性选择器和伪类选择器出现的总次数

4.D的值= 标签选择器和伪元素选择器出现的总次数

比较时，从左往右依次比较，权重大者优先级更高

 <style>
        li
        {
            color: red;
        }
        ul li
        {
            color: green;
        }
        .blue li
        {
            color: blue;
        }
        #pink li
        {
            color: pink;
         }
</style>

第一个选择器权重为（0,0,0,1）

第二个选择器权重为（0,0,0,2）

第三个选择器权重为（0,0,1,1）

第四个选择器权重为（0,1,0,1）

所以最后会变成粉色

转生成为小睦瓜

关注

8
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
CSS常用选择器及优先级总结

6.子元素选择器（元素1 > 元素2{}），选择元素1里所有直接后代元素2。5.后代选择器（元素1 元素2 {}），选择元素1里中所有的元素2,例（7.并集选择器(元素1,元素2{}），同时选中多个元素，例（1.标签选择器(标签名{}），选中对应标签里的内容，例(3.id选择器（#id{}），选中对应id的内容，例（2.类选择器（.类名{}），选中对应类名的内容，例（第一个选择器权重为（0,0,0,1）第三个选择器权重为（0,0,1,1）第四个选择器权重为（0,1,0,1）
复制链接

扫一扫