css并列选择器怎么用？ css复杂选择器-优快云博客

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>