三大特性

继承性：子标签继承父标签样式，默认优先级最低。

有继承性：文本相关字体样式、粗细、大小、颜色、类型等

无继承性：盒子模型相关边框、背景等

层叠性：相同标签继承和定义的样式累加到一起互不冲突。

优先级：离标签越近的选择器优先级越高，所以相同权重的样式后者才生效；内联样式表>头部样式表>导入样式表。

权重

权重为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>

css3选择器总结

三大特性

权重

综合实例

猜你喜欢