CSS–选择器
CSS概述
CSS 指层叠样式表 (Cascading Style Sheets),样式表允许以多种方式进行规定样式信息,这个就是之前说过的CSS的三种引入方式,打个比方:加入html是骨架,那么CSS就是各种各样的躯体.用来充实骨架,这样才有了形形色色的人们.
选择器的定义
css 选择器是用来选择标签的，选出来以后给指定的标签添加对应的样式
标签选择器
标签选择器根据标签名来选择标签，以标签名开头，此种选择器影响范围大，一般用来做一些通用设置。
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style type="text/css">
/* 标签选择器,直接以标签名开头 */
p{
/* 设置颜色是红色 */
color: red;
}
</style>
</head>
<body>
<!-- 网页展示的内容 -->
<div>hello div</div>
<p>hello p1</p>
<p>hello p2</p>
</body>
</html>
类选择器
类选择器根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style type="text/css">
/* 类选择器以.开头,后面填写需要被操作标签的类名 */
/* class中类名为div01的标签设置对应css样式 */
.div01{
color:blue
}
/* class中类名为p01的标签设置对应css样式 */
.p01{
color:red
}
/* class中类名为box的标签设置对应css样式 */
.box{
width:100px;
height:100px;
background:gold
}
</style>
</head>
<body>
<div class="div01">这是一个div</div>
<!-- 这个标签可以设置多个类名 -->
<p class="p01 box">这是一个段落</p>
</body>
</html>
层级选择器(后代选择器)
层级选择器根据层级关系选择后代标签，以 外层标签 内层标签，主要应用在标签嵌套的结构中，减少命名。这个层级关系不一定是父子关系，也有可能是祖孙关系，只要有后代关系都适用于这个层级选择器
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style type="text/css">
/* div 下在的p标签设置样式 */
div p{
color: red;
}
/* 类名为con的标签下的类名为url的标签设置样式 */
.con .url{
color:pink;
}
</style>
</head>
<body>
<div>
<p>hello</p>
</div>
<div class="con">
<p>hello world</p>
<a href="http://www.baidu.com" class="url">度娘</a>
</div>
<p>你好</p>
<a href="#" class="url">百度</a>
</body>
</html>
组选择器
组选择器可以把多个标签组成一个组，以, 分割, 如果有公共的样式设置，可以使用组选择器进行统一的样式设置。
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style type="text/css">
/* 组选择器使用,对标签进行分隔 */
/* 设置第一个与第三个div样式 */
.box1,
.box3 {
/* 设置宽度 */
width: 100px;
/* 设置高度 */
height: 100px;
/* 设置背影 */
background: green;
}
</style>
</head>
<body>
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</body>
</html>
id选择器
id选择器，以#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用，所以不推荐使用id作为选择器。
在css里id名称是可以的相同的。但如果页面涉及到JavaScript，就有问题了。因为JavaScript里获取DOM是通过getElementById，如果页面出现同一个id多次的话，这样元素就获取不到了。所以id需要唯一性。
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style type="text/css">
/* id选择器以#号开始 */
#div01{
color:red;
}
#div02{
color:green;
}
</style>
</head>
<body>
<div id="div01">这是第一个段落标签</div> <!-- 每个标签的id名称不能相同-->
<div id='div02'>这是第二个段落标签</div> <!-- 每个标签的id名称不能相同-->
</body>
</html>
属性选择器
属性选择器根据属性选择标签，以 标签名[属性名=‘属性值’]开头, 一个属性选择器可应用于多个标签上
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style type="text/css">
/* 设置键为name值为hello的标签设置为红色 */
[name='hello']{
color: red
}
</style>
</head>
<body>
<!-- 设置hello world与hello summer字体颜色为红色 -->
<div name="hello"> hello world</div>
<div name="baidu"> 百度 </div>
<div name="hello"> hello summer </div>
</body>
</html>
| 
转播
