id 和 class
是元素最基本的两个属性,一般情况下,id 和 class
都是用来选择元素,进而进行CSS
操作或JavaScript
操作。
id属性
具有唯一性,也就是说一个页面中相同的id
只能出现一次。 若出现多个相同id
,那么CSS
或JavaScript
会无法识别,这个id
对应的是哪个元素。
class,类。思想和别的编程语言相似。 我们可以通过为同一个页面的相同元素或不同元素设置相同的
class
,然后使得具有相同class
得元素具有相同的样式。
因为
id属性
具有唯一性,所以它其实和我们的身份证号码一样,全国唯一。 而class
不具唯一性,它就和我们的名字一样,全国有的人名字就是一模一样的。
选择器,就是用一种方式把我们想要的那个元素选中。只有把它选中,我们才可以为这个元素添加
CSS样式
。 在CSS
中,有很多方式可以把我们想要的元素选中,这些不同的方式其实就是不同的选择器。选择器的不同,在于选择方式不同,但是它们的最终目的是一样的,那就是把想要的元素选中,然后才可以定义该元素CSS样式
。 我们也可以用一种选择器来代替另一种选择器,这仅仅是选择器不同而已,但目的都是一样的。
CSS选择器
非常多,以下是最常用的 5 种选择器:
可千万不要小看它们,这 5 种选择器使用频率占所有选择器的 80%
以上。
选择器{
属性1 : 取值1;
...
属性n : 取值n;
}
元素选择器,就是选中指定的相同的所有元素,然后给相同的元素定义同一个
CSS样式
。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title></title>
<style type="text/css">
div{ /*元素选择器,选择所有的div标签*/
color:#00FFFF;
}
</style>
</head>
<body>
<div>見贤思齊</div>
<span>見贤思齊</span>
<p>見贤思齊</p>
<strong>見贤思齊</strong>
<em>見贤思齊</em>
<div>見贤思齊</div>
</body>
</html>
元素选择器示例1.png
其实,id 选择器就像是我们的身份证号码一样,在同一个页面中,不允许出现 2 个相同的
id
。 我们可以为元素设置一个id属性
,然后针对设置了这个id
的元素定义CSS样式
,这就是id 选择器
。
对于
id 选择器
,id
名前必须加上前缀#
。 不加的话,id 选择器
无法生效,只有加上前缀#
,才表示这是一个id 选择器
。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title></title>
<style type="text/css">
#hope{ /*id选择器*/
color:#00FFFF;
}
</style>
</head>
<body>
<div>見贤思齊</div>
<span>見贤思齊</span>
<p>見贤思齊</p>
<strong id="hope">見贤思齊</strong>
<em>見贤思齊</em>
<div>見贤思齊</div>
</body>
</html>
id选择器示例1.png
class 选择器,即类选择器,就是可以对相同的元素 或 不同的元素定义相同的
class属性
,然后针对拥有同一个class属性
的元素进行CSS样式
操作。
对于
class 选择器
,class名前必须要加上前缀 .(注意:一定是英文的点)。 否则class 选择器
无法生效,只有加上前缀.
,才表示这是一个class 选择器
。
要为两个及以上元素定义相同的样式,建议使用
class 选择器
,因为可以减少大量重复代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>CSS选择器</title>
<style type="text/css">
.dream{ /*class选择器*/
color:#00FFFF;
}
</style>
</head>
<body>
<div>見贤思齊</div>
<span class="dream">見贤思齊</span>
<p>見贤思齊</p>
<strong class="dream">見贤思齊</strong>
<em>見贤思齊</em>
<div class="dream">見贤思齊</div>
</body>
</html>
class选择器示例1.png
后代选择器,就是选择元素内部中所有的某一种元素,包括子元素和其它后代元素。
父元素和后代元素必须用空格隔开,从而表示选中某个元素内部的后代元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>CSS选择器</title>
<style type="text/css">
/*后代选择器*/
#first div{
color:#00FFFF;
}
#second p{
color:#66A9FE;
}
</style>
</head>
<body>
<div id="first">
<span>見贤思齊</span>
<div>見贤思齊</div>
</div>
<div id="second">
<p>見贤思齊</p>
<span>見贤思齊</span>
<p>見贤思齊</p>
</div>
</body>
</html>
<!--
#first div,表示选中id为first元素下的所有div元素。
#second p,表示选中id为second元素下的所有p元素。
-->
后代选择器示例1.png
群组选择器,就是同时对几个选择器进行相同的操作。
对于群组选择器,每个选择器之间必须用英文逗号“ , ”隔开。 如若不这么做,群组选择器无法生效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>CSS选择器</title>
<style type="text/css">
/*群组选择器*/
h3,#first div,p{
color:#00FFFF;
}
</style>
</head>
<body>
<h3>見贤思齊</h3>
<div id="first">
<span>見贤思齊</span>
<div>見贤思齊</div>
</div>
<p>見贤思齊</p>
<span>見贤思齊</span>
</body>
</html>
<!--
通过元素选择器,选择了所有 h3、p标签,
通过后代选择器,选择了id为first下的div标签。
另外,若再加上span标签,所有span标签都会被选中,此处未写上。
-->
群组选择器示例1.png