CSS两种高级选择器

CSS高级选择器应用实例与解析

最新推荐文章于 2022-03-25 15:03:13 发布

原创最新推荐文章于 2022-03-25 15:03:13 发布 · 666 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文通过一个家用电器分类的网页布局示例，详细介绍了CSS中的高级选择器，包括后代选择器、子选择器、相邻兄弟选择器和通用兄弟选择器，以及属性选择器的不同用法。例如，使用类名前缀选择器 `.xiaobiaoti` 为不同类型的标题和内容设置样式，展示了CSS在网页设计中的灵活性和精准定位能力。

CSS高级选择器分为层次选择器和属性选择器。

层次选择器可分为：

1、后代选择器（E&nbsp；F{ }）

2、子选择器 (E>F{ })

3、相邻兄弟选择器 (E+F{ })

4、通用兄弟选择器 (E~F{ })

属性选择器（区分大小写）可分为：

1、E[attr] 选择匹配具有属性attr的E元素

2、E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val(完全一样)

3、E[attr*=val] 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”（中间一样）

4、E[attr$=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串

（结尾一样）

5、E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串（开头一样）（特殊字符需要使用“”或‘’）

示例：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家用电器分类</title>
    <style>
        div[class=dabiaoti]{
            background: #0f7bbf;
            font-size: 33px;
            color: white;
            height: 58px;
            width: 380px; 
        }
        div[class^=xiao]{
            background: #e3f0fb;
            font-size: 26px;
            color: #0f7bbf;
            height: 48px;
            width: 380px;
        }
        span[class=er]{
            background-color:rgb(226, 226, 226);
            height: 20px;
            width: 40px;
            font-size: 20px;
        }
        span[class=san]{
            background-color:rgb(226, 226, 226);
            height: 20px;
            width: 60px;
            font-size: 20px;
        }
        span[class=si]{
            background-color:rgb(226, 226, 226);
            height: 20px;
            width: 80px;
            font-size: 20px;
        }
        span[class=wu]{
            background-color:rgb(226, 226, 226);
            height: 20px;
            width: 100px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="dabiaoti">
        &nbsp;&nbsp;&nbsp;家用电器
    </div>
    <div class="xiaobiaoti1">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大家电
    </div>
    <p>
        &nbsp;&nbsp;<span class="si">平板电视</span>&nbsp;&nbsp;<span class="san">洗衣机 
        </span>&nbsp;&nbsp;<span class="er">冰箱</span>
        <br>
        &nbsp;&nbsp;<span class="er">空调</span>&nbsp;&nbsp;<span class="wu">烟机/灶具 
        </span>&nbsp;&nbsp;<span class="san">热水器</span>
        <br>
        &nbsp;&nbsp;<span class="wu">冷柜/酒柜</span>&nbsp;&nbsp;<span class="san">消毒柜 
        </span>&nbsp;&nbsp;<span class="si">家庭影院</span>
    </p>
    <div class="xiaobiaoti2">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生活电器
    </div>
    <p>
        &nbsp;&nbsp;<span class="san">电风扇</span>&nbsp;&nbsp;<span class="san">净化器 
        </span>&nbsp;&nbsp;<span class="san">吸尘器</span>
        <br>
        &nbsp;&nbsp;<span class="si">净水设备</span>&nbsp;&nbsp;<span class="san">挂烫机 
        </span>&nbsp;&nbsp;<span class="san">电话机</span>
    </p>
    <div class="xiaobiaoti3">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;厨房电器
    </div>
    <p>
        &nbsp;&nbsp;<span class="san">榨汁机</span>&nbsp;&nbsp;<span class="si">电压力锅    
        </span>&nbsp;&nbsp;<span class="san">电饭煲</span>
        <br>
        &nbsp;&nbsp;<span class="san">豆浆机</span>&nbsp;&nbsp;<span class="san">微波炉 
        </span>&nbsp;&nbsp;<span class="san">电磁炉</span>
    </p>
    <div class="xiaobiaoti4">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;五金家装
    </div>
</body>
</html>

成果：