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

2021-01-17 17:02:16 阅读：118 来源： 互联网

高级选择器

当我们需要对多个不同的标签下的相同的属性赋同样的值时，我们就可以使用高级选择器
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>

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

标签：知识点,color,标签,---,href,选择器,red,属性
来源： https://blog.csdn.net/CSDN9825/article/details/112750835

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

高级选择器