css并列选择器怎么用？ css复杂选择器

最新推荐文章于 2025-09-15 17:26:16 发布

原创最新推荐文章于 2025-09-15 17:26:16 发布 · 1.2w 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #web

本文深入讲解CSS中的各类选择器，包括基本的选择器如标签、类、ID和属性选择器，以及复杂的父子、直接父子、并列和分组选择器。通过实例代码，帮助读者理解如何在网页布局中灵活运用这些选择器。

部署运行你感兴趣的模型镜像

css并列选择器怎么用？请看文末
css基本选择器：
01. 标签

div{}

02. class
css Code:

.demo{}

html Code:

 <div class="demo">我是一个类</div>

03. id
css Code:

#demo{}

html Code:

<span id="demo">我是一个ID</span>

04. 属性
css Code:

[name="demo"]{}

html Code:

<div name="demo">我是自定义的属性</div>

css复杂选择器：
1.父子选择器：
css Code:

div span{}

html Code:

<div>
    <span>父子选择器</span>
</div>
<span>不会选中我</span>

2.直接父子选择器：
css Code:

div > span{}

html Code:

<div>
        <span>直接父子选择器</span>
    </div>
    <div>
        <strong>
            <span>不会选中我</span>
        </strong>
    </div>

3.并列选择器：
css Code:

div.demo{}

html Code:

<div class="demo">并列选择器</div>
<div>不会被选中</div>
<span class="demo">也不会被选中</span>

4.分组选择器
css Code:

.demo01,
.demo02{}

html Code:

<span class="demo01">分组选择器</span>
<div class="demo02">分组选择器</div>

您可能感兴趣的与本文相关的镜像

AutoGPT

AI应用

AutoGPT于2023年3月30日由游戏公司Significant Gravitas Ltd.的创始人Toran Bruce Richards发布,AutoGPT是一个AI agent（智能体），也是开源的应用程序，结合了GPT-4和GPT-3.5技术，给定自然语言的目标，它将尝试通过将其分解成子任务，并在自动循环中使用互联网和其他工具来实现这一目标