雨落辰潇-文档站

Appearance

CSS3 选择器 ​

基本选择器（6个） ​

① 标签名选择器 ​

css
标签名 {}

② 类名选择器 ​

css
.类名 {}

③ ID 选择器 ​

css
#ID名 {}

④ 全局选择器 ​

css
* {}

⑤ 交集选择器（选择器的组合形式） ​

css
选择器1选择器2 { } 按照顺序进行组合 交集有括号处理

⑥ 并集选择器（选择器的组合形式） ​

css
选择器1，选择器2 {} 按照顺序分析，交集当作有括号处理

层级选择器（4个） ​

① 后代元素选择器 ​

css
选择器1 选择器2 {}

② 子元素选择器 ​

css
选择器1 > 选择器2 {}

③ 相邻兄弟元素选择器 ​

css
选择器1 + 选择器2 {}
选择紧邻在后面的兄弟元素，仅仅是紧邻的元素

④ 通用兄弟元素选择器 ​

css
选择器1 ~ 选择器2 {}
选择后面的兄弟元素，只要包含了元素都可以选择上

属性选择器（5个） ​

css
[attr]			  选择包含属性名attr的元素
[attr=“val”]  	  选择属性attr的值是val的元素
[attr^="val"]     选择属性attr的值以val开头的元素
[attr$="val"]     选择属性attr的值以val结尾的元素
[attr*="val"]     选择属性attr的值包含val的元素

属性选择器如果与其他选择器进行交集组合，通常写在其他选择器的后面

css
img[alt] {}
.item[title] {}

伪类选择器（23个） ​

① 动态伪类选择器（5个） ​

css
:link
:visited
:hover
:active	
:focus		选择获取到焦点的元素

② 目标伪类选择器（1个） ​

css
:target		选择到当前锚点所对应的元素

③ 语言伪类选择器 (1个，了解) ​

css
:lang(语言)
css
问答： :lang(zh-CN) 和 [lang="zh-CN"] 什么区别？
答案： :lang(zh-CN） 所选择到的元素中可以自己不设置 lang 属性，会继承祖先元素的语言设置
	  [lang="zh-CN"] 所选择到元素，必须元素自身设置了 lang 属性。

④ UI元素伪类选择器（3个） ​

css
:enabled		可用的表单控件
:disabled		不可用的表单控件
:checked		被选中的表单控件（单选框、复选框、下拉选项）

⑤ 结构伪类选择器（12个） ​

当作条件来理解，条件1条件2等等

css
:frist-child			在兄弟元素中排名第一 是不是兄弟不是根据名字决定的，而是根据位置决定的
:last-child				在兄弟元素汇总的排名最后
:nth-child(n)			在兄弟元素中排名第n个
:nth-last-child(n)		在兄弟元素中排名倒数第n个
:only-child				没有兄弟元素

:first-of-type			在同标签名的兄弟元素中排名第一
:last-of-type			在同标签名的兄弟元素中排名最后
:nth-of-type(n)			在同标签名的兄弟元素中排名第n个
:nth-last-of-type(n)	在同标签名的兄弟元素中排名倒数第n个
:only-of-type			没有同标签名的兄弟元素

:root					根元素
:empty					没有文本内容也没有后代元素
css
:nth-child(odd)        奇数行
:nth-child(even)       偶数行
:nth-of-type(2n-1)	   奇数行
:nth-of-type(2n)	   偶数行
:nth-of-type(3n)	   排号是3的倍数

⑥ 否定伪类选择器（1个） ​

css
:not(选择器) 			 选择不满足括号中选择器的元素

伪元素选择器（6个） ​

css
::first-letter / :first-letter	选择元素中的第一个文字
::first-line / :first-line		选择元素中的第一行文字
::before / :before				给元素动态添加子元素，放在第一个位置
::after / :after				给元素动态添加子元素，放在最后一个位置
::placeholder					选择输入框、文本域中placeholder中的文字
::selction						选择被鼠标选中的文字

::before和::after 选择器后面的声明块中必须设置 content 属性！

选择器的优先级（权重） ​

css
1. ID选择器 > 类选择器、伪类选择器、属性选择器 > 标签名选择器、伪元素选择器 > 全局选择器
2. !important > 行内式 > 任何选择器
   注意：!important 可以无限提高某个属性的权重

https://flukeout.github.io/

权重的等级与权值 ​

行内样式（1000）> ID选择器（100）> 类，属性选择器和伪类选择器（10）> 元素选择器和伪元素选择器（1）>通配符选择器（0）

CSS权重规则 ​

\1) 当多个选择器发生冲突时，会选择权重高的选择器来显示，权重越高越优先显示

\2) 比较时需要将多个选择器的权重进行相加在进行比较，如果权重一样，后面的会覆盖前面的样式

\3) 权重相加不可能超过他的最大数量级，例如无论多少个元素组成的选择器，都没有一个class选择器权重高

\4) 可以在样式后边添加一个！important ，这样该样式将会拥有最大的权重，其他样式都不能将其覆盖（注意：尽量不要使用！important）

Copyright © 2024 雨落辰潇