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

最新推荐文章于 2024-04-24 10:57:13 发布

wangzhixiangcopy

最新推荐文章于 2024-04-24 10:57:13 发布

阅读量1.2w

点赞数 2

文章标签： css 前端 web

本文链接：https://blog.csdn.net/wangzhixiangcopy/article/details/89391311

版权

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>

关注