CSS选择器

CSS选择器

CSS基础选择器

1. id选择器

<div id="only">123</div>

#only{
	background-color: red;
}

2. class选择器

<div class="demo1">456</div>
<div class="demo1 demo2">456</div>

.demo1{
	background-color: yellow;
}
.demo2{
	color: #f40;
}

3. 标签选择器

<span>789</span>
<div>
	<span>789</span>
</div>

span{
	font-weight: bold;
}

4. 通配符选择器

<!-- 选择所有的标签 -->

*{
	background-color: green;
}

5. 属性选择器

<div class="demo3">602</div>

[class="demo3"]{
	background-color: red;
}

CSS复杂选择器

1.父子选择器/派生选择器

/*间接也可*/
strong em{/*strong下的所有em*/
	background-color: red;
}
section div ul li a em{/*浏览器自右向左找*/
	background-color: yellow;
}

2.直接子元素选择器

div > strong{
	background-color: green;
}

3.并列选择器

div.demo{
	background-color: red;
}

4.分组选择器

em, 
strong, 
span{
	font-size: 25px;
}

CSS选择器权重

CSS选择器	CSS权重(256进制)
！important	Infinity
行间样式	1000
id	100
class/属性/伪类	10
标签/伪元素	1
通配符选择器	0

!important > 行间样式 > id > class|属性|伪类 > 标签|伪元素 > 通配符

CSS选择器权重计算

#idDiv p{/*100+1*/
	background-color: red;
}
.classDiv .classP{/*10+10*/
	background-color: green;
}
div .classP#idP{/*1+10+100*/
	background-color: yellow;
}