css选择器及优先级

哆啦咪唏

已于 2022-02-26 12:42:13 修改

阅读量576

点赞数 2

文章标签： css 伪类选择器伪元素选择器 css选择器及优先级

于 2022-02-26 12:39:46 首次发布

本文链接：https://blog.csdn.net/weixin_42123213/article/details/123148213

版权

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	在选择器后增加内容

哆啦咪唏

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
css选择器及优先级

css常见选择器及优先级选择器名称选择器符号选择器优先级行内样式style={}1000id选择器#id100类选择器.className10属性选择器a[ref=‘atrName’]10伪类选择器:hover10标签选择器p1伪元素选择器::after1兄弟选择器+0子选择器>0后代选择器div p0通配符*0css优先级规则：1、css选择规则的权重值不同时，权重
复制链接

扫一扫