CSS 选择器

最新推荐文章于 2025-03-06 12:11:45 发布

Jacks丶

最新推荐文章于 2025-03-06 12:11:45 发布

阅读量247

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_44713454/article/details/109698253

前端专栏收录该内容

14 篇文章

订阅专栏

文章目录

1. 基本选择器

1.1 标签选择器

给指定的标签加样式，语法如下：

[标签名] {
    /* 样式 */
}

p {
    color: red;
}

1.2 ID 选择器

给指定 ID 的标签添加样式，语法如下：

#[id] {
    /* 样式 */
}

<body>
    <div id="abc"></div>
</body>

#abc {
    height: 20px;
    width: 20px;
    background-color: black;
}

1.3 类选择器

类选择器以标签的 class 属性值作为选择对象，语法如下：

.[类名] {
    /* 样式 */
}

<body>
    <div class="abc"></div>
</body>

.abc {
    height: 20px;
    width: 20px;
    background-color: black;
}

1.4 通配选择器

通配选择器选择的是页面所有内容，语法如下：

* {
    /* 样式 */
}

一般用于清除默认样式

* {
    margin: 0;
    padding: 0;
}

2. 复合选择器

2.1 指定选择器

选择同时满足多个选择器的元素，可以理解为交集概念，语法如下：

[选择器1][选择器2]...[选择器n] {
    /* 样式 */
}

<body>
    <h2 class="cls">古诗词</h2>
    <p title="将进酒" class="cls">黄河之水天上来，奔流到海不复回。</p>
    <p title="越人歌" class="cls">山有木兮木有枝，心悦君兮君不知。</p>
</body>

p.cls[title=将进酒] {
    background-color: brown;
}

注意，选择器之间不留空格，只会选择满足所有选择器的对象。

2.2 包含选择器

选择分别满足多个选择器的对象，是一个并集的概念，语法如下：

[选择器1],[选择器2],[选择器n] {
    /* 样式 */
}

<body>
    <div>凑热闹</div>
    <h2 class="cls">古诗词</h2>
    <p id="将进酒">黄河之水天上来，奔流到海不复回。</p>
    <p title="越人歌">山有木兮木有枝，心悦君兮君不知。</p>
</body>

div,.cls,#将进酒,[title=越人歌] {
    background-color: brown;
}

3. 关系选择器

关系选择器也属于复合选择器。

3.1 子元素选择器

从第一个选择器选择的父对象中选择子对象，语法如下：

[父选择器]>[子选择器] {
    /* 样式 */
}

<body>
    <div>
        <h2>标题1</h2>
        <p>段落1</p>
        <div>
            <h2>标题2</h2>
            <p>段落2</p>
        </div>
    </div>
    <span>
        <p>段落2</p>
    </span>
</body>

div>p {
    color: red;
}

只要是满足选择器的父子，无论在哪，都会被选中。

3.2 相邻选择器

相邻选择器，从第一个选择器选择的对象中，用第二个选择器选择下一个相邻的元素，语法如下：

[第一个选择器]+[第二个选择器] {
    /* 样式 */
}

<h2>标题</h2>
<p class="p1">段落1</p>
<p class="p2">段落2</p>
<span>段落3</span>

h2+p { color: red; }    /* 选中段落一 */
h2+.p1 { color: red; }  /* 选中段落一 */
h2+.p2 { color: red; }  /* 无选中 */
h2+span{ color: red;}   /* 无选中 */

注意：相邻选择器只能选择相邻元素，满足弟选择器才会被选中。

3.3 兄弟选择器

兄弟选择器，从兄选择器选择的对象中，用弟选择器选出所有的弟弟元素，语法如下：

[兄选择器]~[弟选择器] {
    /* 样式 */
}

<h2>标题</h2>
<p class="p1">段落1</p>
<p class="p2">段落2</p>
<span>段落3</span>

h2~p { color: royalblue; }  /* h2 下面的所有 p 元素被选中 */
h2~span { color: red; }     /* h2 下面的所有 span 元素被选中 */

3.4 后代选择器

后代选择器是从父元素中选出所有后代元素，语法如下：

[祖先选择器][空格][后代选择器] {
    /* 样式 */
}

<div id="com">
    <h2>标题</h2>
    <p class="p1">段落1</p>
    <p class="p2">段落2</p>
    <span>段落3</span>
    <div>
        <p>段落3</p>
        <div>
            <p>段落4</p>
        </div>
    </div>
</div>

#com p {
    color: red;
}

注意与指定选择器区分，指定选择器的选择器之间没有空格，后代选择器有空格。

4. 属性选择器

属性选择器根据标签的属性或属性与值进行选择，语法如下：

[属性名] {}          /* 选择有指定属性的元素 */
[属性名=属性值]{}    /* 匹配属性与属性值 */
[属性名^=属性值]{}   /* 前缀匹配 */
[属性名$=属性值]{}   /* 后缀匹配 */
[属性名*=属性值]{}   /* 模糊匹配 */

<p title="将进酒">黄河之水天上来，奔流到海不复回。</p>
<p title="越人歌">山有木兮木有枝，心悦君兮君不知。</p>
<p title="大林寺桃花">人间四月芳菲尽，山寺桃花始盛开。</p>
<p title="望月怀远">海上生明月，天涯共此时。</p>
<p title="念奴娇·赤壁怀古">江山如画，一时多少豪杰。</p>

[title="将进酒"] { color: red; }
[title^="越"] { color: orange; }
[title$="花"] { color: blue; }
[title*="怀"] { color: purple; }

5. 伪选择器

伪选择器包括伪类和伪元素，语法如下：

[选择器][伪元素或伪类名] {
    /* 样式 */
}

<p>段落</p>

p:hover {
    color: red;
}

使用时查手册：

6. 样式继承

为一个祖先元素设置样式，可以自动被其子元素继承，利用继承可以将一些通用的样式，统一设置到祖先元素上，这样只需要设置一次，让所有后代元素都拥有该样式。
需要注意的是，不是所有的样式都会被继承，如背景相关的、布局相关的样式不会被继承。

7. 选择器权重

不同的选择器选择相同的元素，并且对相同的样式设置不同的值时，会有样式冲突。发生样式冲突时，应用哪个值由选择器的权重（优先级）决定。

选择器的权重：

样式	优先级
内联样式	1,0,0,0
id 选择器	0,1,0,0
类和伪类选择器	0,0,1,0
元素选择器	0,0,0,1
通配选择器	0,0,0,0
继承的样式	没有优先级
属性值后面加 !important;	最高优先级