层次选择器
E:表示父类标签 F表示子类标签
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E F | 后代选择器 | 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 |
| E>F | 子选择器 | 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素 |
| E+F | 相邻兄弟选择器 | 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面 |
| E~F | 通用兄弟选择器 | 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 |
后代选择器
格式:
E F{
控制语句;
}
示例:将body标签中的所有段落标签的背景颜色都设置为红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body p{
background: red;
}
</style>
</head>
<body>
<p>一</p>
<p>二</p>
<p>三</p>
<ul>
<li>
<p>四</p>
</li>
<li>
<p>五</p>
</li>
<li>
<p>六</p>
</li>
</ul>
<p>七</p>
<p>八</p>
</body>
</html>
注意:后代选择器两个选择符之间必须要以空格隔开
子选择器
格式:
E>F{
控制语句;
}
示例,将body下的段落子标签背景变为粉色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*body p{
background: red;
}*/
body>p{
background: pink;
}
</style>
</head>
<body>
<p>一</p>
<p>二</p>
<p>三</p>
<ul>
<li>
<p>四</p>
</li>
<li>
<p>五</p>
</li>
<li>
<p>六</p>
</li>
</ul>
<p>七</p>
<p>八</p>
</body>
</html>
结论: 这里可以看到body字标签下的p标签背景色都变为了粉色,而无需列表中的没有改变,原因是因为列表中的段落标签是列表的子标签,不是body的子标签…
可以再style标签中加上一句
li>p{
background: yellow;
}
将列表中的标签背景色变为了黄色
相邻兄弟选择器
这个选择器可能会相对于前两个难理解,仔细来看:
格式:
E+F{
控制语句
}
且匹配的F元素紧位于匹配的E元素后面
因为是相邻兄弟选择器,所以需要先确定是谁的兄弟,才能找到相邻…因此我们需要先确定一个对象
示例:需求:将第三行的背景颜色变为蓝色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*body p{
background: red;
}
body>p{
background: pink;
}
li>p{
background: yellow;
}*/
.two+P{
background: blue;
}
</style>
</head>
<body>
<p>一</p>
<p class="two">二</p>
<p>三</p>
<ul>
<li>
<p>四</p>
</li>
<li>
<p>五</p>
</li>
<li>
<p>六</p>
</li>
</ul>
<p>七</p>
<p>八</p>
</body>
</html>
上面的做法是先定位到第二行,这里使用了class属性,也可以使用id属性,看到上面的代码立马会想到,既然class属性可以再多个标签中设置,那我多写几个会是什么结果呢?
下面我们来看:
我们给二,三,七行都设置了class属性,并且在style标签中设置了class属性two的相邻兄弟段落标签背景色为蓝色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*body p{
background: red;
}
body>p{
background: pink;
}
li>p{
background: yellow;
}*/
.two+P{
background: blue;
}
</style>
</head>
<body>
<p>一</p>
<p class="two">二</p>
<p class="two">三</p>
<ul>
<li>
<p>四</p>
</li>
<li>
<p>五</p>
</li>
<li>
<p>六</p>
</li>
</ul>
<p class="two">七</p>
<p>八</p>
</body>
</html>
结果:
结果: 可以看到三和八行背景色发生了变化,能够理解,三行是因为三是二的相邻兄弟段落标签.八是因为八是七的相邻段落标签,那上面还有三的相邻兄弟标签呢,为什么没有显示呢?
这是因为虽说给三也设置了相应的设置,但是三的相邻兄弟标签是列表标签,并不是段落,因此设置就失效了,没有被执行…
通用兄弟选择器
格式:
E~F{
控制语句
}
选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
示例:需求:二的所有兄弟段落标签背景色都设置为紫色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*body p{
background: red;
}
body>p{
background: pink;
}
li>p{
background: yellow;
}*/
.two~P{
background: purple;
}
</style>
</head>
<body>
<p>一</p>
<p class="two">二</p>
<p >三</p>
<ul>
<li>
<p>四</p>
</li>
<li>
<p>五</p>
</li>
<li>
<p>六</p>
</li>
</ul>
<p >七</p>
<p>八</p>
</body>
</html>
结果:
结论:同样是需要先定位到二,这里用到了class属性,ID属性也是可以的,然后设置二的通用兄弟元素标签,四五六并不是二的兄弟标签,他们属于列表中的子标签,因此没有变化…
结构伪类选择器
针对于某一类元素的特定元素而设置
| 选择器 | 功能描述 |
|---|---|
| E:first-child | 作为父元素的第一个子元素的元素E |
| E:last-child | 作为父元素的最后一个子元素的元素E |
| E F:nth-child(n) | 选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd |
| E:first-of-type | 选择父元素内具有指定类型的第一个E元素 |
| E:last-of-type | 选择父元素内具有指定类型的最后一个E元素 |
| E F:nth-of-type(n) | 选择父元素内具有指定类型的第n个F元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
/*p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}*/
</style>
</head>
<body>
<p>一</p>
<p class="two">二</p>
<p >三</p>
<ul>
<li>
<p>四</p>
<p>四.1</p>
<p>四.1</p>
</li>
<li>
<p>五</p>
<p>五.1</p>
<p>五.2</p>
</li>
<li>
<p>六</p>
</li>
</ul>
<p >七</p>
<p>八</p>
</body>
</html>
结果:
结论:对于无序列表而言,第一个背景为红,最后一个为背景为绿色
将上面style标签中的代码替换为如下:
<style>
/*ul li:first-child{ background: red;}
ul li:last-child{ background: green;}/*
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}
</style>
结果:
结论:对于所有的标签而言,第一个p标签背景色为黄色,第二个为蓝色,其他不变…
属性选择器
| 属性选择器 | 功能描述 |
|---|---|
| E[attr] | 选择匹配具有属性attr的E元素 |
| E[attr=val] | 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写） |
| E[attr^=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串 |
| E[attr$=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串 |
| E[attr*=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配 |
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*对于9个超链接做了修饰,为了方便之后的变化观察*/
.demo a{
float: left; /*浮动*/
display: block;
height: 50px;
width: 50px;
border-radius: 10px;/*半径,将方形的四个角添加了弧度*/
background: blue;/*背景蓝色*/
color: white;/*字体白色*/
text-align: center;/*居中*/
line-height: 50px;
text-decoration: none;/*去掉超链接的下划线*/
margin: 5px;/*间距*/
}
/*属性选择器*/
/*对于所有class属性为links的a标签,背景设置为紫色*/
a[class=links]{
background: purple;
}
</style>
</head>
<body>
<p class="demo">
<a href="" class="links" id="first">1</a>
<a href="" class="links">2</a>
<a href="">3</a>
<a href="" class="links">4</a>
<a href="" id="apple">5</a>
<a href="http//www,baidu.com" class="links">6</a>
<a href="http//www.google.com">7</a>
<a href="1.jpg" class="links">8</a>
<a href="2.jpg" id="">9</a>
</p>
</body>
</html>
结果:
可以看到,1,2,4,6,8背景都被设置为了紫色
style标签中继续添加代码:
a[id=first] {
background: red;
}
结果:
结论:id为first的a标签背景变为了红色,因此可以发现,后运行的红色覆盖了之前的紫色
继续添加代码:
a[href^=http] {
background: black;
}
a[href$=jpg] {
background:pink;
}
a[href*=google] {
background: #ff4634;
}
结果:
结论:以http为开头的a标签背景设置为了黑色,以jpg为结尾的a标签背景被设置为粉色,href中包含了google的a标签背景被设置为西柚红…
7754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
