CSS 选择器语法举例

CSS 选择器语法举例

7月 3, 2022
CSS, Frontend

简单选择器 #

标签选择器 #

标签选择器也叫元素选择器

/*标签选择器*/
tag {background-color: gold;}

ID 选择器 #

/*ID 选择器*/
#someID {background-color: gold;}

类选择器 #

/*类选择器*/
.someClass {background-color: gold;}

组合使用 #

还有一种选择器也比较常见,形如 tag.class,但是查了一圈文档没有找到一个标准的名字,有的就归为类选择器,暂时先这么叫。它通常用来选择一个 HTML 中的带有 class='xxx' 的标签元素。

<ul class="nav">
    ...
</ul>

<style type="text/css">
/* 表示 class 为 nav 的 ul 元素 */
ul.nav {color: red;}
</style>

文档在 https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

/* All <li> elements with class="spacious" */
li.spacious {
  margin: 2em;
}

/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}

类似的,CSS 中 tag#id.class.class#id#id 也是同样逻辑。

属性选择器 #

通过已经存在的属性名或属性值匹配元素,只有元素(标签)才能有 属性选择器

/* 存在 title 属性的 <a> 元素 */
a[title] {color: purple;}

/* 存在 href 属性并且属性值匹配 "https://example.org" 的 <a> 元素 */
a[href="https://example.org"] {color: green;}

/* 存在 href 属性并且属性值至少包含一个 "example" 的 <a> 元素 */
a[href*="example"] {font-size: 2em;}

/* 存在 href 属性并且属性值结尾是 ".org" 的 <a> 元素 */
a[href$=".org"] {font-style: italic;}

/* 存在 class 属性并且属性值包含以空格分隔的 "logo" 的 <a>元素 */
a[class~="logo"] {padding: 2px;}

/*可以不指定元素,这将选中所有带 href 属性的 DOM 元素*/
[href] {color: red;}

在属性选择器的右方括号前添加一个用空格隔开的字母 i(或 I),可以在匹配属性值时忽略大小写;添加 s(或 S),可以在匹配属性值时区分大小写。

/* 包含 "insensitive" 的链接,不区分大小写 */
a[href*="insensitive" i] {color: cyan;}

/* 包含 "cAsE" 的链接,区分大小写 */
a[href*="cAsE" s] {color: pink;}

通配选择器 #

在 CSS 中,一个星号 (*) 就是一个通配选择器。

/* 同 [lang^=en]{} */
*[lang^=en]{color:green;}

/* 同 .warning{} */
*.warning {color:red;}

/* 同 #maincontent{} */
*#maincontent {border: 1px solid blue;}

分组选择器 #

为了使样式表更简洁,可以使用逗号分隔的列表来对选择器进行分组。也常被称为并集选择器或并集组合器,选择所有能被列表中的任意一个选择器选中的节点。

/* 选择所有 <span> 和 <div> 元素 */
span, div {border: red 2px solid;}

/* 多行分组 */
#main,
.content,
article {font-size: 1.1em;}

使用选择器列表的一个缺点是,如果有一个选择器不被支持,那么整条规则都会失效。

组合器(Combinators) #

后代组合器(空格) #

选择底下所有的节点,不论层级。

<div class="box">
    <p>001</p>
    <div>
        <p>002</p>
        <p>003</p>
    </div>
    <p>004</p>
</div>

<style type="text/css">
/* 表示 class 为 box 的 div 下所有的 p 标签即内容为 001、002、003、004 的 p 标签 */
.box p{background-color: gold;}
</style>

直接子代组合器(大于号 >#

选择底下的直接元素。

<div class="box">
    <p>001</p>
    <div>
        <p>002</p>
        <p>003</p>
    </div>
    <p>004</p>
</div>

<style type="text/css">
/* 表示 class 为 box 的 div 下的直接的子元素 p 即内容为 001、004 的 p 标签 */
.box > p {background-color: gold;}
</style>

一般兄弟组合器(取代符号 ~#

表示后方同层级的全部元素。

<div>
  <p>001</p>
  <div class="box">
    <p>002</p>
  </div>
  <p>003</p>
  <p>004</p>
</div>

<style type="text/css">
/* 表示 class 为 box 的 div 后方同层级的所有 p 元素即内容为 003、004 的 p 标签 */
.box ~ p{background-color: gold;}
</style>

紧邻兄弟组合器(加号 +#

选择后方同层级的第一个元素。

<div>
  <p>001</p>
  <div class="box">
    <p>002</p>
  </div>
  <p>003</p>
  <p>004</p>
</div>

<style type="text/css">
/* 表示 class 为 box 的 div 后方同层级的第一个 p 元素即内容为 003 的 p 标签 */
.box + p{background-color: gold;}
</style>

伪选择器 #

伪类 #

一个冒号的 伪类 指定要选择的元素的特殊状态,可以指定多个。状态的案例非常多,随便举几个例子。

:hover #

用于在用户将鼠标悬停在按钮上时修改成特定的样式。

/* 所有用户指针悬停的按钮 */
button:hover {color: blue;}

伪元素 #

两个冒号的 伪元素 允许对被选择元素的特定部分修改样式,一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器之后。下面举几个例子。

::first-letter #

会选中块级元素第一行的第一个字母。

p::first-letter {font-size: 130%;}

优先级 #

当多个选择器的不同样式命中同一元素的时候,浏览器会通过优先级来判断哪些属性值最为相关,从而在该元素上应用这些属性值。上面介绍的简单选择器中,优先级是按照 标签、类、ID 选择器 递增的。而通配选择符和组合器对优先级没有影响。

当在一个样式声明中使用一个 !important 规则时,此声明将覆盖任何其他声明。

#myid {background-color: blue;}
 
.myclass {background-color: gray;}

/* 尽管 ID 选择器和类选择器具有更高的优先级,
但三个段落背景颜色都显示为红色,
因为 !important 规则会覆盖任何其他声明。 */
p {background-color: red !important;}

另外在 HTML 代码中的内联样式总会覆盖外部样式表的任何样式,因此可看作是具有最高的优先级。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Example</title>
    </head>
    <body>
        <div id="root" style="font-weight: bold;">
            hello bold
        </div>
    </body>
</html>

参考 #

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors

本文共 1540 字,上次修改于 Jul 9, 2024,以 CC 署名-非商业性使用-禁止演绎 4.0 国际 协议进行许可。

相关文章

» AJAX 是什么?

» 浏览器的事件机制

» 搞懂原型链

» WebSocket 是什么?

» JS 加号运算符的运用