加载中...
PAGE

CSS选择器有哪些?选择器的优先级如何排序?

Post on 2021-10-28 15 0

本文章转载于:https://www.cnblogs.com/AIonTheRoad/p/11283100.html

CSS选择器分类:

CSS的选择器分类可以分为三大类:id选择器,类选择器,标签选择器。

用法如下:

选择器 e.g. 说明
id选择器 #id #header 选择id="header"的所有元素
类选择器 .class .message 选择class="message"的所有元素
标签选择器 el div 选择所有的div元素

其中他们又可以以不同的方式进行组合,如下:

选择器 e.g. 说明
后代选择器 el el div p 选择div元素内部的所有p元素
子代选择器 el>el div>p 选择div元素的第一子代的所有p元素
相邻兄弟选择器 el+el .msg+p 选择与class为"msg"的元素同级且紧跟其后的第一个p元素
通用兄弟选择器 el~el .msg~p 选择class为"msg"的元素后面的所有p元素
群组选择器 el,el p, span, .blue,#box 选择所有的p元素、span元素、class为"blue"的元素以及id为"box"的元素
伪类选择器 :link,:visited, :hover, :active, :focus a:hover 选择鼠标指针位于a标签之上的链接
伪元素选择器 :before, :after p:before 在每个p元素内容之前插入内容
属性选择器 [attribute] [target] 选择带有target属性的所有元素
通用选择器 * * 选择所有的元素

优先级:!important > 内联样式 > id选择器 > 类、伪类、属性选择器 > 标签、伪元素选择器

权 重: !important:10000

内联: 1000

id选择器:100

类、伪类、属性选择器:10

标签、伪元素选择器:1

通用选择器(*)、子选择器(>)、相邻兄弟选择器(+)、通用兄弟选择器(~)权重值为0

mybatis case when 报错

mybatis case when 报错

阅读更多
mysql 根据日期进行查询数据,没有数据也要显示空

mysql 根据日期进行查询数据,没有数据也要显示空

阅读更多
js 10分钟学会隐式转换

js 10分钟学会隐式转换

阅读更多

暂无评论

    发表评论
    返回顶部
    X