HTML5基础知识点总结（四）---高级选择器

最新推荐文章于 2022-10-02 20:49:06 发布

张超@-@

最新推荐文章于 2022-10-02 20:49:06 发布

阅读量548

点赞数 5

分类专栏： html5 CSS 文章标签： css html5

本文链接：https://blog.csdn.net/CSDN9825/article/details/112750835

版权

html5 同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

高级选择器

当我们需要对多个不同的标签下的相同的属性赋同样的值时，我们就可以使用高级选择器
1、后代选择器和子代选择器
后代选择器和子代选择器是为了实现对某标签下的不同层级便签内容属性的精准赋值。

实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 后代选择器 */
        /* 将li标签下的所有strong标签里的内容改为红色，即大儿子、二儿子、孙子为红色 */
        li strong{
            color: red;
        }
        /* 子代选择器 */
        /* 只将li标签的下一级为strong标签里的内容改为绿色，即只将大儿子和二儿子改为绿色 */
        li>strong{
            color: seagreen;
        }
    
    </style>
</head>
<body>
    <li><strong>大儿子 </strong><strong>二儿子</strong>
    </li>
    <li><em>三儿子 <strong>孙子</strong></em></li>
</body>
</html>

结果：
在这里插入图片描述
**注意：**大儿子与二儿子没有变红的原因是两个选择器的优先级相同，后面的子代选择器覆盖了后代选择器的红色。
2、并集选择器
即：将要赋同样值的不同标签合并来写
实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* span{
            color: red;
        }
        h1{
            color: red;
        }
        h2{
            color: red;
        } */

        /* 并集选择器 */
        span,h1,h2{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>这是span</span>
        <h1>这是h1</h1>
        <h2>这是h2</h2>
    </div>
</body>
</html>

结果：
在这里插入图片描述
3、交集选择器
交集选择器可以精准的实现不同标签下的相同类名的分别赋值
实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1.choose{
            color: red;
        }
        p.choose{
            color: seagreen;
        }
    </style>
</head>
<body>
    <p class="choose">变绿</p>
    <h1 class="choose">变红</h1>
</body>
</html>

结果:
在这里插入图片描述
4、属性选择器
属性选择器是实现对具备某个属性的标签里面的样式修改
实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 具备某个属性 href */
        [href]{
            color:red
        }

        /* 满足属性=值 */
        /* [href="google.cn"]{
            color: royalblue;
        } */
        /* ^= 以...开头 */
        [href^="w"]{
            color: salmon;
        }
        /* $= 以...结尾 */
        [href$="n"]{
            color:springgreen
        }
        /* *= 包含... */
       /* [href*="h"]{
            color: black;
        }*/
    </style>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
    <a href="www.aiqiyi.com">爱奇艺</a>
    <a href="google.cn">谷歌</a>
</body>
</html>

结果：
在这里插入图片描述