03------高级选择器

级选择器分为：后代选择器、子代选择器、并集选择器、交集选择器
 
后代选择器
使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）
.container p{
    color: red;        
}
.container .item p{
    color: yellow;
复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css" media="screen">
    #box p{
        color: red;
    }

    </style>

</head>

<body>
<div id="box" class="wrap">
    <div id="box2" class="wrap2">
        <div id="bo3" class="wrap3">
            <p>猜猜我是什么颜色</p>
        </div>
    </div>

</div>

</body>
</html>
例子
复制代码

 

子代选择器

使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

container>p{
     color: yellowgreen;
 }
复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css" media="screen">
    /*#box p{*/
        /*color: red;*/
    /*}*/

        #box>p{
            color: yellow;   /*只选择下一级不深入选择所 哈哈哈 变黄，其余不变*/
        }
    </style>

</head>

<body>
<div id="box" class="wrap">
    <p>哈哈哈</p>
    <div id="box2" class="wrap2">
        <div id="bo3" class="wrap3">
            <p>猜猜我是什么颜色</p>
        </div>
    </div>

</div>

</body>
</html>
例子
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css" media="screen">
    /*2 1 1*/
    #box #box2 div .app{
    color:yellow;;
     }
    /*2 1 1*/          /* 权重一样后面覆盖前面的，结果红色*/
    #box #box2 .wrap3 p{
        color:red;
    }
    </style>

</head>

<body>
<div id="box" class="wrap">
    <div id="box2" class="wrap2">
        <div id="bo3" class="wrap3">
            <p id="pa" class="app">猜猜我是什么颜色</p>
        </div>
    </div>

</div>

</body>
</html>
例子2
复制代码

 

 

 

并集选择器

多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器。

/*并集选择器*/
h3,a{
    color: #008000;
    text-decoration: none;
                
}

 比如像百度首页使用并集选择器。

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
      margin: 0;
      padding: 0
   }
/*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*/

 

 

交集选择器

使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active

比如有一个<h4 class='active'></h4>这样的标签。

那么

复制代码
h4{
    width: 100px;
    font-size: 14px;
}
.active{
    color: red;
    text-decoration: underline;
}
/* 交集选择器 */
h4.active{
    background: #00BFFF;
}
复制代码

 

它表示两者选中之后元素共有的特性。

 

posted @   王竹笙  阅读(143)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
· 【译】Visual Studio 中新的强大生产力特性
· 2025年我用 Compose 写了一个 Todo App
点击右上角即可分享
微信分享提示
SQL AI 助手