Web基础04 CSS优先级和选择器

CSS优先级
在CSS中 继承的权重为0
子类定义的比父类优先
权重相加判断优先级
标签的权重为1<类的权重为10 规则
①行内样式优先,远大于100
②权重相同时,CSS遵循就近原则,最后的样式优先级数大
如 header{
color:blue!important;
}
!important放在属性值和分好之间,使优先级最大,复合选择器无论有多少个标签选择器权重也不会大于类选择器,复合选择器无论有多少个标签选择器和类选择器权重也不会大于id选择器

1、属性选择器 根据标签的属性及属性值来选择
例如 E[id=“header”]{font-size:80px;}
E是标签 header是属性选择器 font-size是声明
E[att^=value] att中以value开头的
E[att$=value] att中以value结尾的
E[att*=value] att中包含value的
2、关系选择器
子代选择器 h1>strong 选择嵌套在h1的标签strong
临近兄弟选择器 h2+p 选择h2后背临的一个兄弟标签p
普通元素选择器 p~h2 选择p标签所有的h2兄弟标签

3、结构化伪类选择器
可减少class与id定义
:root
:not 例如body *:not(h2) 选择body中排出h2的标签
:only-child li:only-child 选某问标签仅有唯一字标签的类
:first-child 选择父元素第一个子标签
:last-child 选择父元素最后一个子标签
:nth-child(n) 选择父元素第n子标签
:nth-last-child(n) 选择父元素倒数第n个子标签
:nth-of-type(n) 例如h2:nth-of-type(dd) 选择奇数行的h2
:nth-last-of-type(n) 倒数第N个type
:empty 选择没有标签或文本的所有标签

4、伪元素选择器
E:before{content:文字/url();}
:before 例如p:before 在p之前插入内容
:after 例如p:after 在p之后插入内容

你可能感兴趣的