CSS3笔记002 - 第02章 CSS选择器
第02章 CSS选择器
元素的id和class
id属性，具有唯一性，也就是说在一个页面中相同的id只能出现一次。如果出现了多个相同的id，那么CSS或者JavaScript就无法识别这个id对应的是哪一个元素。
class属性，可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得具有相同class的元素具有相同的CSS样式。
选择器是什么
在CSS中，有很多可以把你想要元素选中的方式，这些不同的方式其实就是不同的选择器。选择器的不同，在于选择方式不同，但最终目的是相同的，那就是把你想要的元素选中，然后才可以定义该元素CSS样式。
CSS选择器
# 选择器的语法格式
选择器
{
属性1 : 取值1;
......
属性n : 取值n;
}
# 最常用的五种CSS选择器：元素选择器|id选择器|class选择器|后代选择器|群组选择器
元素选择器：按元素标签名称选择
id选择器：按元素id名称选择
class选择器：按元素class名称选择
后代选择器：按层级选择某个元素的后代元素
群组选择器：同时对几个选择器进行相同的操作
# 元素选择器:选择p元素，字体变绿色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
<style>
p{
color: blue;
}
</style>
</head>
<body>
<p>
姓名：<input type="text" />
</p>
<p>
密码：<input type="password" />
</p>
</body>
</html>
# id选择器：通过#p1选择元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
<style>
#p1{
color: blue;
}
</style>
</head>
<body>
<p id="p1">
姓名：<input type="text" />
</p>
<p id="p2">
密码：<input type="password" />
</p>
</body>
</html>
# class选择器：通过.c1选择
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
<style>
.c1{
color: blue;
}
</style>
</head>
<body>
<p id="p1" class="c1">
姓名：<input type="text" />
</p>
<p id="p2" class="c1">
密码：<input type="password" />
</p>
</body>
</html>
# 后代选择器：先选一层，再选下一层
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
<style>
#father1 #p1{
color: blue;
}
</style>
</head>
<body>
<div id="father1">
<p id="p1" class="c1">
姓名：<input type="text" />
</p>
<p id="p2" class="c1">
密码：<input type="password" />
</p>
</div>
</body>
</html>
# 群组选择器：罗列元素名称，用逗号分隔
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
<style>
div,p{
color: blue;
}
</style>
</head>
<body>
<div id="father1">
<p id="p1" class="c1">
姓名：<input type="text" />
</p>
<p id="p2" class="c1">
密码：<input type="password" />
</p>
</div>
</body>
</html>
敬请关注个人微信公众号：测试工匠麻辣烫
