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

常用css选择器以及选择器的权重值介绍,第1张

常用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;}

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/587524.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-12
下一篇 2022-04-12

发表评论

登录后才能评论

评论列表(0条)

保存