| 选择器 |
示例 |
示例说明 |
CSS版本 |
| .class |
.main |
选择所有class="main"的元素 |
1 |
| #id |
#content |
选择所有id="content"的元素 |
1 |
| * |
* |
选择所有元素 |
2 |
| element |
p |
选择所有 <p> 元素 |
1 |
| element,element |
div,p |
选择所有 <div>元素和 <p> 元素 |
1 |
| element element |
div p |
选择 <div> 元素内的所有 <p> 元素 |
1 |
| element>element |
div>p |
选择所有父级是 <div> 元素的 <p> 元素 |
2 |
| element+element |
div+p |
选择所有紧接着 <div> 元素之后的 <p> 元素 |
2 |
| [attribute] |
[title] |
选择所有带有 title 属性元素 |
2 |
| [attribute=value] |
[type="text"] |
选择所有使用 type="text" 的元素 |
2 |
| [attribute~=value] |
[title~=flower] |
选择标题属性包含单词"flower"的所有元素 |
2 |
| [attribute|=language] |
[title|=en] |
选择 title 属性以 en 为开头的所有元素 |
2 |
| :link |
a:link |
选择所有未访问链接 |
1 |
| :visited |
a:visited |
选择所有访问过的链接 |
1 |
| :active |
a:active |
选择活动链接 |
1 |
| :hover |
a:hover |
选择鼠标在链接上面时 |
1 |
| :focus |
input:focus |
选择具有焦点的输入元素 |
2 |
| :first-letter |
p:first-letter |
选择每一个 <p> 元素的第一个字母 |
1 |
| :first-line |
p:first-line |
选择每一个 <p> 元素的第一行 |
1 |
| :first-child |
p:first-child |
指定只有当 <p> 元素是其父级的第一个子级的样式 |
2 |
| :before |
div:before |
在每个 <div> 元素之前插入内容 |
2 |
| :after |
div:after |
在每个 <div> 元素之后插入内容 |
2 |
| :lang(language) |
p:lang(it) |
选择一个lang属性的起始值="it"的所有 <p> 元素 |
2 |
