0%

CSS--选择器

CSS–选择器

CSS概述

CSS 指层叠样式表 (Cascading Style Sheets),样式表允许以多种方式进行规定样式信息,这个就是之前说过的CSS的三种引入方式,打个比方:加入html是骨架,那么CSS就是各种各样的躯体.用来充实骨架,这样才有了形形色色的人们.

选择器的定义

==css 选择器是用来选择标签的,选出来以后给指定的标签添加对应的样式==

标签选择器

==标签选择器根据标签名来选择标签,以标签名开头,此种选择器影响范围大,一般用来做一些通用设置。==

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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中应用最多的一种选择器。==

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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>

层级选择器(后代选择器)

==层级选择器根据层级关系选择后代标签,以 外层标签 内层标签,主要应用在标签嵌套的结构中,减少命名。这个层级关系不一定是父子关系,也有可能是祖孙关系,只要有后代关系都适用于这个层级选择器==

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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>

组选择器

==组选择器可以把多个标签组成一个组,以, 分割, 如果有公共的样式设置,可以使用组选择器进行统一的样式设置。==

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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需要唯一性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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>

属性选择器

==属性选择器根据属性选择标签,以 标签名[属性名=’属性值’]开头, 一个属性选择器可应用于多个标签上==

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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>