CSS选择器 - Chromer's Blog

1	<div class="wrapper"></div>

1
2
3

.wrapper{
  color: red;
}

给类名为wrapper的元素的字体颜色设置为红色。

1	<div id="banner"></div>

1
2
3

#banner{
  background: url("http://chromer.com/images/banner.jpg")
}

给ID为banner的元素设置背景图片

1	<p> Hello World </p>

1
2
3

p {
  color: red;
}

给标签为p的元素的字体颜色设置为红色

1	<h1 title="title"></h1>

1
2
3

h1[title]{
  font-size: 48px;
}

给所有包含title属性的h1标签的字体大小设置为48px
除此之外属性选择器还有精确匹配和模糊匹配:

选择器	功能
[attribute=value]	匹配attribute的值等于value的元素
[attribute~=value]	匹配attribute的值至少有一个等于value的元素
<!— [attribute\|=value]	匹配attribute的值为“value”或是以“value-”为前缀的元素	—>
[attribute^=value]	匹配attribute的值是以”value”开头的元素
[attribute$=value]	匹配attribute的值是以“value”结尾的元素
[arribute*=value]	匹配attribute的值是包含“value”的元素

<h1>H1</h1>
<h2>H2</h1>
<h3>H3</h1>
<h4>H5</h1>

1
2
3

h1, h2, h3, h4{
  color: #FFFFFF;
}

设置标签h1、h2、h3、h4的颜色为#FFFFFF

<div>
  <h1>H1</h1>
  <p>这是内容</p>
  <p>哈哈</p>
</div>

1
2
3

h1 + p {
  color: red;
}

设置紧跟着h1标签后面的p元素的文字颜色为red

和上面类似但是匹配的是和指定元素后面的兄弟元素,不一定是紧跟着指定元素之后的

<div>
  <h1>H1</h1>
  <p>这是内容</p>
  <p>哈哈</p>
</div>

1
2
3

h1 ~ p {
  color: red;
}

设置h1标签后面的所有p元素的文字颜色为red

1
2
3

<div>
  <h1> hello </h1>
</div>

1
2
3

div > h1 {
  color: blue;
}

Contents