css选择器
举报
搞前端的半夏
发表于 2021/10/24 22:13:15
2021/10/24
【摘要】 选择器的类型基本选择器组合选择器属性选择器伪类选择器伪元素选择器 1. 基本选择器选择器含义作用.class类选择器选择class包含特定类的元素.#idid选择器选择包含特定id的元素*通用元素选择器选择页面中所有的元素E元素选择器选择指定类型的HTML元素（如p,img）select1 ,select2群组选择器将具有相同属性的元素合并 2. 层次选择器选择器含义作用E F后代选择器（...
选择器的类型
- 基本选择器
- 组合选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
1. 基本选择器
| 选择器 |
含义 |
作用 |
| .class |
类选择器 |
选择class包含特定类的元素 |
| .#id |
id选择器 |
选择包含特定id的元素 |
| * |
通用元素选择器 |
选择页面中所有的元素 |
| E |
元素选择器 |
选择指定类型的HTML元素（如p,img） |
| select1 ,select2 |
群组选择器 |
将具有相同属性的元素合并 |
2. 层次选择器
| 选择器 |
含义 |
作用 |
| E F |
后代选择器（包含选择器） |
选择E标签下的所有F元素 |
| E>f |
子选择器 |
仅选择E标签下的儿子级别的元素 |
| E+F |
相邻兄弟选择器 |
选择与E元素同级别的第一个F元素 |
| E~F |
普通相邻选择器 |
选择与E元素同级别的所有F元素 |
3. 伪类选择器
3.1. 动态伪类选择器
| 选择器 |
含义 |
作用 |
| E:link |
链接伪类选择器 |
选择匹配的E元素，E被定义了超链接且并未访问过。常用与链接锚点 |
| E:visited |
链接伪类选择器 |
选择匹配的E元素，E被定义了超链接且已被访问。常用与链接锚点 |
| E: active |
用户行为伪类选择器 |
选择匹配的E元素，且匹配元素已被激活。常用与锚点与按钮上 |
| E:hover |
用户行为伪类选择器 |
选择匹配的E元素，且用户鼠标停留在E元素上 |
| E:hover |
用户行为伪类选择器 |
选择匹配的E元素，且匹配的元素获得焦点 |
3.2. 目标伪类选择器
| 选择器 |
含义 |
作用 |
| E:target |
选择匹配E的所有元素，且匹配元素指向被相关的URL指向 |
|
3.3. UI元素状态伪类选择器–主要与表单相关
| 选择器 |
示例 |
作用 |
| :disable |
input:disable |
选择所有禁用的表单元素 |
| :enable |
input:disable |
选择没有设置disable属性的表单元素 |
| :in-range |
input:in-range |
选择指定区域内的元素 |
| :out-of-range |
input:out-of-range |
选择不再指定区域内的元素 |
| :valid |
input:valid |
选择条件验证正确的表单元素 |
| :invaild |
input:invalid |
选择条件验证错误的表单元素 |
| :required |
input:required |
选择设置 required 属性的表单元素 |
| :checked |
input:checked |
匹配被选中的 input 元素，input 元素包括 radio 和 checkbox |
| :read-only |
input:read-only |
选择设置 readonly 只读属性的元素 |
3.4. 语言伪类选择器
| 选择器 |
含义 |
作用 |
| :lang(language) |
匹配设置了特定语言的元素。 |
设置特定语言可以通过为了 HTML 元素设置 lang=”” 属性，设置 meta 元素的 charset=”” 属性，或者是在 http 头部上设置语言属性。实际上，lang=”” 属性不只可以在 html 标签上设置，也可以在其他的元素上设置。 |
|
|
|
|
|
|
|
|
|
3.5. 结构化类选择器
| 选择器 |
示例 |
作用 |
| E:root |
选择匹配E元素所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型的选择器匹配的内容相同 |
|
| :first - child |
p:first-child |
选择p元素的第一个子元素 |
| :first-of-type |
p:first-of-type |
选择每个父元素是p元素的第一个p子元素 |
| :last-child |
p:last-child |
选择所有p元素的最后一个子元素 |
| :last-of-type |
p:last-of-type |
选择每个p元素是其母元素的最后一个p元素 |
| :not(selector) |
:not§ |
选择所有p以外的元素 |
| :nth-child(n) |
p:nth-child(2) |
选择所有p元素的第二个子元素 |
| :nth-last-child(n) |
p:nth-last-child(2) |
选择所有p元素倒数的第二个子元素 |
| :nth-last-of-type(n) |
p:nth-last-of-type(2) |
选择所有p元素倒数的第二个为p的子元素 |
| :nth-of-type(n) |
p:nth-of-type(2) |
选择所有p元素第二个为p的子元素 |
| :only-of-type |
p:only-of-type |
选择所有仅有一个子元素为p的元素 |
| :only-child |
p:only-child |
选择所有仅有一个子元素的p元素 |
| :target |
#news:target |
选择当前活动#news元素(点击URL包含锚的名字) |
4. 伪元素选择器
4.1. 单双冒号
| 选择器 |
作用 |
说明 |
| ::before/:before |
在被选元素前插入内容。 |
需要使用 content 属性来指定要插入的内容。被插入的内容实际上不在文档树中。 |
| ::after/:after |
在选被元素后插入内容 |
其用法和特性与:before相似。 |
| ::first-letter/:first-letter |
匹配元素中文本的首字母。 |
被修饰的首字母不在文档树中。 |
| ::first-line/:first-line |
匹配元素中第一行的文本。 |
这个伪元素只能用在块元素中，不能用 |
4.2. 仅双冒号
| 选择器 |
作用 |
说明 |
| ::selection |
匹配被用户选中或者处于高亮状态的部分。 |
在火狐浏览器使用时需要添加 -moz 前缀。 |
| ::placeholder |
匹配占位符的文本。 |
只有元素设置了 placeholder 属性时，该伪元素才能生效。该伪元素不是 CSS 的标准，它的实现可能在将来会有所改变， |
| ::backdrop |
用于改变全屏模式下的背景颜色。 |
全屏模式的默认颜色为黑色。(试验阶段) |
5. 属性选择器
| 选择器 |
含义 |
作用 |
| E[attribute] |
[target] 选择所有带有target属性元素 |
|
| E[attribute=value] |
[target=-blank] |
选择所有使用target="-blank"的E元素 |
| E[attribute~=value] |
[title~=flower] |
选择标题属性包含单词"flower"的所有E元素 |
| E[attribute ^= language] |
[lang ^= en] |
选择一个lang属性的起始值="EN"的所有E元素 |
| E[attribute $= language] |
[lang $= en] |
选择一个lang属性的结尾值="EN"的所有E元素 |
| E[attribute *= language] |
[lang *= en] |
选择一个lang属性的包含"EN"的所有E元素 |
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
评论（0）