更CSS高级选择器《一篇文章入门编程系列之从零基础入门HTML+CSS前端开发》12.25

最新推荐文章于 2024-08-20 15:49:45 发布

玄子Share

最新推荐文章于 2024-08-20 15:49:45 发布

阅读量111

点赞数

分类专栏： # HTML+ CSS Java微服务后端开发文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_62283694/article/details/128448285

版权

Java微服务后端开发同时被 2 个专栏收录

29 篇文章 2 订阅

订阅专栏

HTML+ CSS

12 篇文章 0 订阅

订阅专栏

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”