CSS-复合选择器

已于 2023-05-09 16:38:39 修改
阅读量147 收藏
点赞数 1
文章标签： css 前端
于 2023-05-03 17:26:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53002037/article/details/130475001
版权

复合选择器：

交集选择器：

代码：

选中同时符合多个条件的元素，有并且的含义（既…又…）

<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
    <style>
        .rich {
            color: gold;
        }
        .beauty {
            color: red;
        }
        /* p元素且类名为beauty */
        p.beauty {
            color: green;
        }
        /* .dream{
            color: orange;
        } */
        .rich.beauty {
            color: orange;
        }
    </style>
</head>
<body>
    <h2 class="rich">土豪张三</h2>
    <h2 class="beauty">明星李四</h2>
    <!-- <h2 class="dream">土豪明星王五</h2> -->
    <h2 class="rich beauty">土豪明星王五</h2>
    <hr>
    <!-- hr是水平线 -->
    <p class="beauty">小狗旺财</p>
    <p class="beauty">小猪佩奇</p>
</body>

有图有真相：

在这里插入图片描述

格式：

选择器1选择器2选择器3…选择器n { }
在这里插入图片描述

交集选择器注意点：

  1. 有标签名，标签名必须写在前面
  2. id选择器，理论上是可以作为交集的条件，但是实际应用几乎不用(#)
  3. 交集选择器中不可能出现两个元素选择器，不可能即是p元素又是span元素
  4. 用得最多的交集选择器是：元素选择器配合类名选择器，例如 p.beauty

并集选择器：

代码：

<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style>
        .rich {
            color: gold;
        }
        .beauty {
            color: red;
        }
        .dpg {
            color: blue;
        }
        .pig {
            color: green;
        }
        .rich,
        .beauty,
        .dog,
        .pig {
            font-size: 40px;
            background-color:grey;
            width: 180px;
        }
    </style>
</head>

<body>
    <h2 class="rich">土豪张三</h2>
    <h2 class="beauty">明星李四</h2>
    <h2>破产王五(不加任何样式)</h2>
    <hr>
    <p class="dog">小狗旺财</p>
    <p class="pig">小猪佩奇</p>
</body>

有图有真相：

在这里插入图片描述

格式：

作用是选中多个选择器对应的元素，并集就是或者的含义（要么…要么…）
选择器1，选择器2，选择器3，…选择器n { }
在这里插入图片描述

并集选择器注意点：

  1. 并集选择器，我们一般竖着写
  2. 任何形式的选择器，都可以作为并集选择器的一部分
  3. 并集选择器通常用于集体声明，可以缩小样式表体积

后代选择器：

代码：

<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        ul li {
            color: brown;
        }
        ol li {
            color: blue;
        }
        ul li a {
            color: chocolate;
        }
        ol a {
            color: grey;
        }
        .subject li.front-end {
            color: green;
        }
        .subject div.front-end {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>抽烟</li>
        <li>喝酒</li>
        <li>
            <a href="#">烫头</a>
        </li>
        <div>
            <li>踢球</li>
        </div>
    </ul>
    <hr>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>
            <a href="#">王五</a>
        </li>
    </ol>
    <hr>
    <ol class="subject">
        <li class="front-end">前端</li>
        <div class="front-end">学好前端找到好工作！</div>
        <li>java</li>
        <li>大数据</li>
        <li>UI</li>
    </ol>
</body>

有图有真相：

在这里插入图片描述

格式：

选择器1 选择器2 选择器3…选择器n { }
（先写祖先，再写后代 空格可以理解为 什么中的什么）

后代选择器的注意点：

  1. 后代选择器最终选择的是后代不选中祖先
  2. 儿子、孙子、重孙子等都算是后代
  3. 结构一定要复合之前讲的HTML嵌套要求，例如不能在p标签里写h1-h6等

子代选择器：

代码：

<head>
    <meta charset="UTF-8">
    <title>子代选择器</title>
    <style>
       div>a {
           color: red;
       }
       div>p>a {
           color: skyblue;
       }
       .foot>a {
           color: gold;
       }
    </style>
</head>

<body>
   <div>
       <a href="#">张三</a>
       <a href="#">李四</a>
       <a href="#">王五</a>
       <p>
           <a href="#">赵六</a>
           <div class="foot">
               <a href="#">孙七</a>
           </div>
       </p>
   </div>
</body>

有图有真相：
在这里插入图片描述

格式：

选择器1>选择器2>选择器3…选择器n { }
选择器之间用 > 隔开，可以理解为：“xxx的子代”，就是儿子的意思，选择器1234…n可以是之前学的任何一种选择器

子代选择器的注意点：

  1. 子代选择器最终选的是子代不是它的父级
  2. 子、孙子、重孙子、重重孙子…统称为后代，子就是指儿子
    在这里插入图片描述

兄弟选择器：

代码：

<head>
    <meta charset="UTF-8">
    <title>兄弟选择器</title>
    <style>
        /* 选中div后紧紧相邻的兄弟p元素 -相邻兄弟选择器*/
        /* div+p {
          color: red;
           } */
        /* 选中div后所有的的兄弟p元素 -通用兄弟选择器*/
        
        div~p {
            color: blue;
        }
        
        li+li {
            color: gold;
        }
    </style>
</head>

<body>
    <p>测试</p>
    <div>学新知识</div>
    <p>前端</p>
    <p>Java</p>
    <p>大数据</p>
    <p>UI</p>
    <ul>
        <li>主页</li>
        <li>秒杀</li>
        <li>订单</li>
        <li>我的</li>
    </ul>
</body>

有图有真相：

在这里插入图片描述

格式：

相邻兄弟选择器：

选中指定元素后符合条件的相邻兄弟元素
选择器1+选择器2 { }
就是紧挨着他的下一个，简单说就是 睡在我下铺的兄弟
在这里插入图片描述

通用选择器：

选中指定元素后符合条件的所有兄弟元素，简单记：睡在我下铺的所有兄弟。
选择器1~选择器2 { }
在这里插入图片描述

注意：

这里的选择器可以是我们学过的所有选择器

属性选择器：

代码：

<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /* 第一种写法：选中具有title属性的元素 */
        /* [title] {
            color: red;
        } */
        /* 第二种写法：选中具有title属性，且属性值为csdn1的元素*/
        /* [title="csdn1"] {
            color: red;
        } */
        /* 第三种写法：选中具有title属性，且属性值以字母a开头的元素*/
        /* [title^="a"] {
            color: red;
        } */
        /* 第四种写法：选中具有title属性，且属性值以字母t结尾的元素*/
        /* [title$="t"] {
            color: red;
        } */
        /* 第五种写法：选中具有title属性，且属性值包含字母n的元素*/
        /* [title*="n"] {
            color: red;
        } */
    </style>
</head>
<body>
    <div title="csdn1">一杯热白开</div>
    <div title="csdn2">两杯热白开</div>
    <div title="ant">三杯热白开</div>
    <div title="aant">四杯热白开</div>
</body>

格式：

在这里插入图片描述

伪选择器：

引出伪类概念：

<head>
    <meta charset="UTF-8">
    <title>伪类选择器概念</title>
    <style>
        /* 什么是伪类？ 很像类，但不是类(class)，是元素特殊状态的一种描述 */
        /* 选中的是没有访问过的a元素 */
        a:link {
            color:gold;
        }
        /* 选中的是访问过的a元素 */
        a:visited {
            color:grey;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">去百度</a>
    <a href="https://www.jd.com">去京东</a>
</body>

有图有真相：

访问过的变灰色，没访问的是金色

动态伪类：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪类选择器-动态选择器</title>
    <style>
        /* 有顺序不能打乱 lvha(其中lv是a元素特有的) */
        /* 选中的是没有访问过的a元素 */
        
        a:link {
            color: gold;
        }
        /* 选中的是访问过的a元素 */
        
        a:visited {
            color: grey;
        }
        /* 选中的是鼠标悬浮状态的a元素 */
        
        a:hover {
            color: skyblue;
        }
        /* 选中的是激活状态的a元素 */
        
        a:active {
            color: green;
        }
        /* 选中的是鼠标悬浮的span元素 */
        
        span:hover {
            color: green;
        }
        /* 选中的是激活的span元素 */
        
        span:active {
            color: red;
        }
        /* 选中获取焦点的元素，只适用于表单类元素 */
        
        input:focus,
        select:focus {
            color: palegreen;
            background-color: lightslategrey;
        }
    </style>
</head>

<body>
    <a href="https://www.baidu.com">去百度</a>
    <a href="https://www.jd.com">去京东</a>
    <span>一杯热白开</span>
    <br>
    <input type="text">
    <br>
    <select>
        <option value="beijing">北京</option>
        <option value="shanxi">山西</option>
        <option value="hunan">湖南</option>
    </select>
</body>

</html>
动态伪类注意点：
  1. :link 超链接未被访问的状态
  2. :visited 超链接访问过的状态
  3. :hover 鼠标悬停在元素上的状态
  4. :active 元素激活的状态
    激活就是按下鼠标但是没松开
  5. 郡守lvha顺序 即 link、visited、hover、active
  6. :focus 获取焦点的元素 ，只有表单类元素才能使用:focus伪类。当用户点击元素、触摸元素或通过键盘的tab键等方式选择元素时就是获得焦点

结构伪类：（重点看2）

结构伪类1：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪类选择器-结构伪类1</title>
    <style>
        /* 选中的是div的第一个儿子p元素(按照所有兄弟计算的，下面一样) ---结构1  */
        /* div>p是子代选择器 */
        /* div>p:first-child{
            color: red;
        } */
        /* 选中的是div的第一个儿子p元素 ---结构2  */
        /* div>p:first-child{
            color: red;
        } */
        /* 选中的是div的后代p元素且p的父亲是谁无所谓,但p必须是其父亲的第一个儿子---结构3  */
        /* div p是后代选择器  */
        /* div p:first-child {
            color: red;
        } */
        /* 选中的是p元素且p的父亲是谁无所谓,但p必须是其父亲的第一个儿子---结构3  */
        
        p:first-child {
            color: red;
        }
    </style>
</head>

<body>
    <!-- 结构1 -->
    <!-- <div>
        <p>张三：99分</p>
        <p>李四：95分</p>
        <p>王五：86分</p>
        <p>赵六：73分</p>
    </div> -->
    <!-- 结构2 -->
    <!-- <div>
        <span>张三：99分</span>
        <p>李四：95分</p>
        <p>王五：86分</p>
        <p>赵六：73分</p>
    </div> -->
    <!-- 结构3 -->
    <p>测试1</p>
    <div>
        <p>测试2</p>
        <marquee>
            <p>测试3</p>
            <p>张三：99分</p>
        </marquee>
        <p>李四：95分</p>
        <p>王五：86分</p>
        <p>赵六：73分</p>
    </div>
</body>

</html>
***重点记·结构伪类2：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪类选择器-结构伪类2</title>
    <style>
        /* 选中的是div的第一个儿子p元素(按照所有兄弟计算的) ---结构1  */
        /* div>p是子代选择器 */
        /* div>p:first-child {
            color: red;
        } */
        /* 选中的是div的第n个儿子p元素(按照所有兄弟计算的) ---结构1  */
        /* div>p:nth-child(3) {
            color: red;
        } */
        /* 选中的是div的第n个儿子p元素(按照所有兄弟计算的) ---结构2  */
        /* 2n/even是选中偶数，2n+1/odd是选中奇数，-n+5是前五位(an+b的形式) */
        /* div>p:nth-child(even) {
            color: red;
        } */
        /* 选中的是div的第一个儿子p元素(按照所有同类型兄弟计算的) ---结构3 */
        /* div>p:first-of-type{
            color: red;
        } */
        /* 选中的是div的最后一个儿子p元素(按照所有兄弟计算的) ---结构3 */
        /* div>p:last-child{
            color: red;
        } */
        /* 选中的是div的第n个儿子p元素(按照所有同类型兄弟计算的) ---结构3 */
        
        div>p:nth-of-type(3) {
            color: red;
        }
    </style>
</head>

<body>
    <!-- 结构1 -->
    <!-- <div>
        <p>张三：99分</p>
        <p>李四：95分</p>
        <p>王五：86分</p>
        <p>赵六：73分</p>
        <p>孙七：68分</p>
        <p>老八：55分</p>
    </div> -->
    <!-- 结构2 -->
    <!-- <div>
        <p>第1个</p>
        <p>第2个</p>
        <p>第3个</p>
        <p>第4个</p>
        <p>第5个</p>
        <p>第6个</p>
        <p>第7个</p>
        <p>第8个</p>
        <p>第9个</p>
        <p>第10个</p>
    </div> -->
    <!-- 结构3 -->
    <div>
        <span>测试</span>
        <p>张三：99分</p>
        <p>李四：95分</p>
        <p>王五：86分</p>
        <span>测试3</span>
        <p>赵六：73分</p>
        <p>孙七：68分</p>
        <p>老八：55分</p>
        <span>测试2</span>
    </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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪类选择器-结构伪类3</title>
    <style>
        /* 选中div中倒数第n个的儿子p元素(按照所有兄弟) ---看结构1 */
        /* div>p:nth-last-child(3){
          color: red;
        } */
        /* 选中div中倒数第n个的儿子p元素(按照所有同类型兄弟) ---看结构1 */
        /* div>p:nth-last-of-type(2){
          color: red;
        } */
        /* 选中的是没有兄弟的span元素 ---看结构2 */
        /* span:only-child{
            color: red;
        } */
        /* 选中的是没有同类型兄弟的span元素 ---看结构2 */
        /* span:only-of-type{
            color: red;
        } */
        /* 选中的是根元素 */
        /* :root {
            background-color: skyblue;
        } */
        /* 选中的是没有内容的div元素 */
        div:empty {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 结构1 -->
    <!-- <div>
        <span>测试</span>
        <p>张三：99分</p>
        <p>李四：95分</p>
        <p>王五：86分</p>
        <p>赵六：73分</p>
        <p>孙七：68分</p>
        <p>老八：55分</p>
        <span>测试2</span>
    </div> -->
    <!-- 结构2 -->
    <!-- <div>
        <span>测试1</span>
    </div>
    <div>
        <span>测试2</span>
        <p>张三：99分</p>
        <p>李四：95分</p>
        <p>王五：86分</p>
        <p>赵六：73分</p>
        <p>孙七：68分</p>
        <p>老八：55分</p>
    </div> -->
    <!-- 结构3 -->
    <div></div>
</body>

</html>

在这里插入图片描述

否定伪类：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪类选择器-否定伪类</title>
    <style>
        /* 选中的是div的儿子p元素,但是排除类名为fail的元素 */
        /* div>p:not(.fail) {
            color: red;
        } */
        /* 选中的是div的儿子p元素,但是排除title属性值一"你要加油"开头的元素 */
        /* div>p:not([title^="你要加油"]) {
            color: red;
        } */
        /* 选中的是div的儿子p元素,但排除第一个儿子p元素 */
        div>p:not(:first-child) {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>张三：99分</p>
        <p>李四：95分</p>
        <p>王五：86分</p>
        <p>赵六：73分</p>
        <p class="fail" title="你要加油啊！孙七">孙七：58分</p>
        <p class="fail" title="你要加油啊！老八">老八：55分</p>
    </div>
</body>

</html>
否定伪类结构：

:not(选择器) 排除满足括号中条件的元素

UI伪类：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪类选择器-UI伪类</title>
    <style>
        /* 选中的是勾选的复选框或单选按钮 */
        
        input:checked {
            width: 100px;
            height: 100px;
        }
        /* 选中的是被禁用的input元素 */
        
        input:disabled {
            background-color: grey;
        }
        /* 选中的是可用的input元素 */
        
        input:enabled {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <input type="checkbox">
    <input type="radio" name="gender">
    <input type="radio" name="gender">
    <input type="text">
    <input type="text" disabled>
</body>

</html>
  1. :checked被选中的复选框或单选按钮。
  2. :enable可用的表单元素（没有disabled属性)。
  3. :disabled 不可用的表单元素（有disabled 属性)。

目标伪类(了解即可)：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪类选择器-目标伪类</title>
    <style>
        div {
            background-color: grey;
            height: 300px;
        }
        
        div:target {
            background-color: gold;
        }
    </style>
</head>

<body>
    <a href="#one">去看第1个</a>
    <a href="#two">去看第2个</a>
    <a href="#three">去看第3个</a>
    <a href="#four">去看第4个</a>
    <a href="#five">去看第5个</a>
    <a href="#six">去看第6个</a>

    <div id="one">第1个</div><br>
    <div id="two">第2个</div><br>
    <div id="three">第3个</div><br>
    <div id="four">第4个</div><br>
    <div id="five">第5个</div><br>
    <div id="six">第6个</div>
</body>

</html>

:target 选中锚点指向的元素

语言伪类：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪类选择器-语言伪类</title>
    <style>
       div:lang(en) {
           color: red;
       }
       :lang(zh-CN) {
           color: gold;
       }
    </style>
</head>

<body>
    <div>一杯热白开</div>
    <div lang="en">没事多喝白开水</div>
    <p>我学习前端，热爱前端</p>
    <span>你好！！</span>
</body>

</html>

:lang() 根据指定的语言元素（本质上是看lang属性的值）

伪元素选择器：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪元素选择器</title>
    <style>
        /* 什么是伪元素？ --很像元素，但不是元素(element),是元素中的一些特殊位置 */
        /* 选中的是div中的第一个文字 */
        div::first-letter {
            color: red;
            font-size: 40px;
        }
        /* 选中的是div中的第一行文字 */
        div::first-line {
            background-color: yellow;
        }
        /* 选中的是div中被鼠标选择的文字 */
        div::selection {
            background-color: greenyellow;
            color: dodgerblue;
        }
        /* 选中的是input元素中的提示文字 */
        input::placeholder {
            color: skyblue;
        }
        /* 选中的是p元素最开始的位置，随后创建一个子元素 */ 
        p::before {
            content: "￥";
        }
        /* 选中的是p元素最后的位置，随后创建一个子元素 */
        p::after {
            content: ".00";
        }
    </style>
</head>

<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium asperiores perspiciatis ut sit autem vero laudantium, ipsum fugiat ex iste quaerat quas necessitatibus distinctio aperiam est odit dolores totam neque. Voluptates obcaecati illo,
        at veniam tempora culpa vitae, a architecto non repudiandae porro. Adipisci ducimus eos quisquam maiores omnis, fuga architecto porro, ut est iste ipsum, itaque inventore quam nostrum.</div>
    <br>
    <input type="text" placeholder="请输入你的用户名">
    <br>
    <p>199</p>
    <p>299</p>
    <p>399</p>
    <p>499</p>
</body>

</html>

作用：选中元素中的一些特殊位置

伪元素选择器常用伪元素：

  1. : :first-letter选中元素中的第一个文字。
  2. : :first-line选中元素中的第一行文字。
  3. : :selection选中被鼠标选中的内容。
  4. : : placeholder 选中输入框的提示文字。
  5. : : before在元素最开始的位置，创建一个子元素（必须用content 属性指定内容）。
  6. : :after在元素最后的位置，创建一个子元素（必须用content属性指定内容)。
幸运小圣
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【CSS3】第3章 CSS3入门
笔触狂放的博客
12-27 1643
CSS以HTML为基础，提供了丰富的样式效果，例如，字体、颜色、背景的控制以及网页整体的布局和排版等。CSS非常灵活，既可以嵌入在HTML文件中，也可以是一个独立的外部文件。如果是独立的文件，则必须以.css为后缀名。
CSS学习04：CSS的复合选择器
玉安_ZhangDe的博客
03-23 1709
1、什么是复合选择器？ 2、后代选择器★ 3、子选择器★ 4、并集选择器 5、交集选择器 6、伪类选择器
CSS第一章：3.交集选择器、并集选择器
热门推荐
要思考，要努力
04-26 1万+
总览1.交集选择器：同时满足多个选择器筛选条件的才能被选中2.并集选择器：只要满足其中一个筛选条件就能够被选中一、交集选择器1.HTML代码：2.CSS代码：（class值不使用任何东西隔开，表示“且”） 筛选 class 值 同时具有 red 和 fontsize50 的标签，将字号设置为50px，文本颜色设置成红色： 筛选 class 值 为 blue 的 p 标签，将颜色调为蓝色： 3.显示效果： 二、并集选择器 1.HTML代码： 2.CSS代码：（class值用“，”隔开，表示“
CSS复合选择器
最新发布
2401_84093019的博客
04-06 1056
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。[外链图片转存中…(img-EkgoymJR-1712403624453)][外链图片转存中…(img-IpPAtE6D-1712403624454)]
CSS---复合选择器
gaoqiandr的博客
11-20 1778
复合选择器可以帮助我们更好的选择网页中的元素，然后我们便可以进行修改样式，装饰页面。 复合选择器是建立在基础选择器的基础上对目标元素进行更准确更高效的选择，常用的复合选择器有：后代选择器，子选择器，并集选择器，伪类选择器等等。本文就对这四种复合选择器进行讲解介绍。
选择器组 – 交集选择器
coolchaobing的博客
07-28 492
认识选择器组 – 交集选择器
CSS复合选择器使用介绍
09-25
CSS复合选择器包括子选择器、相邻选择器、包含选择器、多层选择器嵌套、属性选择器、伪选择器和伪元素选择器，以上具体的使用如下，感兴趣的朋友可以学习下
【CSS基础学习】复杂选择器
01-08
文章目录CSS第二课-复杂选择器群组选择器属性选择器根据属性名查找元素根据属性值精确查找多属性选择器根据属性值近似查找根据标签查找派生选择器后代选择器子元素选择器相邻兄弟选择器 CSS第二课-复杂选择器 群组...
Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt
07-30
1.复合选择器 （1）后代选择器（包含选择器 重要） 语法： 元素1 元素2 {样式声明} 选择器1 选择器2{ 属性：属性值 } 元素1和元素2用空格隔开 元素1父亲 元素2后代 最终改变的是后代（元素2）的样式 ...
CSS选择器权重计算及优先级
04-16
介绍CSS中，单个选择器，以及复合选择器的权重计算规则，比如： .box #mydiv ul li.txt。通过计算选择器的权重，区别其优先级，判 断最终样式的覆盖效果。
CSS 的复合选择器、元素显示模式、背景、三大特性
m0_73645234的博客
08-06 397
1. CSS 的复合选择器 1.1什么是复合选择器 1.2后代选择器（重要） 1.3子选择器（重要） 1.4并集选择器（重要） 1.5伪类选择器 1.5.1链接伪类选择器 1.6 :focus 伪类选择器 1.7复合选择器总结 2.CSS 的元素显示模式 2.1 什么是元素显示模式 2.2 块元素 2.2行内元素 2.3行内块元素 2.4 元素显示模式总结 2.5 元素显示模式转换
【前端 - CSS】第 15 课 - 复合选择器
深入挖掘，筑基为先；知其然，知其所以然。
06-14 1090
在 CSS 中，复杂选择器允许通过组合多个选择器来选择具有特定层级关系的元素。这样可以更精确地定位和样式化页面上的特定元素，增强样式的灵活性和可重用性。
HTML常用标签以及CSS常用样式
wasdf231的博客
06-13 1505
HTML常用标签，CSS常用样式
【CSS 教程系列第 11 篇】什么是 CSS 中的交集选择器
“Allen Su”的博客
11-27 9839
什么是交集选择器 ？ 交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为 class 选择器，两个选择器之间不能有空格。
CSS的复合选择器
qq_57583705的博客
02-28 112
CSS的复合选择器的基础知识
CSS详细基础（三）复合选择器
前端，算法，MATLAB，统计学爱好者，目前主攻Web全栈+考研内容
09-28 747
前两章介绍了CSS中的基础属性，以及一些基础的选择器，本贴开始介绍复合选择器的内容~​ 在 CSS 中，可以根据选择器的类型把选择器分为和后代选择器、子选择器、并集选择器、伪类选择器等等~
CSS交集选择器，并集选择器
weixin_72322475的博客
08-07 6110
举例介绍CSS交集选择器，并集选择器
CSS中2种复合选择器
王春燕的博客
04-10 433
1:交集选择器 作用：选中同时符合多个条件的元素 语法：选择器1选择器2选择器n{} 注意：若交集选择器中有元素选择器，必须使用元素选择器开头 2:并集选择器 作用：同时选择多个选择器对应的元素 语法：选择器1，选择器2，选择器3···· 例子：#b1,p,.red <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-
css的复合选择器
w6437286的博客
03-07 924
本章主要讲了复合选择器中常用的几种，附导航条代码。
CSS-day02.pptx
01-25
CSS复合选择器是CSS语言中一种强大的工具，用于更精确地定位和选择HTML文档中的特定元素，以便在网页布局和样式的编写中提高效率。在CSS-day02的学习中，我们主要关注以下几个关键的复合选择器： 1. **后代选择器**...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值