2025-09-04 CSS2——常见选择器

发布于：2025-09-06 ⋅ 阅读:(19) ⋅ 点赞:(0)

文章目录


选择器是 CSS 规则的开头部分，用于 选择要应用样式的 HTML 元素。选择器非常重要，因为它们决定了你的样式会作用于哪些元素。

选择器类型 符号 描述 示例
元素选择器 p 直接通过 HTML 标签名来选择所有同类元素。 h2 { color: teal; }
ID 选择器 # 通过元素的 id 属性来选择特定元素，一个 ID 在文档中必须是唯一的。 #element { font-size: 35px; }
class 选择器 . 通过元素的 class 属性来选择元素，一个类可以被多个元素使用。 .highlight { background-color: yellow; }
通用选择器 * 选择 所有 HTML 元素。常用于重置浏览器默认样式。 * { font-family: '楷体'; }
子元素选择器 > 选择直接位于父元素内部的子元素。它只选择第一层级的子元素，不包括更深层级的后代。 .father > p { color: yellowgreen; }
后代选择器 （空格） 选择位于父元素内部的所有后代元素，无论层级有多深。它包括子元素、孙子元素等。 .father p { color: coral; }
相邻兄弟选择器 + 选择紧跟在指定元素后面的第一个同级元素。 h3 + p { background-color: red; }
后续兄弟选择器 ~ 选取所有指定元素之后的相邻兄弟元素。 h3 ~ p { background-color: red; }
伪类选择器 : 选择处于特定状态或位置的元素，常用于用户交互。 :hover 伪类会在鼠标悬停时应用样式。
伪元素选择器 :: 用于创建并样式化虚拟元素，而不是选择实际存在的元素。 ::before 和 ::after 用于在元素内容前后插入虚拟内容。
属性选择器 [attribute=value] 用于根据元素的属性或属性值来选择 HTML 元素。 [type] { border: 1px solid red; }

1 元素选择器

通过元素名称选择 HTML 元素。

语法： element { /* 样式 */ }

如下代码，p 选择器将选择所有 <p> 元素:

p {
    color:red;
    text-align:center;
}

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
        <style>
            p
            {
                color:red;
                text-align:center;
            } 
        </style>
    </head>

    <body>
        <p>Hello World!</p>
        <p>这个段落采用CSS样式化。</p>
    </body>
</html>
image-20250904030548863

2 id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，CSS 中 id 选择器以 “#” 来定义。

语法： #id { /* 样式 */ }

以下的样式规则应用于元素属性 id=“para1”:

#para1
{
    text-align:center;
    color:red;
}

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
        <style>
            #para1
            {
                text-align:center;
                color:red;
            } 
        </style>
    </head>

    <body>
        <p id="para1">Hello World!</p>
        <p>这个段落不受该样式的影响。</p>
    </body>
</html>
image-20250904025514612

3 class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于 id 选择器，class可以在多个元素中使用。

语法： .class { /* 样式 */ }

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}

你也可以指定特定的 HTML 元素使用 class。

在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:

p.center {text-align:center;}

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
        <style>
            p.center
            {
                text-align:center;
            }
        </style>
    </head>

    <body>
        <h1 class="center">这个标题不受影响</h1>
        <p class="center">这个段落居中对齐。</p> 
    </body>
</html>
image-20250904025746855

4 通用选择器

选择所有 HTML 元素。通用选择器使用 * 符号，选择页面上的所有元素。

语法： * { /* 样式 */ }

以下实例选择了所有元素：

* {
    background-color: #b0c4de;
}

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>菜鸟教程(runoob.com)</title>
        <style>
            * {
                background-color: #b0c4de;
            }
        </style>
    </head>

    <body>
        <h1>我的 CSS web 页!</h1>
        <p>你好世界！这是来自 runoob 菜鸟教程的实例。</p>
    </body>
</html>
image-20250904034620743

5 子元素选择器

子元素选择器使用大于号 >，它会选中直接位于父元素内部的子元素。它只选择第一层级的子元素，不包括更深层级的后代元素。

语法： parent > child { /* 样式 */ }

以下实例选择了<div>元素中所有直接子元素 <p> ：

