css选择器

发布时间 2023-04-19 10:11:37作者: 挖洞404

1、id选择器

#id_name{}
  • 前缀#,后接选中html元素的id属性值
  • 选取单个

2、class选择器

.class_name{}
  • 前缀.,后接选中html元素的class属性值
  • 可以选择多个
  • class_name的第一个字符不能是数字

3、标签/元素选择器

label_name{}
  • 直接使用标签名称,比如p,h1
  • 可以选择多个

4、属性选择器

[属性 比较符 值]
[attr[~=][|=][^=][$=][*=]value]

5、包含选择器

选择器a 选择器b{}
  • 基于空格,选择器b在选择器a中的被选中,在之外的不选

6、子级选择器

选择器a>选择器b{}
  • 基于>字符,选择器b必须是选择器a的直接子代,或者说直接被包含时选中

7、兄弟选择器

选择器a~选择器b{}
  • 基于~字符,选择器b与选择器a同级,且在其之后时被选中
  • 可以选中多个

8、通用选择器

*{}
  • 选择全部元素

9、相邻选择器

选择器a+选择器b{}
  • 和兄弟选取器类似,但只选中一个

10、伪类

a:hover{}
  • 一般是链接的状态选择时使用

11、分组选择器

选择器a,选择器b{}
  • 表示选择了a,也选择了b
  • 为了减少代码,应该尽量使用分组选择器

12、css优先规则

  •  A 选择器都有一个权值,权值越大越优先;
  •  B 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
  •  C 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;
  •  D 继承的CSS 样式不如后来指定的CSS 样式;
  •  E 在同一组属性设置中标有“!important”规则的优先级最大;
内联>内部>外部
id>class=伪类选择器=属性选择器>标签=伪元素选择器

13、!important 规则例外

当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯,因为它改变了你样式表本来的级联规则,从而使其难以调试。

一些经验法则:

  • Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
  • Only 只在需要覆盖全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定页面中使用 !important
  • Never 永远不要在全站范围的 css 上使用 !important
  • Never 永远不要在你的插件中使用 !important