css 四大选择器

本文详细介绍了CSS中的四种选择器:元素选择器、类选择器、ID选择器和内联选择器,并通过实例演示了每种选择器的具体使用方法及其优先级。

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

首先,创建一个页面,输入如下内容:

在这里插入图片描述

暂时没有写任何的样式,所以打开后,只是普通的文字

在这里插入图片描述

现在开始讲解选择器,选择器一般分为,元素选择器、类选择器、id 选择器、内联选择器,先开始理解前三种;在 head 中创建一个 style 并在之中写元素选择器的表达方式,例如咱要操作 div 的元素,那么元素选择器就是 div ,写法则是 div {样式内容}如图:

此时会发现所有的div元素都出现了一个间距,
在浏览器中按 F12(谷歌浏览器 chrome),会弹出如下窗口
在这里插入图片描述

鼠标分别点击箭头所标示的内容,会发现 div 元素的高度都发生了改变,并且是 100 个像素的单位
在这里插入图片描述

这里写图片描述
下面给类选择器赋值,给一个背景颜色为黄色,那么会发现 2 个带有class这个标识的div的背景都变成了黄色.其中类选择器的名称可以自定义的,命名规则为(.类选择器名称),注意要加这个点号例如. div,.div2 , d1 等(注意不能用特殊字符开头)
在这里插入图片描述

之后分别给id选择器赋值,一个红色的外边框和一个黑色的外边框,id选择器在 style 样式中的命名规则为(#ID选择器名称,id选择器的命名是唯一的,不能有 2 个元素有相同的id,虽然可以看出样式效果,但是不符合 ECMA 命名规范,而且不利于未来的操作与学习),如图:
在这里插入图片描述

会发现2个带有id的选择器分别有了红色和黑色的实心外边框 1px表示一个像素, solid 表示实心边框 red 和 black 表示颜色.
接下来解析内联样式选择器,直接在元素里命名(直接在 div 中进行命名)
命名规则如图:
在这里插入图片描述

按照权重(优先级)来说,内联样式选择器 > id选择器 > 类选择器 > 元素选择器,

<think>嗯,用户想了解CSS层级选择器的用法和示例。首先,我需要回忆层级选择器的不同类型,比如后代选择器、子元素选择器、相邻兄弟选择器和通用兄弟选择器。根据提供的引用,特别是引用[2]和[4],可以确认这些类型的存在。 然后,我需要确保每个选择器的语法正确,并用例子说明。比如,后代选择器用空格分隔,子元素选择器用>符号。用户可能需要具体的代码示例,所以得参考引用中的例子,比如引用[3]和[4]中的代码块。 还要注意是否需要解释HTML元素之间的关系,比如父元素、子元素、兄弟元素,这在引用[2]提到过。可能需要简单说明这些关系,帮助用户理解层级选择器的应用场景。 另外,用户可能想知道这些选择器的实际应用,比如在布局或样式调整中的使用。需要结合示例说明每种选择器的效果,比如改变颜色、背景等,如引用[4]中的例子。 还要检查是否有其他相关选择器需要提及,比如通用选择器*在层级中的使用,但根据引用,主要应集中在层级选择器上。可能需要避免引入不相关的内容,保持回答的针对性。 最后,生成相关问题时要考虑用户可能进一步想了解的内容,比如性能优化、组合使用其他选择器,或者浏览器兼容性等。根据引用中的信息,确保问题相关且可引导用户深入学习。</think>### CSS层级选择器使用方法及示例 层级选择器通过HTML元素的嵌套关系实现精准样式控制,主要分为四大类: #### 一、后代选择器(空格分隔) 选择所有层级的后代元素 ```css /* 匹配.container内部所有p标签 */ .container p { color: blue; } ``` 示例: ```html <div class="container"> <p>直接子级段落</p> <div> <p>嵌套段落(仍被选中)</p> </div> </div> ``` #### 二、子元素选择器(`>`) 仅选择直接子元素[^4] ```css /* 只选择.container的直接子级p */ .container > p { border: 1px solid red; } ``` #### 三、相邻兄弟选择器(`+`) 选择紧接在某个元素后的**第一个**兄弟元素[^3] ```css h2 + p { background: yellow; } ``` 示例: ```html <h2>标题</h2> <p>被选中</p> <!-- 生效 --> <p>不生效</p> ``` #### 四、通用兄弟选择器(`~`) 选择某个元素后的**所有**同级元素[^3] ```css .box ~ p { font-weight: bold; } ``` 示例: ```html <div class="box"></div> <p>被选中</p> <!-- 生效 --> <span>间隔元素</span> <p>仍被选中</p> <!-- 生效 --> ``` ### 组合使用技巧 ```css /* 组合类选择器与层级 */ nav > ul.list > li.active { background: #ccc; } /* 结合伪类 */ ul li:first-child > a:hover { color: red; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值