选择器,就是用一种方式把我们想要的那一个标签选中。把它选中了,你才能操作这个标签的**
CSS样式
**。CSS
中有很多把你所需要的标签选中的方式,这些不同的方式就是不同的选择器。 在2.CSS选择器-CSS基础中我们学习了以下几种选择器:
这些都是CSS
中最基本的选择器。
层次选择器,就是通过元素之间的层次关系来选择元素。
层次选择器在实际开发中也是相当重要的,常见的层次关系包括:父子、后代、兄弟和相邻。
选择器 | 说明 |
---|---|
M N | 后代选择器,选择M元素内部后代N元素(所有的N元素) |
M>N | 子代选择器,选择M元素内部子代N元素(所有第1级N元素) |
M~N | 兄弟选择器,选择M元素后所有的同级N元素。 |
M N | 相邻选择器,选择M元素相邻的下一个元素(M、N是同级元素) |
后代选择器:选中元素内部中所有的指定的某个元素,包括子元素和其它后代元素。
M N{}
M元素和N元素之间用空格隔开,表示选中M元素内部所有N元素后代。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>CSS层次选择器</title>
<style type="text/css">
/*后代选择器*/
#first p{
color:#FFC0CB;
}
</style>
</head>
<body>
<div id="first">
<p>
<strong>子元素:</strong>人生若只如初见
</p>
<div id="second">
<p>
<strong>子元素的子元素:</strong>当时只道是寻常
</p>
</div>
<p>
<strong>子元素:</strong>越努力,越幸运。
</p>
</div>
</body>
</html>
<!--
#first p:会选中id为first元素的所有后代p元素。
-->
后代选择器示例11.png
子代选择器:选中元素内部的某一个子元素,只限子元素。 和后代选择器很相似,但却有不同。
M>N{}
M元素和N元素之间用 > 隔开,表示选中M元素内部的子元素N。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>CSS层次选择器</title>
<style type="text/css">
/*子代选择器*/
#first>p{
color:#FFC0CB;
}
</style>
</head>
<body>
<div id="first">
<p>
<strong>子元素:</strong>人生若只如初见
</p>
<div id="second">
<p>
<strong>子元素的子元素:</strong>当时只道是寻常
</p>
</div>
<p>
<strong>子元素:</strong>越努力,越幸运。
</p>
</div>
</body>
</html>
<!--
#first p:会选中id为first元素的子元素p。
-->
子代选择器示例1.png
兄弟选择器:选中元素后面(不包括前面)的某一类兄弟元素(同级)。
M~N{}
M元素和N元素之间用 ~ 隔开,表示选中 M 元素后面的所有某一类兄弟元素 N。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>CSS层次选择器</title>
<style type="text/css">
/*兄弟选择器*/
#second ~ p{
color:greenyellow;
}
</style>
</head>
<body>
<div id="first">
<p>
<strong>子元素:</strong>人生若只如初见
</p>
<div id="second">
<p>
<strong>子元素的子元素:</strong>当时只道是寻常
</p>
</div>
<p>
<strong>子元素:</strong>越努力,越幸运。
</p>
<p>
<strong>子元素:</strong>
男儿何不带吴钩,收取关山五十州。
请君暂上凌烟阁,若个书生万户侯?
</p>
</div>
</body>
</html>
<!--
#second p:会选中id为second元素的所有兄弟元素p,且只选择second后面的兄弟元素,前面的兄弟元素不管。
-->
兄弟选择器示例1.png
相邻选择器:选中元素后面(不包括前面)的某一个相邻的兄弟元素(同级)。 相邻选择器与兄弟选择器也很像。
M N{}
M元素和N元素之间用 + 隔开,表示选中 M 元素后面某一个相邻的兄弟元素 N。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>CSS层次选择器</title>
<style type="text/css">
/*相邻选择器*/
#second + p{
color:greenyellow;
}
</style>
</head>
<body>
<div id="first">
<p>
<strong>子元素:</strong>人生若只如初见
</p>
<div id="second">
<p>
<strong>子元素的子元素:</strong>当时只道是寻常
</p>
</div>
<p>
<strong>子元素:</strong>越努力,越幸运。
</p>
<p>
<strong>子元素:</strong>
男儿何不带吴钩,收取关山五十州。
请君暂上凌烟阁,若个书生万户侯?
</p>
</div>
</body>
</html>
<!--
#second p:会选中id为second元素后面相邻的1个兄弟元素p。
-->
相邻选择器示例1.png
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>CSS层次选择器</title>
<style type="text/css">
*{
padding: 0; /*去除所有元素的 padding和margin*/
margin: 0;
}
ul{
list-style-type:none; /*去除列表默认符号*/
}
/*相邻选择器*/
li+li{
border-top:2px solid #FFD700;
}
</style>
</head>
<body>
<ul>
<li>第 1 li元素</li>
<li>第 2 li元素</li>
<li>第 3 li元素</li>
<li>第 4 li元素</li>
<li>第 5 li元素</li>
</ul>
</body>
</html>
<!--
“1i+li”使用的是相邻选择器,表示“选择li元素相邻的下一个li元素”。
由于最后一个li元素没有相邻的下一个元素,所以对于最后一个元素,它是没有下一个l1元素可以选取的。
“li+li{ border-top:2 px solid #FFD700;}”使得两个li元素之间添加一个边框的效果。
-->
相邻选择器示例2.png
在两个列表项之间使用相邻选择器是一个非常棒的技巧,在实际开发中如果我们想要在两个元素之间实现什么效果(例如:border、 margin等),我们会经常用到这个技巧! 一定要重点掌握。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>CSS层次选择器</title>
<style type="text/css">
*{
padding: 0; /*去除所有元素的 padding和margin*/
margin: 0;
}
ul{
list-style-type:none;
}
li{
float: left; /*去除列表默认符号*/
}
/*相邻选择器*/
li+li{
border-left:2px solid #FFD700;
}
</style>
</head>
<body>
<ul>
<li>第 1 li元素 </li>
<li>第 2 li元素 </li>
<li>第 3 li元素 </li>
<li>第 4 li元素 </li>
<li>第 5 li元素</li>
</ul>
</body>
</html>
相邻选择器示例3.png
到目前为止,我们已经学习了 8 种选择器,其实还有非常多重要的选择器,但大部分都是
CSS3
新增的。CSS3
非常强大,能实现非常多很棒的效果,以后一定要去学习一下CSS3
。