CSS选择器笔记

最新推荐文章于 2024-05-16 11:24:56 发布

原创最新推荐文章于 2024-05-16 11:24:56 发布 · 618 阅读

CC 4.0 BY-SA版权

文章标签：

12 篇文章

订阅专栏

本文详细介绍了CSS选择器的基础知识，包括标签、ID、类等基本概念，并阐述了CSS选择器之间的并列关系、分组、属性、后代、子元素等高级选择器的应用方法。同时，提供了丰富的示例，帮助开发者更熟练地使用CSS选择器进行网页布局和样式控制。

基本：标签	(无)，e.g. div
基本：ID	#, e.g. #id_1
基本：class	.，e.g. .class_1
同一标签并列关系	无任何分隔符，e.g. div.c (<div class="c">)
CSS 选择器分组	,
CSS 属性选择器	[]
CSS 后代选择器	（后代包括子、孙、曾孙...）空格，e.g. h1 em (<h1>This is a <em>important</em> heading</h1>)
CSS 子元素选择器	（只是子）>, e.g. h1 > strong (<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>)
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。E.g.a[target=_blank]
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。