CSS基础选择器
html
负责结构,CSS
负责样式,Js
负责行为。
标签选择器
用标签名当选择器
- 所有标签都能当选择器,例如
body
,h1
,dl
,ul
等 - 无论层级多深,都能选中
- 选择的是所有,而不是某一个标签,所以是共性,不是特性。
h1 {
color: blue;
}
ID选择器
#
表示id
#rc {
color: red;
}
- 任何的标签都可以有
id
,id
的命名要以字母开头,可以有数字、下划线。大小写严格区别,也就是说mm
和MM
是两个不同的id
。 - 同一个页面内·id·不能重复,即使不一样的标签,也不能是相同的
id
。也就是说,如果有一个p
的id
叫做haha
,这个页面内,其他所有的元素的id都不能叫做haha
(这点和Android
相似)。
类选择器
.
是类的符号,任何标签可以携带class
属性。
class
属性可以重复,例如
<h1 class="myclass">Hello</h1>
<h1 class="myclass">World</h1>
css里面用.
来表示类:
.myclass {
color: pink;
}
同一个标签,可能同时属于多个类,用空格隔开:
<h1 class="myclass myclass2">World</h1>
class
可以重复,也就是说,同一个页面上可能有多个标签同时属于某一个类;- 同一个标签可以同时携带多个类。
不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同造成这个标签的样式。每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用。
CSS高级选择器
后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.div p {
color: blue;
}
</style>
</head>
<body>
<div class="div">
<p>后代</p>
</div>
<p>不是后代</p>
</body>
</html>
空格表示后代,.div p
就是.div
的后代所有p
,注意选择的是后代,不一定是儿子 。比如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.div p {
color: blue;
}
</style>
</head>
<body>
<div class="div">
<ul>
<li><p>后代</p></li>
<li><p>后代</p></li>
<li><p>后代</p></li>
</ul>
</div>
<p>不是后代</p>
</body>
</html>
能够被下面的选择器选择上:
.div p {
color: blue;
}
可以看到这个选择器选择的后代,p
这里不是儿子,而是后代,后代选择器能选择包括儿子的后代。
空格可以多次出现
.div li p {
color: blue;
}
.div
里面的后代li
里面的p
。
后代选择器,就是一种平衡:共性、特性的平衡。当要把某一个部分的所有的什么,进行样式改变,就要想到后代选择器。
后代选择器,描述的是祖先结构。
交集选择器
h3.special {
color: blue;
}
选择的元素是同时满足两个条件:必须是h3标签,然后必须是.special
类的标签。
交集选择器没有空格。
所以h3.special
和h3 .special
不是一个意思。
交集选择器可以连续交(一般不要这么写)
h3.special.zhongyao{
color:red;
}
交集选择器,我们一般都是以标签名开头,比如div.haha
比如p.special
。
并集选择器(分组选择器)
h3,li{
color:red;
}
用逗号就表示并集。
通配符*
*
表示所有元素。
*{
color:red;3 }
效率不高,如果页面上的标签越多,效率越低,所以页面上不能出现这个选择器。
CSS3选择器
儿子选择器
IE7
开始兼容,IE6
不兼容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div > p {
background-color: blue;
}
</style>
</head>
<body>
<div>
<p>div儿子</p>
<ul>
<li><p>不是div儿子</p></li>
</ul>
</div>
</body>
</html>
序选择器
IE8
开始兼容;IE6、7
都不兼容
选择第1个li
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
<!--ul 的后代li 第一个元素-->
ul li:first-child {
background-color: blue;
}
</style>
</head>
<body>
<div>
<ul>
<li><p>第一个元素</p></li>
<li><p>第二个元素</p></li>
<li><p>第三个元素</p></li>
</ul>
</div>
</body>
</html>
选择最后一个1i
:
ul li:last-child {
background-color: blue;
}
下一个兄弟选择器
IE7
开始兼容,IE6
不兼容
+
表示选择下一个兄弟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
h3 + p {
background-color: blue;
}
</style>
</head>
<h3>标题</h3>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
<h3>标题</h3>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
<h3>标题</h3>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
<body>
</body>
</html>
选择上的是h3
元素后面紧挨着的第一个兄弟。
CSS的继承性和层叠性
有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性。
哪些属性能继承?
color
、 text-
开头的、line-
开头的、font-
开头的。
继承性
所以,如果我们的页面的文字,都是yellow
,都是16px。那么就可以利用继承性:
body{
color: yellow;
font-size: 16px;
}
继承性是从自己开始,直到最小的元素。
层叠性
选中标签
权重计算
当选择器,选择上了某个元素的时候,那么要这么统计权重:
id
的数量>类的数量>标签的数量
要分别计算id
的数量,类的数量,标签的数量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#box1 .hezi2 p {
color: red;
}
div div #box3 p {
color: green;
}
div.hezi1 div.hezi2 div.hezi3 p{
color: blue;
}
</style>
</head>
<div class="hezi1" id="box1">
<div class="hezi2" id="box2">
<div class="hezi3" id="box3">
<p>这字体是什么颜色?</p>
</div>
</div>
</div>
<body>
</body>
</html>
首先记住一点上面的三个选择器都选中了标签P
#box1 .hezi2 p {
color: red;
}
权重是:1,1,1(1个id
,一个类,一个标签)
div div #box3 p {
color: green;
}
权重:1,0,3(一个id
,0个类,3个标签)
div.hezi1 div.hezi2 div.hezi3 p{
color: blue;
}
权重:0,3,4(0个id
,3个类,4个标签)
因为第一个权重最大,所以P
标签的字体颜色是red
色。
不进位
/*权重0,0,3*/
div div div p {
color: red;
}
/*权重0,1,1*/
.hezi3 p {
color: blue;
}
没有进位的说法,所以P
标签的字体颜色是blue
色。
权重一样的情况
如果权重一样,那么以后出现的为准:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*权重1,1,1*/
.hezi2 #box3 p {
color: blue;
}
/*权重1,1,1*/
#box2 .hezi3 p {
color: yellow;
}
</style>
</head>
<div class="hezi1" id="box1">
<div class="hezi2" id="box2">
<div class="hezi3" id="box3">
<p>这字体是什么颜色?</p>
</div>
</div>
</div>
<body>
</body>
</html>
两个选择器都选择上了P
标签,所以接下来比较权重,因为两者权重一样(1,1,1),所以后出现的选择上,那么P
标签的颜色是yellow
。
如果把两个选择器调换
/*权重1,1,1*/
#box2 .hezi3 p {
color: yellow;
}
/*权重1,1,1*/
.hezi2 #box3 p {
color: blue;
}
那么是blue
色。
没有选中标签
如果不能直接选中某个元素,通过继承性影响的话,那么权重是0。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/* 权重0,0,3*/
div div p {
color: red;
}
/* 权重0*/
#box1 #box2 #box3 {
color: blue;
}
/* 权重0*/
.hezi1 .hezi2 .hezi3 {
color: yellow;
}
</style>
</head>
<div class="hezi1" id="box1">
<div class="hezi2" id="box2">
<div class="hezi3" id="box3">
<p>这字体是什么颜色?</p>
</div>
</div>
</div>
<body>
</body>
</html>
那么P
标签的颜色是red
。
如果权重都是0
那么使用就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*下面 两个选择器都没有选中,所以使用就近原则*/
/*描述的更加近,故颜色是蓝色*/
#box3 {
color: blue;
}
#box1 #box2 {
color: red;
}
</style>
</head>
<div class="hezi1" id="box1">
<div class="hezi2" id="box2">
<div class="hezi3" id="box3">
<p>这字体是什么颜色?</p>
</div>
</div>
</div>
<body>
</body>
</html>
权重总结
- 首先看选择器是否选中标签。
- 如果选中标签,那么计算权重(
id
>class
>标签数),谁大听谁的,如果权重一样,那么后写为准。 - 如果没选中,那么权重都是0,如果大家都是0,那么就使用就近原则。