div>p
{
    background-color:yellow;
}

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
        <style>
            div>p
            {
                background-color:yellow;
            }
        </style>
    </head>

    <body>
        <h1>Welcome to My Homepage</h1>
        <div>
            <h2>My name is Donald</h2>
            <p>I live in Duckburg.</p>
        </div>

        <div>
            <span><p>I will not be styled.</p></span>
        </div>

        <p>My best friend is Mickey.</p>
    </body>
</html>
image-20250904030911078

6 后代选择器

后代选择器使用空格，它会选中位于父元素内部的所有后代元素，无论层级有多深。这包括子元素、孙子元素、曾孙子元素等。

语法： ancestor descendant { /* 样式 */ }

以下实例选取所有 <p> 元素插入到 <div> 元素中:

div p
{
    background-color:yellow;
}

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
        <style>
            div p
            {
                background-color:yellow;
            }
        </style>
    </head>
    <body>

        <div>
            <p>段落 1。 在 div 中。</p>
            <p>段落 2。 在 div 中。</p>
        </div>

        <p>段落 3。不在 div 中。</p>
        <p>段落 4。不在 div 中。</p>

    </body>
</html>
image-20250904030821740

7 相邻兄弟选择器

相邻兄弟选择器使用加号 +，它会选中紧跟在指定元素后面的第一个同级元素。这两个元素必须拥有同一个父元素，并且选择器中的第二个元素必须紧跟在第一个元素之后。

语法： element1 + element2 { /* 样式 */ }

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素：

div+p
{
    background-color:yellow;
}

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
        <style>
            div+p
            {
                background-color:yellow;
            }
        </style>
    </head>
    <body>

        <h1>文章标题</h1>

        <div>
            <h2>DIV 内部标题</h2>
            <p>DIV 内部段落。</p>
        </div>

        <p>DIV 之后的第一个 P 元素。</p>

        <p>DIV 之后的第二个 P 元素。</p>

    </body>
</html>
image-20250904031005536

8 后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p>:

div~p
{
    background-color:yellow;
}

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
        <style>
            div~p
            {
                background-color:yellow;
            }
        </style>
    </head>
    <body>

        <p>之前段落，不会添加背景颜色。</p>
        <div>
            <p>段落 1。 在 div 中。</p>
            <p>段落 2。 在 div 中。</p>
        </div>

        <p>段落 3。不在 div 中。</p>
        <p>段落 4。不在 div 中。</p>

    </body>
</html>
image-20250904031222249

9 伪类选择器

CSS伪类用于选择处于特定状态或位置的元素，而不是基于它们的名称、ID 或类名。伪类以冒号 : 开头。它们常用于用户交互，如鼠标悬停、链接访问状态等。

语法： selector:pseudo-class { /* 样式 */ }

CSS类也可以使用伪类：

