手册目录
CSS教程手册
CSS高级
CSS基础教程
CSS中级教程
CSS3高级教程
CSS响应式设计
CSS实例
CSS 选择器用于“查找”(或选择)您想要设置样式的 HTML 元素。
使用我们的 CSS 选择器测试器来演示不同的选择器。
简单选择器根据元素名称、id 和类选择元素。此外,还有通用选择器(*)。
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| element | p | 选择所有 <p> 元素。 |
| #id | #firstname | 选择 id="firstname" 的元素。 |
| * | * | 选择所有元素。 |
| .class | .intro | 选择 class="intro" 的所有元素。 |
属性选择器选择具有给定属性集的 HTML 元素。
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| [attribute] | [target] | 选择带有 target 属性的所有元素。 |
| [attribute=value] | [target=_blank] | 选择带有 target="_blank" 属性的所有元素。 |
| [attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 |
| [attribute|=value] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 |
| [attribute^=value] | a[href^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 |
| [attribute$=value] | a[href$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 |
| [attribute*=value] | a[href*="w3school"] | 选择其 href 属性值中包含 "abc" 子串的每个 <a> 元素。 |
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| & | & | 在另一个元素的上下文中为元素应用样式 |
相关视频
科技资讯
24小时阅读榜
1
2
3
4
5
6
7
8
9
10
精品课程
共5课时 | 17.4万人学习
共49课时 | 78.2万人学习
共29课时 | 62.5万人学习
共25课时 | 39.7万人学习
共43课时 | 73.8万人学习