CSS 选择器（超级详细，欢迎补充）

热爱编程的林兮

已于 2022-12-08 08:56:21 修改

阅读量3.7k

点赞数 23

分类专栏： HTML 文章标签： css html css3

于 2022-11-25 20:39:08 首次发布

本文链接：https://blog.csdn.net/m0_63951142/article/details/127605419

版权

本文详细介绍了CSS选择器的各类别，包括基本选择器、组合选择器、其他选择器、伪类和伪元素，强调了选择器的优先级和CSS的继承与层叠性。通过对标签选择器、类选择器、ID选择器、伪类和伪元素的实例解析，帮助读者深入理解CSS样式的应用和控制。

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

1、导语

css样式是由若干条样式规则组成的，这样的样式规则可以应用到不同的元素或文档上。css规则由两部分组成：选择器和声明语句。

选择器：selector用来指点需要设置样式的元素或文档（即HTML对象）

声明语句：通过属性（property）和属性值（value）描述样式的具体内容，多组声明语句用分号（；）分隔。声明语句不分先后顺序。

今天我们重点来介绍css中的选择器。

//基本语法
selector{
property1:value1;
property2:value2;
property3:value3;
...
}

2、css基本选择器

1）、标签选择器

可以看这篇博客链接HTML的标签HTML的常用标签

HTML文档的标签是css样式规则中非常常见的选择器。我们可以直接将HTML的标签作为选择器的名称，如p、h1、em，设置html本身。

示例：

<!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>
      /*   p{        //p标签选择器
            border: 1px salmon solid;
            height: 100px;
            width: 100px;
            text-align: center;
            line-height: 100px;
        }
        h5{         //h5标签选择器
            border: 1px red solid;
            height: 100px;
            width: 100px;
            text-align: center;
            line-height: 100px;
        } */
    </style>
</head>
<body>
    <p>段落标签</p>
    <h5>文章标题标签</h5>
</body>
</html>

未加标签选择器

加标签选择器

2）类选择器

网页中通过使用标签选择器控制文档中所有该标签的样式，但是在实际设计过程中，有些由相同标签定义的不同对象需要显示不同的样式，这时就需要利用其他选择器来实现差异化的样式定义，例如可以利用类选择器轻松地将文档中多个<p>段落设置成不同的样式。

CSS 类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。