回顾选择器
- 通配选择器
- 元素选择器
- 类选择器
- ID选择器
- 后代选择器
新增基本选择器
- 子元素选择器（直接后代选择器）
概念
子元素选择器只能选择某元素的子元素
语法格式
父元素 > 子元素
- 相邻兄弟元素选择器
概念
相邻兄弟选择器可以选择紧接在另一元素后的元素，而且它们具有一个相同的父元素
语法格式
元素 + 兄弟相邻元素(Eelement + sibling)
例子
<style>
section > div + article{
color:red;
}
</style>
<section>
<div>123</div>
<article>
<div>abc</div>
</article>
<article>
<div>efg</div>
</article>
</section>
- 通用兄弟选择器
概念
选择某元素后面的所有兄弟元素，而且它们具有一个相同的父元素
语法格式
元素 ~ 后面所有兄弟相邻元素(Eelement ~ sibling)
例子
<style>
section > div ~ article{
color:red;
}
</style>
<section>
<div>123</div>
<article>
<div>abc</div>
</article>
<article>
<div>efg</div>
</article>
</section>
- 群组选择器
概念
群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号","隔开
语法格式
元素1,元素2,...元素n (Eelement1,Eelement2,Eelement3,...Eelementn)
例子
<style>
section > article,
section > aside,
secyion > div {
color:red;
background-color:green
}
</style>
<section>
<article>
<div>abc</div>
</article>
<article>
<div>efg</div>
</article>
<div>123</div>
</section>
属性选择器
对带有指定属性的HTML元素设置样式
使用CSS3属性选择器，可以只指定元素的某个属性，或者还可以同时指定元素的某个属性和其对应的属性值
- Element[attribute]
概念
为带有 attribute 属性的Element 元素设置样式
例子
<style>
a[href] {
text-decoration: none;
}
</style>
<a href="attribute.html">attribute</a>
- Element[attribute="value"]
概念
为 attribute="value" 属性的 Element 元素设置样式
例子
<style>
a[href="#"] {
order:red;
}
</style>
<a href="#">attribute</a>
- Element[attribute~="value"]
概念
选择 attribute 属性包含单词"value"的元素，并设置其样式
例子
<style>
a[class~="two"] {
order:red;
}
</style>
<a class="two one" href="#">attribute</a>
<a class="twothree" href="#1">attribute</a>
- Element[attribute^="value"]
概念
设置 attribute 属性值以"value"开头的所有 Element 元素的样式
例子
<style>
a[href^="#"] {
order:red;
}
</style>
<a href="#">attribute</a>
<a href="#1">attribute</a>
<a href="#3">attribute</a>
<a href="#5">attribute</a>
- Element[attribute$="value"]
概念
设置 attribute 属性值以"value"结尾的所有 Element 元素的样式
例子
<style>
a[href$="#"] {
order:green;
}
</style>
<a href="#">attribute</a>
<a href="2#">attribute</a>
<a href="4#">attribute</a>
<a href="6#">attribute</a>
- Element[attribute*="value"]
概念
设置 attribute 属性值包含"value"的所有 Element 元素的样式
例子
<style>
a[href*="#"] {
order:blue;
}
</style>
<a href="#">attribute</a>
<a href="2#1">attribute</a>
<a href="4#3">attribute</a>
<a href="6#5">attribute</a>
- Element[attribute|="value"]
1：属性值为"value"
2：属性值以"value-"开头
概念
选择 attribute 属性值为"value"或以"value-"开头的元素，并设置其样式
例子
<style>
a[href|="#"] {
order:yellow;
}
</style>
<a href="#">attribute</a>
<a href="#-1">attribute</a>
<a href="#-3">attribute</a>
<a href="#-5">attribute</a>