selector.class:pseudo-class { /* 样式 */ }

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
        <style>
            a:link {color:#000000;}      /* 未访问链接*/
            a:visited {color:#00FF00;}  /* 已访问链接 */
            a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
            a:active {color:#0000FF;}  /* 鼠标点击时 */
        </style>
    </head>
    <body>
        <p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
        <p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
        <p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
    </body>
</html>
image-20250904031932053

注意： 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

**注意：**伪类的名称不区分大小写。

在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

p:first-child i
{
    color:blue;
}

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
        <style>
            p:first-child i
            {
                color:blue;
            } 
        </style>
    </head>

    <body>
        <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
        <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
        <p><b>注意:</b> 当:first-child 作用于 IE8 及更早版本的浏览器, DOCTYPE 必须已经定义.</p>
    </body>
</html>
image-20250904032119831

10 伪元素选择器

CSS 伪元素是一种特殊的选择器，它可以在不改变 HTML 结构的情况下对页面元素的特定部分进行样式设置。

伪元素用于创建并样式化虚拟元素，这些元素在 HTML 文档中并不实际存在。伪元素以双冒号 :: 开头。

语法： selector::pseudo-element { /* 样式 */ }

CSS 类也可以使用伪元素：

selector.class::pseudo-element { /* 样式 */ }

常用的 CSS 伪元素有 ::before、::after、::first-line、::first-letter 等。

::before/::after 伪元素可以在元素的内容前面/后面插入新内容。

下面的例子在每个 <h1> 元素前面插入内容 "Before: "：

h1::before 
{
    content:"Before: ";
}

示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>菜鸟教程(runoob.com)</title>
    <style>
      h1::before {
        content: "Before";
      }
    </style>
  </head>

  <body>
    <h1>This is a heading</h1>
    <p>The :before pseudo-element inserts content before an element.</p>
    <h1>This is a heading</h1>
    <p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>
  </body>
</html>
image-20250904033328349

11 属性选择器

CSS 属性选择器用于根据元素的属性或属性值来选择 HTML 元素。

属性选择器可以帮助你在不需要为元素添加类或 ID 的情况下对其进行样式化。

11.1 [attribute]

选择带有指定属性的所有元素（无论属性值是什么）。

/* 选择所有具有 `type` 属性的元素 */
[type] {
    border: 1px solid red;
}

下面的例子是把包含标题（title）的所有元素变为蓝色：

<!DOCTYPE html>
<html>
    <head>
        <style>
            [title]
            {
                color:blue;
            }
        </style>
    </head>

    <body>
        <h2>Will apply to:</h2>
        <h1 title="Hello world">Hello world</h1>
        <a title="runoob.com" href="https://www.runoob.com/">runoob.com</a>
        <hr>
        <h2>Will not apply to:</h2>
        <p>Hello!</p>
    </body>
</html>
image-20250904035047373

11.2 [attribute="value"]

选择具有指定属性和值完全匹配的元素。

/* 选择所有 `type` 属性等于 `text` 的元素 */
[type="text"] {
    background-color: yellow;
}

下面的实例改变了标题 title=‘runoob’ 元素的边框样式:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title>  
        <style>
            [title=runoob]
            {
                border:5px solid green;
            }
        </style>
    </head>

    <body>
        <h2>将适用:</h2>
        <img title="runoob" src="logo.png" width="270" height="50" />
        <br>
        <a title="runoob" href="https://www.runoob.com/">runoob</a>
        <hr>
        <h2>将不适用:</h2>
        <p title="greeting">Hi!</p>
        <a class="runoob" href="https://www.runoob.com/">runoob</a>
    </body>
</html>
image-20250904035245860

11.3 [attribute~="value"]与[attribute*="value"]

  • [attribute~="value"] 选择属性值中包含指定的独立单词 value（用空格分隔的词列表之一）的元素。

    /* 选择属性值中包含单词 `button` 的元素 */
[class~="button"] {
    font-weight: bold;
}

  • [attribute*="value"] 选择属性值中包含指定值的元素，不要求是独立单词。

    /* 选择所有 `title` 属性中连续包含 `tutorial` 的元素 */
[title*="tutorial"] {
  font-style: italic;
}

下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title>  
        <style>
            [title*=hello]
            {
                color:red;
            } 
            [title~=hello]
            {
                color:blue;
            } 
        </style>
    </head>

    <body>
        <h2>~=:</h2>
        <h1 title="hello world">Hello world</h1>
        <p title="student hello">Hello CSS students!</p>
        <hr>
        <h2>*=:</h2>
        <p title="student-hello">Hi CSS students!</p>
    </body>
</html>
image-20250904040421711

11.4 [attribute|="value"]与[attribute^="value"]

  • [attribute|="value"]：选择完整且唯一的单词 value，或者以 value- 分隔开，常用于语言代码。

    /* 选择所有 `lang` 属性是 `en` 或者以 `en-` 开头的元素 */
[lang|="en"] {
    color: green;
}

  • [attribute^="value"]：选择属性值以指定值开头的元素，不要求是独立单词。

    /* 选择所有 `href` 属性以 `https` 开头的链接 */
[href^="https"] {
    text-decoration: none;
}

11.5 [attribute$="value"]

选择属性值以指定值结尾的元素，不要求是独立单词。

/* 选择所有 src 属性以 .jpg 结尾的图片 */
[src$=".jpg"] {
    border: 2px solid blue;
}

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布