这是我参与「第四届青训营 」笔记创作活动的的第3天
今天总结一下CSS 常用的选择器，以优先级（权重）从小到大开始介绍
0 通配符选择器 *
- 含义：可以选中页面中所有元素，对所有元素都生效
- 用途：一般用于设置一些初始化的公共属性（像
<body>标签或者<ul>标签有它自带的一些样式，比如内边距和外边距，就可以通过通配符选择器初始化）
1 标签（元素）选择器
- 以标签名作为选择器
10 class类选择器 .
- 先在HTML标签上设置一个id的属性值
class="XXX" - CSS格式为：.XXX{ }
- XXX中不能包含有空格、XXX不能以数字开头
10 属性选择器[ ]
| [target] | 选择带有target 属性的所有元素。 |
|---|---|
| [target=_blank] | 选择带有 target="_blank" 属性值的所有元素。 |
| [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 |
| [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 |
- ~=的包含，不是指属性值里面包含，是属性里面包含这一整个完整的单词
- |=xxx的开头，一定要在xxx后面跟
-小横杠，或者整个属性值就是xxx，才能生效
10 伪类选择器 :
- 伪类是指处于xxx状态时
- 伪类选择器经常与标签名称一起使用，用于选中某一标签的伪类，特别是a标签（超链接）
- 其他选择器后面跟伪类选择器的时候，不能有空格！
:link 未被访问时
:visited 已被访问时
:hover 鼠标悬停时
:active 链接被激活时
书写以上伪类时，一定要按照以上顺序从上到下写！
因为在某一时刻，元素很有可能处在多种状态下！
比如鼠标悬停时也是未被访问时
链接被激活时也是鼠标悬停时
所以遵从CSS的层叠特性（最后一次的定义生效），那就得按照顺序从上到下写！
记忆口诀：LoVe HAte 爱与恨
100 id选择器 #
-
先在HTML标签上设置一个id的属性值
id="xxx" -
CSS格式为：#xxx{ }
-
xxx中不能包含有空格、xxx不能以数字开头；可以用大写字母，但必须保证选择器和id值同样都是大写！
-
一个HTML中如果多次给不同标签，赋值相同id，对应CSS样式虽然都会生效。但为了语法正确，最好一个网页中一个id命名只使用一次。
id 是为某个元素 指定 DOM 操作时的"唯一"标示符
它与页面如何渲染没有关系 渲染是否正确取决与文档结构与样式 （这里是浏览器默认样式表+你写的一条样式规则） 所以可以正常显示
但是不唯一的标示符 会给DOM操作时带来麻烦 如果使用byID方可能只会获取到第一个ID指向的元素 因为它是唯一的 DOM只找到合适结果就返回了 如果是ID绑定到JS全局环境的浏览器 直接访问ID标示符可能返回所有同名ID的Element数组
由于规范没有明确说重名后会怎么样 这导致浏览器在处理这种情况时 具体实现可能存在差异 特别是老旧版本的
▲派生选择器(后代、子元素、兄弟)
后代选择器 (空格)
-
格式：父元素 子元素{ }
-
父元素和子元素之间至少要有一个空格，可以有很多空格
-
如果同样的子元素有多个，则全部生效
比如
<p>你好<span>小明</span><span>小红</span>那么
p span{ color:blue; }会使得“小明”和“小红”都变蓝色
子元素选择器 >
- 格式：父元素 > 子元素{ }
- 与后代选择器的区别是，后代选择器可以越级；而子元素选择器只能在父元素的往下一级生效
越级：比如
div h1 span相当于“...div...h1...span”，其中的...代表还可以嵌套其他标签所以浏览器对于后代选择器的匹配规则是从右到左
先找span，再找上级有没有h1和div
浏览器的这种查找方法能提高性能。
后续兄弟选择器 ~
- 格式：父元素 ~ 子元素{ }
- 选取父元素之后的所有同级元素
相邻兄弟选择器 +
- 格式：父元素 + 子元素{ }
- 选取父元素之后的第一个同级元素
选择器权重
-
通配符选择器 * 0
-
标签、伪元素选择器 1
-
类 class、属性[ ]、伪类: 选择器 10
-
id选择器 100
-
内联样式（第一种引入方法） 1000
-
!important： 正无穷 【使用方法是放在样式值的后面（带个空格）】
