一、css选择器及权重

发表于 | 分类于


1.ID选择器(一对一)

1
2
3
4
5
<div id="only">123</div>

#only{
	background-color: red;
}

2. class选择器(多对多):关注多个样式修饰一个div，也就是一个人可以穿多件衣服

1
2
3
4
5
6
7
8
9
<div class="demo demo1">123</div>
<div class="demo">234</div>

.demo{
	background-color: red;
}
.demo1{
	color:#f40;
}

###3. 标签选择器:想选择某个元素设置样式时，只要写对应的标签再设置样式即可。

1
2
3
4
5
6
<div>123</div>
<div>234</div>

div{
	color:#f40;
}

注意：上面写法会对引入网页的所有的div标签生效

1
2
3
4
5
6
7
8
9
<span>123</span>
<div>
	<span>234</span>
</div>

span{
	color:#f40;
}
注意：不管标签嵌套多少层，都会生效： 中国所有的男人，那么在屋子里的也算

###4. 通配符选择器:

1
2
3
4
5
6
7
8
9
10
<span>123</span>
<div>234</div>
<strong>111</strong>

*{
	color: #f40;
}
整个文档所有标签全部生效

###5. 属性选择器:

123

234

[id]{
color: #f40;
}
123和234都显示为红色。因为这两个标签都有属性名id

如果我这么写：
[class]{
color: #f40;
}
那么只有123变为红色。因为只有123的标签含有属性名 class
属性选择器还可以进一步：将属性值也写进去：
[id=”demo1”]{
color: #f40;
}
此时只有123颜色变红

1
2

###6. !important

123

div{
background-color:green
}
不用问肯定显示红色，因为行间选择器优先级很高，比id选择器优先级都高。更别谈现在是属性选择器了。但我要这么改：
div{
background-color:green!important
}
会发现显示的是绿色

1
2


问题1：ID选择器与class选择器优先级比较： 下面文本显示红色还是绿色？：也就是 你妈和你媳妇的话 听谁的

1
2
3
4
5
6
7
8
<div id="only" class="demo">123</div>
#only{
	color: red;
}
.demo{
	color: green;
}
答案：红色： ID选择器优先级高于class选择器： 身份证丢了痛苦还是上衣脱了痛苦

问题2： class选择器与标签选择器优先级比较：下面这段代码显示红色还是绿色？

1
2
3
4
5
6
7
8
<div class="demo">123</div>
.demo{
	color: red;
}
div{
	color: green;
}
答案：红色： class选择器优先级高于标签选择器

问题3：行间选择器与id选择器哪个优先级高： 下面代码显示黄色还是红色?

1
2
3
4
5
6
7
8
<div id="only" style="background-color:yellow">123</div>

#only{
	background-color:red
}
答案：黄色，也就是行间样式优先级高于id选择器：二者都是一一对应。打个比方。id选择器好比身份证。而行间选择器直接作用到人身上了，好比纹身。肯定纹身优先级比身份证高了哈。

问题4： class选择器与属性选择器哪个优先级高：

123

.demo{
color: red;
}
[class=”demo”]{
color: black;
}
显示的是黑色。 但是我要交换下顺序：
[class=”demo”]{
color: black;
}
.demo{
color: red;
}
会发现显示的是红色
答案： class选择器与属性选择器优先级是一样的。后面的会覆盖前面的
1
2
3
4
5
6
7
8
9
10
11
12
13
14

CSS权重： 
!important				Infinity 即：正无穷
行间样式：				1000
id选择器：				100
class|属性|伪类选择器	10
标签|伪元素选择器		1
通配符选择器			0
注意：以上是256进制。也就是0到1得要经过255才到1
根据权重就可知各选择器间的优先级：
!important > 行间样式 > id选择器 > class选择器 | 属性选择器 > 标签选择器 > 通配符选择器
权重真正作用是用来比较复杂选择器的优先级。

###7. 父子选择器/派生选择器：



123

234
要求：只可以用标签选择器，将123的背景色设置为红色，css代码要怎么写？
div span{
background-color:red;
}
将div下的span标签的背景色设为红色。这就叫父子选择器也叫派生选择器：设置的只是span也就是孩子。前面的元素只是限制条件
1
父子选择器前面的限制条件可以有多个：




234

div strong em{
background-color:red;
}

父子选择器前面的限制条件可没有规定必须得是标签：
.wrapper .box em{
background-color:red;
}

1
2
3
</br>
</br>
有下面代码：


1

2

div em{
background-color:red;
}
哪个会变红色？1还是2还是都变红?
答案：都变红。 这个意思是：div下的所有em标签。如果只想2变为红色.写法如下:
div strong em{
background-color:red;
}

1
2
3

</br>
###8. 直接子元素选择器


1

2


div > em{
background-color:red;
}
意思是div下的直接的子元素也就是儿子em。这样的话只有1会变红
`

###8. 伪类选择器：
www.baidu.com /想要让鼠标移动到该标签上时，字体颜色变红/
a:hover{
background-color: orange;
}
这样写也行：
[href]:hover{
background-color: orange;
}
也就是说冒号前面的不管是id选择器，class选择器，标签选择器，属性选择器等等。只要能选中元素就都可以。

再来个hover效果
www.baidu.com
www.taobao.com
www.jd.com
a{
text-decoration:none; /没有下划线/
}
a:hover{
text-decoration: underline:
border-radius:10px;
background-color: #f40;
color:#fff; /字体颜色/
font-weight:bold;
font-family:arial; /字体/
}

标签总结：
行级元素，也叫内联元素 display: inline
feature: 内容决定元素所占位置 不可以通过css改变宽高 span strong em a del

块级元素 display: block
feature: 独占一行，可以通过css改变宽高: div p ul li ol form address

行级块元素 display: inline-block
feature: 内容决定大小，可以改变宽高 img

凡是带有inline的元素都有文字特性：有文字特性就意味着会被分割，就是会有间距：默认是4px