1. 选择器类型
1.1 基本选择器
标签选择器 Type selectors
全部选择器 (The universal selector)
* {
color: red
}
# 组合选择器
h1, h2 {
background: white
}
类选择器 Class selectors
类选择器是为一类状态声明样式规则
.text-center {
text-align: center;
}
<h1 class="text-center">head</h1>
将类选择器指定为具体标签
span.help-block {
font-size: 12px;
}
<span class="help-block">span</span>
元素可以有多个类
.notebox {
border: 4px solid #666;
}
.danger {
font-weight: bold;
}
<div class="notebox danger">
This note shows danger!
</div>
ID选择器
为有 id 属性的元素设置样式
#container {
background: red;
}
<h1 id="container">houdunren.com</h1>
文档中ID应该是唯一的，虽然为多个元素设置同一个ID也可以产生样式效果，但这是不符合规范的。
建议优先使用类选择器
1.2 结构选择器
| 选择器 | 示例 | 解释 |
|---|---|---|
| 后代选择器 | article,h2 | 元素后的元素（不只是子元素，是后代元素） |
| 子元素选择 | article>h2 | 子元素，不包括孙级及以下元素 |
| 紧邻兄弟元素 | article+h2 | 紧挨着的同级兄弟元素 |
| 后面兄弟元素 | article~*(h1) | 选择<article>元素之后的所有(<h1>)元素 |
<article>
<h2 >a</h2>
<aside>
<h2>b</h2>
</aside>
</article>
<h2 >c</h2>
<h1>d</h1>
1.3 属性选择器 Attribute selector
| 选择器 | 示例 | 描述 |
|---|---|---|
| [attribute] | [target] | 选择带有 target 属性所有元素 |
| [attribute=value] | [target=_blank] | 选择 title 属性包含单词 "flower" 的所有元素 |
| [attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素 |
| [attribute|=value] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 |
| [attribute*=value] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 元素 |
| [attribute^=value] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 元素 |
| [attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 元素 |
如果希望可以不用区分大小写：
li[class^="a" i] {
color: red;
}
<ul>
<li class="a">Item 1</li>
<li class="A">Item 2</li>
</ul>
1.4 伪类选择器
伪类是选择器，用于选择处于特定状态（例如状态）的元素。
详见
参考：MDN
houdunren.com
