当前位置：网站首页 > 技术资源 > 正文

CSS——选择器

moboyou 2025-06-13 07:52 3 浏览

css既是层叠样式表，通过它可以装饰html网页，使其变漂亮，而怎么变呢？就要通过css选择器了，选择html标签再设置其属性及其属性值就OK啦

一单一选择器

1、标签选择器（元素选择器）：标签{}

CSS:<style>P{color：red} <style>

HTML:<P>测试</P>

2、ID选择器：#{}

CSS:<style>#{color：red} <style>

HTML:<P id=“P1”>测试</P>

注意：id表示标签的name,故只能唯一，且命令规则为：数字、字母、下划线

3、类选择器（class）：人以群发，物以类聚，将一类标签设为同一个样式，很实用

CSS:<style>.P2{color：red} <style>

HTML:<P class=“P2”>测试</P>

<a class=“P2” href="#">ceshi</a>

4、通配符选择器（*）

CSS:<style>*{color：red} <style>

所有标签均受影响，不建议用。

二组合选择器

1 、后代选择器（任意后代,空格）

CSS：.dingbu p{color:red}(div的后代所有p)

HTML: <div class="dingbu">

<ul>

</ul>

</div>

2、交集选择器（并列写且没空格）

CSS: h3.sp {color:red;}

html: <h3 class="sp">交集选择1</h3>

<a class="sp">我没被选择</a>

实例--只有是标签h3且class为sp 样式才会改变

3、并集选择器（分组选择器，“，”）

CSS：h3,a {color:red;}

HTML:<ul>

</ul>

实例：

css3选择器

4、儿子选择器（一个直系后代选择器，“>”）

CSS:div>p{background:yaqua}

HTML:

<div>

<p>nihao</p>

</div>

<div>

<ul>

<li><p>nihao</p></li>

<li>hahahahahha</li>

</ul>

</div>

实例：

5、序选择器（按顺序选择，“：”）

CSS: ul li:first-child {color:yellow;}

ul li:last-child {color:red;}

HTML:<ul>

<li>ceshihah</li>

</ul>

实例：

6、下一个兄弟选择器（同级，“+”）

CSS: h1+p{color:red;}

html:<h3>交集选择1</h3>

注：只有下一个兄弟背景变红，次下一个没有变红

实例：

三总结

总结不易请点个小

css class选择器用法

上一篇：还在为CSS选择器烦恼?CSS Selector Tester让你事半功倍!
下一篇：Uniapp开发鸿蒙购物项目教程之样式选择器

CSS——选择器

相关推荐

Linux环境中查看Oracle错误和警告日志信息

絮语----工作四年的碎碎念

SQL 中的 (+)用法

MYSQL经典面试题汇总

oracle常见问题处理

医院信息系统突发应急演练记录

最全面的IBMS系统集成系统技术规格书，赶紧收藏起来!

Windows 11:已知问题和已解决问题列表(更新时间:2022年1月)

苹果停止更新Windows版QuickTime!

Navicat Data Modeler使用教程十二:配置