css常见选择器及优先级
选择器名称 | 选择器符号 | 选择器优先级 |
---|---|---|
行内样式 | style={} | 1000 |
id选择器 | #id | 100 |
类选择器 | .className | 10 |
属性选择器 | a[ref=‘atrName’] | 10 |
伪类选择器 | :hover | 10 |
标签选择器 | p | 1 |
伪元素选择器 | ::after | 1 |
兄弟选择器 | + | 0 |
子选择器 | > | 0 |
后代选择器 | div p | 0 |
通配符 | * | 0 |
css优先级规则:
1、css选择规则的权重值不同时,权重值高的优先;
2、css选择规则的权重值相同时,后定义的规则优先;
3、css属性后面加 !important 时,无条件绝对优先;
伪类选择器和伪元素选择器
伪类选择器
-
定义:伪类选择器用于向某些选择器添加特殊的效果。用伪类定义的样式并不是作用在标记上,而是作用在标记的状态上,如a标签的:hover,表单元素的:disabled
-
分类:
- anchor伪类
- 目标伪类选择器
- 表单元素伪类选择器
- 结构伪类选择器
- 否定伪类选择器
2.1. anchor伪类
一般是设置a标签的四种状态,顺序为link、visited、hover、active。
a标签的href属性的值可以指向链接地址、标签的id,或者a标签的name选择器 符号表示 解释说明 :link a:link 未访问的链接状态 :hover a:hover 鼠标悬停的链接状态 :active a:active 正在选中的链接状态 :visited a:visited 已经选中后的链接状态 2.2 目标伪类选择器
:target 超链接后目标样式,当使用超链接后,链接的目标可以用目标选择器设置,目标只有被跳转后才会显示对应的样式。此处有一个小案例
<style> a,a:link{ color:red; } a:visited{ color:yellow; } a:hover{ color:green; } a:active{ color:blue; } div:target{ color:antiquewhite } </style> </head> <body> <a href="http://wwww.baiduzhidao.com">去百度</a> <a href="#test">去猫店</a> <div id="test">a标签的锚点属性</div> </body>
2.3 表单元素伪类选择器
选择器 示例 示例说明 :focus input:focus 选择元素输入后具有焦点 :enabled input:enabled 匹配每个已启用的元素 :disabled input:disabled 匹配每个被禁用的元素 :checked input:checked 匹配每个已被选中的 input 元素 :required input:required 选择有"required"属性指定的元素属性 :optional input:optional 选择没有"required"的元素属性 :read-only input:read-only 选择只读属性的元素属性 :read-write input:read-write 选择没有只读属性的元素属性 :valid input:valid 选择所有有效值的属性 :invalid input:invalid 在表单元素中的值是非法时设置指定样式 :in-range input:in-range 用于标签的值在指定区间值时显示的样式 :out-of-range input:out-of-range 选择指定范围以外的值的元素属性 2.4 结构伪类选择器
选择器 示例 示例说明 :first-child p:first-child 匹配属于任意元素的第一个子元素的p元素 :first-of-type p:first-of-type 选择父元素中的第一个 p 元素 :last-child p:last-child 选择所有p元素的最后一个子元素 :last-of-type p:last-of-type 选择父元素中最后一个p元素 :empty p:empty 匹配没有子元素(包括文本节点)的p元素 :nth-child(n) p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素 :nth-of-type(n) p:nth-of-type(2) 选择所有p元素第二个为p的子元素 :nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素 :nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素 :only-child p:only-child 选择所有仅有一个子元素,并且子元素是p元素 :only-of-type p:only-of-type 选择所有仅有一个子元素中为p的元素 2.5 否定伪类选择器
选择器 示例 示例说明 :not(selector) :not§ 选择所有p以外的元素
伪元素选择器
伪元素在DOM树中创建了一些抽象元素,这些抽象元素是不存在于文档语言里的(可以理解为html源码)。比如:documen接口不提供访问元素内容的第一个字或者第一行的机制,而伪元素可以使开发者可以提取到这些信息。并且,一些伪元素可以使开发者获取到不存在于源文档中的内容。伪元素的由两个冒号::开头,然后是伪元素的名称。
选择器 | 示例 | 示例说明 |
---|---|---|
::first-letter | p::first-letter | 选择器的首字母 |
::first-line | p::first-line | 选择器的首行 |
::selection | p::selection | 被用户选取的部分 |
::before | p::before | 在选择器前增加内容 |
::after | p::after | 在选择器后增加内容 |