ID选择器
通过id属性选择唯一的一个元素
语法:**#id属性值{};**
这首诗一共有四句,每一句都在p标签内
如果只想让第二句颜色设置为蓝色怎么办?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<!-- 这首诗一共有四句,每一句都在p标签内
如果只想让第二句颜色设置为蓝色怎么办? -->
<style type="text/css">
#p1{
color: blue;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p>锄禾日当午,</p></br>
<p id="p1">汗滴禾下土。</p></br>
<p>谁知盘中餐,</p></br>
<p>粒粒皆辛苦。</p></br>
</body>
</html>
类选择器
类选择器class
**语法:.类属性值{};**
如果想要另外三句都为黄色呢?再设置三个id吗?
那样太麻烦了。
可以选择class分类器,class属性和id属性相似
id不可重复,class可以重复
拥有相同class属性值的元素,属于一组
选中一组元素,进行设置;
可以为一个元素设定多个class属性值,用空格隔开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
#p1{
color: blue;
}
.p2{
color: yellow;
}
.p3{
font-size: 40px;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p class="p2">锄禾日当午,</p></br>
<p id="p1">汗滴禾下土。</p></br>
<p class="p2">谁知盘中餐,</p></br>
<p class="p2 p3" >粒粒皆辛苦。</p></br>
</body>
</html>
统配选择器
选中页面中所有的元素
**语法: *{}**
将页面背景设置为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
/* #p1{
color: blue;
}
.p2{
color: yellow;
}
.p3{
font-size: 40px;
} */
*{
background-color: red;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p class="p2">锄禾日当午,</p></br>
<p id="p1">汗滴禾下土。</p></br>
<p class="p2">谁知盘中餐,</p></br>
<p class="p2 p3" >粒粒皆辛苦。</p></br>
</body>
</html>
同时选中多个选择器
语法:选择器1,选择器2,......{};
用逗号隔开,满足选择器1,2....都被选中;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
/* #p1{
color: blue;
}
.p2{
color: yellow;
}
.p3{
font-size: 40px;
} */
/* *{
background-color: red;
} */
#p1,.p3,h1{
background-color: yellow;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p class="p2">锄禾日当午,</p></br>
<p id="p1">汗滴禾下土。</p></br>
<p class="p2">谁知盘中餐,</p></br>
<p class="p2 p3" >粒粒皆辛苦。</p></br>
</body>
</html>
复合选择器
语法:选择器1选择器2 {};
中间没有空格隔开
选中同时满足多个选择器的元素;
如图,想让最后一句背景设置为绿色,该如何设置?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
/* .p3{
background-color: green;
} */
/* 如果这样设置,粒粒皆辛苦那一句也会变化,这里就要用到复合选择器 */
span.p3{
background-color: green;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p class="p2">锄禾日当午,</p></br>
<p id="p1">汗滴禾下土。</p></br>
<p class="p2">谁知盘中餐,</p></br>
<p class="p2 p3" >粒粒皆辛苦。</p></br>
<span class="p3">这是一首歌颂劳动人民的诗</span>
</body>
</html>
后代元素选择器
首先需要有父元素子元素的概念;
子元素,直接被父元素包含的元素,
父元素,直接包含子元素的元素
后代元素(直接或者间接被祖先元素包含的元素,子元素也是后代元素),
祖先元素(直接或者间接包含后代元素的元素,父元素也是祖先元素),
兄弟元素,具有同一个父元素的元素。
选中指定元素的指定后代元素:
**语法:
祖先元素 后代元素{}**
中间用空格隔开
选中id为1中的p元素中的span元素;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子元素和后代元素</title>
<style type="text/css">
/* 选中id为1中的p元素中的span元素 */
#p1 p span{
background-color: red;
}
</style>
</head>
<body>
<div>
<span>A</span>
<p>B<span>C</span></p>
</div>
<div id="p1">
<span>D</span><p>E<span>F</span></p>
</div>
<span>G</span>
</body>
</html>
子元素选择器
语法:父元素>子元素{};
为div的子元素span设置一个背景颜色为黄色;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子元素和后代元素</title>
<style type="text/css">
/* 为div的子元素span设置一个背景颜色为黄色; */
div>span{
background-color: yellow;
}
</style>
</head>
<body>
<div>
<span>A</span>
<p>B<span>C</span></p>
</div>
<div id="p1">
<span>D</span> <p>E<span>F</span></p>
</div>
<span>G</span>
</body>
</html>
只有A和D是子元素,CF是后代元素,G是兄弟元素。
选择器知识练习与巩固
以下链接是有关选择器的小游戏,可以拿来练习巩固知识。