前言
要运用css对HTML页面中的元素实现一对一，一对多或多对一的掌控，这就必须用到CSS选取器。 HTML页面中的元素便是经过CSS选取器进行样式掌控的。该文案能够使您对CSS选取器有整体的，详细的认识，您的点赞，评论，和关注是对作者的莫大鼓励。
一 简单选取符
h1 {color: gray;} // 元素选取符 简单的一个元素名叫作，无其他装饰符 就选中了所有h1元素
h1, h2 {color: gray;} // 群组选取符(,) 一个逗号 隔开几个选取器 使得每一个选取器对应的元素同期被选中
.className {color: gray;} // 类选取符 类型名前面加. 就可选中class属性为对应名叫作的元素
#myID {color: gray;} // id选取符 类型前面加# 就可选中id属性为对应名叫作的元素
h1.className{color: gray;} // 选取符是能够拼接运用的 该行意为 选取类名为className的h1元素
二 属性选取符
2.1 简单属性选取符
选取拥有某个属性的元素，而不管属性的值是什么。
h1[class] {color: silver;} // 该行意为 选取拥有class属性的h1元素 而不论其元素是什么
2.2 按照精细的属性值选取
选取属性为特定值的元素，实现的实质为进行字符串匹配，即当含有多个class的状况下，必要选取器中精细选中所有类名，次序与空格都需完全一致。
h1[class="className1 className2"] {...}
<h1 class="className1 className2"></h1> // 选中
<h1 class="className2 className1"></h1> // 不被选中
<h1 class="className1 className2 className3"></h1> // 不被选中
2.3 属性值模糊选中
[foo|="bar"]：选中元素拥有foo属性且该属性值以bar-开头或仅为bar。
例：<h1 foo="foo-fooName"></h1> <h1 foo="foo"></h1>
[foo~="bar"]：选中元素拥有foo属性且该属性值是包括bar的一组值。
例：<h1 foo="bar aaa bbb"></h1>
[foo*="bar"]：其值包括子串bar。
例：<h1 foo="abc abarabc"></h1>
[foo^="bar"]：以其开头。
例：<h1 foo="barabc"></h1>
[foo$="bar"]：以其结尾。
例：<h1 foo="abcbar"></h1>
实践举例：能够声明“btn-small-arrow-active”类，而后运用前缀`[class|="btn"]`选中。亦可运用`[class|="btn"][class*="-arrow"]`选中。
属性选取符a在匹配时是区分体积写的，咱们能够经过声明的方式使匹配时忽略体积写。 例：h1[foo$="bar" i]三 按照文档结构选取
首要咱们要理解DOM文档父子关系，HTML文档中的元素是一种层次结构，文档视图是树状的，文档中的元素，要么是另一个元素的父元素，要么是另一个元素的子元素，况且经常两者兼具。
| 
发表于 2024-6-30 06:42:26
