CSS选择器

Source:《CSS权威指南·第三版》

选择器

选择文档中的元素,设置其属性。

选择h1元素,添加下划线:

1
2
3
4
/*.css file*/
h1 {
text-decoration: underline;
}

1
2
<!-- .html file -->
<h1>Title</div>

选择器分组

使用”,”。

选择h1与h2元素:

1
2
3
4
/*.css file*/
h1, h2 {
text-decoration: underline;
}

1
2
3
<!-- .html file -->
<h1>Title</h1>
<h2>Content</h2>

通配选择器

选择文档中的所有元素:

1
2
3
* {
color: red;
}

元素选择器

选择所有元素

1
2
3
4
/*.css file*/
div {
color: red;
}
1
2
3
<!-- .html file -->
<div id="1">1. Red</div>
<div class="2">2. Blue</div>

类和ID选择器

类选择器

1
2
3
4
/* .css file */
.top {
color: red;
}
1
2
3
4
<!-- .html file -->
<div class="top">
Hello World
</div>

ID选择器

1
2
3
4
/* .css file */
#top {
color: red;
}
1
2
3
4
<!-- .html file -->
<div id="top">
Hello World
</div>

属性选择器

会选择包含class属性的h1元素:

1
2
3
4
/* .css file */
h1[class] {
color: red;
}

1
2
3
<!-- .html file -->
<h1>Hello World</h1>
<h1 class="have_color">Hello World</h1> <!-- 被选择 -->

具体属性选择

1
2
3
4
/* .css file */
children[sex="boy"] {
color: blue;
}
1
2
3
<!-- .html file -->
<children sex="boy">John</children>
<children sex="girl">Lily</children>

部分属性选择

1
2
3
4
/* .css file */
p[class~="urgent"] {
font-weight: bold;
}
1
2
3
<!-- .html file -->
<p class="urgent warning">first p element</p>
<p class="warning lighting">second p element</p>

根据文档结构选择

根据DOM结构进行选择

后代选择

使用空格。

下面的代码会选择div中所有的p元素:

1
2
3
4
/*.css file*/
div p {
font-size: 200%;
}

1
2
3
4
5
6
7
<div>
<p>Time</p> <!-- 被选择 -->
<ul>
<li>1.<p>night</p></li> <!-- 被选择 -->
<li>2.<p>day</p></li> <!-- 被选择 -->
</ul>
</div>

子元素选择

使用”>”号。

仅选择与div直接相连的p元素:

1
2
3
4
/*.css file*/
div > p {
font-size: 200%;
}

1
2
3
4
5
6
7
<div>
<p>Time</p> <!-- 被选择 -->
<ul>
<li>1.<p>night</p></li>
<li>2.<p>day</p></li>
</ul>
</div>

相邻兄弟元素选择

使用”+”号。

选择h1与在其之后出现的p元素:

1
2
3
4
/* .css file */
h1 + p {
margin-right: 0;
}

1
2
3
4
5
<!-- .html file -->
<div>
<h1>Hello</h1>
<p>World</p>
</div>

综合使用

1
2
3
html > body table + ul {
margin-top: 1.5em;
}
文章目录
  1. 1. 选择器
    1. 1.1. 选择器分组
    2. 1.2. 通配选择器
    3. 1.3. 元素选择器
  2. 2. 类和ID选择器
    1. 2.1. 类选择器
    2. 2.2. ID选择器
  3. 3. 属性选择器
    1. 3.1. 具体属性选择
    2. 3.2. 部分属性选择
  4. 4. 根据文档结构选择
    1. 4.1. 后代选择
    2. 4.2. 子元素选择
    3. 4.3. 相邻兄弟元素选择
    4. 4.4. 综合使用
|