- CSS选择器
- 指定CSS要作用的标签,那个标签的名称就是选择器
CSS选择器分为两大类
1.基本选择器
2.扩展选择器
基本选择器
1.标签选择器:针对一类标签
2.类选择器:针对想要的所有标签使用
3.ID选择器:针对某一个特定的标签使用
4.通用选择器(通配符):针对所有的标签都适用(不建议使用)
扩展选择器
1.后代选择器(层级选择器):主要应用在父元素下的子元素,或者子元素下面的子元素
2.交集选择器:定义交集选择器的时候,两个选择器之间紧密相连
3.并集选择器(组选择器):如果有同样的样式设置,可以使用组选择器
一:基本选择器
基本选择器
1.标签选择器:针对一类标签
2.类选择器:针对想要的所有标签使用
3.ID选择器:针对某一个特定的标签使用
4.通用选择器(通配符):针对所有的标签都适用(不建议使用)
1、标签选择器
- 标签选择器
- 选择的是页面上所有这种类型的标签
- 选择器影响范围大,建议尽量应用在层级选择器中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<!-- 采用的是嵌入式 -->
<style type="text/css">
p{
font-weight: bold;
font-size: 40px;
}
span{
color: red;
}
</style>
</head>
<body>
<p>中国</p>
<p>我爱<span>中国</span></p>
<span>中国</span>
</body>
</html>
效果图
注意事项
1.所有的标签,都可以是选择器
2.无论这个标签藏的多深,一定能够被选上
3.选择的所有,而不是一个
2、类选择器
- 类选择器的选择符是“.”
- 通过类命来选择元素,一个类可应用与多个元素
- 一个元素上也可以使用多个类,应用灵活,可复用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<!-- 嵌入式引入发 -->
<style type="text/css">
.item1{
height: 100px;
width: 100px;
background-color: red;
}
/* 作用于同一个标签的类选择器 */
.item2{
border: 2px solid blue;
}
</style>
</head>
<body>
<!-- 同一个标签可以使用多个类选择器 -->
<div class="item1 item2"></div>
<!-- 类选择器可以复用 -->
<div class="item1"></div>
</body>
</html>
效果图
特点
1.类选择可以被多种标签使用
2.同一个标签可以使用多个类选择器,用空格隔开
3、id选择器
- id选择器的选择符是“#”
- 通过id名来选择元素
- 元素的id名称不能重复,所以一个样式设置项只能对应页面上一个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
#css1{
height: 200px;
width: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="css1"></div>
</body>
</html>
效果图
id属性值注意事项
1.只能有字母、数字、下划线
2.必须以字母开头
3.不能和标签同名
4、通用选择器
- 通用选择器的选择符是“*”
- 针对所有标签都适用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用选择器</title>
<style type="text/css">
*{
color: blue;
}
</style>
</head>
<body>
<div>中国</div>
<div>北京</div>
</body>
</html>
效果
注意事项
1.不建议使用,IE有些版本不支持,大网站增加客户端负担
2.效率不高,页面上的标签越多,效率越低
二:扩展选择器
扩展选择器
1.后代选择器(层级选择器):主要应用在父元素下的子元素,或者子元素下面的子元素
2.交集选择器:定义交集选择器的时候,两个选择器之间紧密相连
3.并集选择器(组选择器):如果有同样的样式设置,可以使用组选择器
1、后代选择器(层级选择器)
- E F
- 表示所有属于E元素后代的F元素
- 空格表示后代
- 主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名
- 同时也可以通过层级,防止命名冲突
<!-- version1.0 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器(层级选择器)</title>
<style type="text/css">
/* 含类选择器、标签选择器、id选择器都是可以的,用空格隔开 */
div .box1 p{
color: red;
}
</style>
</head>
<body>
<div>
<div class="box1">
<p>我爱中国</p>
</div>
</div>
</body>
</html>
<!-- version2.0 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器(层级选择器)</title>
<style type="text/css">
/* 标签不一定连续紧挨着,只要保持一个后代就行 */
div p{
color: red;
}
</style>
</head>
<body>
<div>
<div class="box1">
<p>我爱中国</p>
</div>
</div>
</body>
</html>
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style type="text/css">
.out{
width: 500px;
height: 500px;
border: 1px solid red
}
.out .in{
width: 50px;
height: 50px;
background-color: blue;
}
.out div{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="out">
<div class="in"></div>
<div>
<div class="in"></div>
</div>
</div>
</body>
</html>
效果图
注意事项
1.标签不一定连续紧挨着,只要保持一个后代就行
2.含类选择器、标签选择器、id选择器都是可以的,用空格隔开
3.后代选择器(层级选择器),描述的是一种祖先结构.
2、交集选择器
- 定义交集选择器的时候,两个选择器之间紧密相连
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style type="text/css">
/* 两个选择器紧挨 */
h3.special{
color: red;
}
p#cxz{
color: blue;
}
</style>
</head>
<body>
<h3 class="special zxc">标题</h3>
<h3 class="special">标题</h3>
<p id="cxz">段落</p>
</body>
</html>
效果
注意事项
1.一般以标签名开头,必须紧挨着
2.如果后一个选择器是类选择器,则写成 div.zxc
3.如果后一个选择器是id选择器,则写成 div#cxz
4.没有空格的 div.zxc 为交集选择器,需紧挨着
5.有空格的 div .red 为后代选择器(层级选择器),无需紧挨着
3、并集选择器(组选择器)
- 定义的时候用逗号隔开
- 三种基本选择都可以放进来
- 多个选择器,如果有同样的样式设置,可以使用组选择器
- 也称为并列选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并集选择器(组选择器)</title>
<style type="text/css">
.box1,.box2,.box3{
width: 300px;
height: 300px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
}
.box3{
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
效果