css3选择器总结[通俗易懂]
大家好，又见面了，我是你们的朋友全栈君。
三大特性
继承性：子标签继承父标签样式，默认优先级最低。
有继承性：文本相关字体样式、粗细、大小、颜色、类型等
无继承性：盒子模型相关边框、背景等
层叠性：相同标签继承和定义的样式累加到一起互不冲突。
优先级：离标签越近的选择器优先级越高，所以相同权重的样式后者才生效；内联样式表>头部样式表>导入样式表。
权重
权重为0000：
通用选择器* {}
组选择器h1, h2, p, em, img {}
后代选择器h1 em{}
子代选择器table>tbody>tr{}
分类选择器div.top,header.main{}
+相邻兄弟选择器: div.s+p{} 只能选择后面的
~通用兄弟选择器： div.s~p{} 只能选择后面的
权重为0001：
标签选择器h3 em {}
:first-letter每段首字符(css2不兼容，css3兼容)
:first-line每行首字符
当:first-letter和:first-line矛盾时优先:first-letter
:before
:after
:content
::selection用户在页面中选中部分(只能改颜色和背景颜色)
权重0010：
类(class)选择器 .special {}
伪类选择器： :link :visited :hover :active :focus
元素状态伪类: :enabled :disabled :checked :focus
属性选择器：[属性] 元素[属性][属性] 元素[属性=“value”]
p=[class^=”value”] p=[class*=”value”] p=[class$=”value”]
元素[class~=”value”]匹配class=”c1 c2 c3 c4”众多值中某一个
目标伪类：img:target{}匹配id或name的value，写在跳转目标的标签后
:target{} <a href=”#hehe”>点此<a> <a name=”hehe”>跳此</a> <img id=”hehe”>跳此</img>
结构伪类:（父元素下的子元素中，必须先选中父元素）
:first-child :last-child :nth-child(n)
:nth-child(even|2n)选择偶数子元素 :nth-child(odd|2n-1)//奇数
:empty 空格换行不算空,匹配同级元素中一个子元素都没有的元素
:only-child匹配同级元素中只有一个子元素的元素
否定伪类：:not()
权重0100：
ID选择器 #banner
权重1000：
!important p{color:blue !important;}
综合实例
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style>
#blogs.blogs>#blog.blog>p{color:yellow;}/*权重：100+10+100+10+1*/
span{color:blue !important;}/*权重：1+1000*/
#blogs span{color:green;}/*权重：100+1*/
.blogs h1{background-color:blue;}/*权重：10+1*/
.blogs .blog h1{background-color:yellow;}/*权重：10+10+1*/
h1{background-color:gray;}/*权重：1*/
</style>
</head>
<body>
<div id="blogs" class="blogs">
<div id="blog" class="blog">
<!-- 权重：内联最高 -->
<h1 style="background-color:gray;">第一篇博客</h1>
<p><span>this</span> is my first blog.</p>
</div>
</div>
</body>
</html>发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/157449.html原文链接：https://javaforall.cn
腾讯云开发者
