什么是CSS选择器
- 在开发网页时，当需要使用CSS对某些元素进行样式操作时，我们需要首先选中该元素，而选择器就是用来选中该元素的。
CSS的5种选择器
- 元素选择器
- id选择器
- class选择器
- 后代选择器
- 群组选择器
元素选择器
- 元素选择器就是通过选中某个元素来进行操作，如选中元素div，那么页面中所有div元素都会被选中，进而改变样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
div{color:blue;} ##把所有div元素的文本定义为蓝色。
</style>
</head>
<body>
<h1>aaaaa</h1>
<div>aaaaa</div>
<p>aaaaa</p>
</body>
</html>
id选择器
- 由于在一个页面中，一个id只能出现一次，所以一个id选择器只能选中一个元素。
- 在使用id选择器时，需要在id前加上#。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
#div_1{color:blue;} ##一定要在id前加上#
</style>
</head>
<body>
<div id="div_1">有id的元素</div>
<h1>无id的元素</h1>
<div>无id的元素</div>
<p>无id的元素</p>
</body>
</html>
class选择器
- 由于一个页面中允许多个元素共享一个class，因此一个class选择器可以同时操作多个元素的样式，如果需要对多个元素设置相同的样式，建议使用class选择器。
- 在使用class选择器时，需要在选择符前加上英文句号.。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
.h{color:blue;}
</style>
</head>
<body>
<div>有id的元素</div>
<h1 class="h">无id的元素</h1>
<div class="h">无id的元素</div>
<p>无id的元素</p>
</body>
</html>
后代选择器
- 后代选择器就是选中父代元素内部的某些子元素、孙元素（子元素内部的元素是孙元素）。
- 后代选择器的父代和后代之间需要使用空格隔开。
- #father p{} ，father是父代元素的id前面需要加上#，p是选中的子代元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
#father p{color:blue;} ##id是father的父元素下的所有p元素，定义它们的文本颜色是蓝色。
</style>
</head>
<body>
<div id="father">
<p>子代元素p</p>
<div>子代元素div</div>
<div>
<p>孙代元素p</p>
</div>
</div>
</body>
</html>
群组选择器
- 群组选择器相当于把多种选择器结合起来使用。
- 群组选择器中不同选择器之间需要用“，”隔开。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
#father,p,.title{color:blue;} ##表示选中id是father的元素、所有p元素、class是title的元素。
</style>
</head>
<body>
<div id="father">id选择器
</div>
<p>元素选择器</p>
<div>未选中元素</div>
<h1 class="title">class选择器</h1>
</body>
</html>
本文介绍了CSS选择器的基本概念，并详细讲解了元素选择器、id选择器、class选择器、后代选择器和群组选择器的用法，帮助开发者更精确地定位和操作网页元素的样式。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
