3.6 层次选择器
/*后代选择器*/
/*当前选中元素后面的所有对应标签*/
body p {
background-color: red;
}
/*子选择器*/
/*当前选中元素后的一代对应标签*/
body > p {
background-color: aqua;
}
/*相邻兄弟选择器*/
/*当前选中元素同辈的一个相邻的对应标签(向下)*/
.yy + p {
background-color: yellow;
}
/*通用兄弟选择器*/
/*当前选中元素同辈的所有对应标签*/
.yy ~ p {
background-color: pink;
}
.yy {
color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<link rel="stylesheet" href="../css/03_Style.css">
<!--
祖爷爷 爷爷 爸爸 你
-->
</head>
<body>
<p>p1</p>
<p class="yy">p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li>
<p>p5</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p5</p>
</li>
</ul>
<p>p6</p>
<p>p7</p>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pBBLjSsy-1672053325847)(./assets/3.6.png)]
类型 | 语法 | 功能描述 |
---|---|---|
后代选择器 | E F | 使用空格链接,匹配E元素内的F元素 |
子选择器 | E > F | 使用“>”标识符链接,匹配F元素内的第一代E元素,即直接子元素 |
相邻兄弟选择器 | E + F | 使用“+”标识符链接,匹配紧位于E元素后的F元素 |
通用兄弟选择器 | E ~ F | 使用“~”标识符链接,匹配E元素后的所有F元素 |
3.6.1 后代选择器
<head>
<style>
/*后代选择器*/
/*当前选中元素后面的所有对应标签*/
body p {
background-color: red;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<p>p标签</p>
<h2>二级标题</h2>
<p>p标签</p>
</body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n98zAuj3-1672053325849)(./assets/3.6.1.png)]
3.6.2 子选择器
<head>
<style>
/*子选择器*/
/*当前选中元素后的一代对应标签*/
body > p {
background-color: aqua;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<p>p标签</p>
<h2>二级标题</h2>
<p>p标签</p>
<ol>
<li><p>p标签</p></li>
<li><p>p标签</p></li>
</ol>
<p>p标签</p>
</body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UwNckw24-1672053325849)(./assets/3.6.2.png)]
3.6.3 相邻同胞选择器
<head>
<style>
/*相邻兄弟选择器*/
/*当前选中元素同辈的一个相邻的对应标签(向下)*/
.yy + p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<p class="yy">p标签</p>
<p>p标签</p>
<h2>二级标题</h2>
<p>p标签</p>
<ol>
<li><p>p标签</p></li>
<li><p>p标签</p></li>
</ol>
<p>p标签</p>
</body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kzLUK0JW-1672053325850)(./assets/3.6.3.png)]
3.6.4 通用兄弟选择器
<head>
<style>
/*通用兄弟选择器*/
/*当前选中元素同辈的所有对应标签*/
.yy ~ p {
background-color: pink;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<p class="yy">p标签</p>
<p>p标签</p>
<h2>二级标题</h2>
<p>p标签</p>
<ol>
<li><p>p标签</p></li>
<li><p>p标签</p></li>
</ol>
<p>p标签</p>
</body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ptITsLuQ-1672053325850)(./assets/3.6.4.png)]
3.7 结构伪类选择器
li:first-child {
background-color: #005eff;
}
/*父级元素下的第一个标签,且这个标签为li*/
ul li:last-child {
background-color: red;
}
/*ul下的最后一个标签,且这个标签为li*/
p:nth-child(1) {
background-color: #00fff7;
}
/*父级元素下的第n个标签,且这个标签为p*/
/*重点在于是否指定了父级标签*/
li p:first-of-type {
background-color: #5eff00;
}
/*父级元素li下的第一个p标签*/
p:last-of-type {
background-color: #c800ff;
}
/*父级元素下的最后一个p标签*/
p:nth-of-type(2) {
background-color: #ffea00;
}
/*父级元素下的第n个p标签*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<link rel="stylesheet" href="../css/04_Style.css">
<!--
祖爷爷 爷爷 爸爸 你
-->
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li>1
<p>232</p>
</li>
<li>2
<p>232</p>
</li>
<li>3
<p>232</p>
</li>
</ul>
<p>p6</p>
<p>p7</p>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KG35XPzu-1672053325850)(./assets/3.7.png)]
选择器类型 | 功能描述 |
---|---|
:first-child选择器 | 父级元素的第一个子元素 |
:last-child选择器 | 父级元素的最后一个子元素 |
:nth-child(n)选择器 | 父级元素的第n个子元素 |
:first-of-type选择器 | 父级元素的第一个相同类型子元素 |
:first-of-type选择器 | 父级元素的最后一个相同类型子元素 |
:nth-of-type(n)选择器 | 父级元素的第n个相同类型子元素 |
3.7.1 child
<head>
<style>
li:first-child {
background-color: #005eff;
}
body > p:first-child {
background-color: #ffd200;
}
</style>
</head>
<body>
<p>p标签</p>
<p>p标签</p>
<h2>二级标题</h2>
<p>p标签</p>
<ol>
<li><p>p标签</p></li>
<li><p>p标签</p></li>
</ol>
<p>p标签</p>
</body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jrYQKGtb-1672053325851)(./assets/3.7.1.png)]
3.7.2 type
<head>
<style>
body > p:last-of-type {
background-color: #c800ff;
}
/*父级元素下的最后一个p标签*/
p:nth-of-type(1) {
background-color: #ffea00;
}
/*父级元素下的第n个p标签*/
</style>
</head>
<body>
<p>p标签</p>
<p>p标签</p>
<h2>二级标题</h2>
<p>p标签</p>
<ol>
<li><p>p标签</p></li>
<li><p>p标签</p></li>
</ol>
<p>p标签</p>
</body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YLlyg16H-1672053325851)(./assets/3.7.2.png)]
3.8 属性选择器
/*
= 值直等于
*= 值包含
^= 值以开头
$= 值以结尾
*/
h3[id] {
background-color: #f80000;
}
ol h3[id] {
background-color: #00fff7;
}
/*可以与其他选择器混用*/
li[class="coffee"] {
background-color: pink;
}
li[title$="Coffee"] {
background-color: #ffd200;
}
li[id*="f"] {
background-color: #c0ff00;
}
li[id^="l"] {
background-color: #005eff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<link rel="stylesheet" href="../css/05_Style.css">
</head>
<body>
<h3 id="1">星巴克饮品</h3>
<ol>
<h3 id="2">饮品</h3>
<li class="coffee">抹茶拿铁</li>
<li class="coffee">焦糖玛奇朵</li>
<li class="coffee">摩卡</li>
<li id="four">卡布奇诺</li>
<li id="five">美式咖啡</li>
<li title="natieCoffee">红茶拿铁</li>
<li title="natie">香草风味拿铁</li>
<li>冷萃冰咖啡</li>
<li class="mocha">抹茶星冰乐</li>
<li id="last">榛果风味摩卡星冰乐</li>
</ol>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mwPJ6gSi-1672053325852)(./assets/3.8.png)]
选择器类型 | 功能描述 |
---|---|
E[attr] | 匹配具有属性attr的E元素 |
E[attr=val] | 匹配具有属性attr的E元素,且属性值为val,val区分大小写 |
E[attr^=val] | 匹配具有属性attr的E元素,且属性值是以val开头的任意字符串 |
E[attr$=val] | 匹配具有属性attr的E元素,且属性值是以val结尾的任意字符串 |
E[attr*=val] | 匹配具有属性attr的E元素,且属性值包含了“val” |
玄子2022年12月26日