常用css选择器以及选择器的权重值介绍

常用css选择器以及选择器的权重值介绍

一.选择器的权重值

选择器权重值比较：

！important infinity   无穷大

行间样式                   1000

id                               100

class|属性选择器|伪类 10

标签选择器|伪元素      1

通配符                         0

二.css常用选择器

1.id选择器、class选择器、标签选择器、属性选择器、通配符选择器

2.父子选择器/派生选择器、直接子元素选择器、并列选择器、分组选择器、相邻兄弟选择器

下面是html、css代码演示与讲解：

id选择器：#属性值{}

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

#only{

background-color:red;

}

class选择器：.{}

<div class="demo1">234</div>

.demo1{

background:yellow;

}

.demo2{

color:#f40;

}

<!-- class与元素的关系是多对多的，所以同一元素上可以对应多个class(demo1,demo2),中间加上空格 -->

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

标签选择器（以span标签为例）：span{}

<span>456</span>

<div>

<span>567</span>

</div>

span{

color:aqua;

font-weigh:bolder;

}

<!-- 标签选择器能同时选择所有的标签，如选择所有的span标签,456,567同时变化,无论套了多少层标签都能被选出来 -->

通配符选择器：*{}

*{

background-color:green;

}<!-- 通配符选择器*，能选择所有的标签,意思是所有的标签都有的属性，表示所有的标签都遵循的统一样式。

-->

属性选择器：

属性选择器：[属性名="属性值"]

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

[id="only"]{

background-color:red;

}

属性选择器可以写属性值如only，也可以不写,属性选择器的属性可以不是标签。

1.  父子选择器/派生选择器：标签1+空格+标签2

<span>456</span>

<div>

<span>567</span>

</div>

要求只使用span选择器让567变红，

div (空格)span{

background-color:red;

}

<div >

<span >

<em>

145

</em>

</span>

</div>

div span em{

background-color:red;

}

2.  直接子元素选择器:标签1>标签2

使123为红色

<div >

<em>123</em>

<span >

<em>

145

</em>

</span>

</div>

div > em{

background-color:red;}

3.  并列选择器：标签1+.+标签2

并列选择器:多个限定条件限制一个元素，并且不加空格，标签选择器需要放在其他选择器的前面，id选择器不用，位置随意

<div>1</div>

<div class="demo1">2</div>

<p class="demo2">3</p>

使2变成红色

div.demo1{

background-color:red;

}

4.  分组选择器：标签1，标签2，标签3，....5

分组选择器：

<div>1</div>

<span>2</span>

<em>3</em>

要求：123背景颜色均变成红色

方案一：

div{

background-color:red;

height:10px;

width:10px;

}

span{

background-color:red;

height:20px;

width:25ppx;

}

em{

background-color:red;

width:15px;

}

分组选择器：

div,span,em{

background-color:red;

}

div{

height:10px;

width:10px;

}

span{

height:20px;

width:25ppx;

}

em{

width:15px;

5.相邻兄弟选择器：标签1+标签2

相邻兄弟选择器,同一父级下的二个兄弟， 相邻兄弟选择器使用了加号（+）

h1+h2{color: pink;}