重学前端学习笔记---css规则

快来打我* 2022-02-28 12:12 356阅读 0赞

1、选择器的基本意义就是：根据一些特征，选中元素树上的一批元素

2、选择器分类

*  简单选择器：针对某一特征判断是否选中元素
 *  复合选择器：多个简单选择器
 *  复杂选择器，由空格，“>”,"~","+","||"等符号连接的复合选择器，根据父元素或者当前元素检查单个元素
 *  选择器列表：，由逗号分隔的复杂选择器。

（一）简单选择器

*  类型（标签）选择器：根据一个元素的标签名来选择元素
 *  全体选择器（\*）：可以选择任意元素
 *  id选择器：针对特定的属性的选择器，“\#”后接id名
 *  class选择器：针对特定的属性的选择器，"."后接class名，
 *  属性选择器
 *  伪类选择器

1，标签选择器和通配符

div\{\}

这就是标签（类型选择器）

需要注意的是，当有多个命名空间的时候，选择一个标签选择器，需要在前面写上命名空间，如

svg|a\{\}

html|a\{\}

2、id选择器和class选择器：选择特定的属性的元素

3、属性选择器

*  \[attr\]，选择拥有此属性的元素，无论属性值是什么，都会被选中
 *  \[attr=val\]，精确匹配，选择属性值为指定值的元素
 *  \[attr~=val\]，多种匹配，选择一个元素是否是若干个值之一，这里的val不是一个单一的值，是一组用空格分隔开的序列
 *  \[attr|=val\]，开头匹配，选择，一个元素的属性值是以指定值开头，这个值是一个完整的词语

\[class|=special\]\{

color: red;

*  \[attr^=val\]匹配属性值以指定值开头，可以不是一个完整的单词

\[class^=spe\]\{

color: green;

*  \[attr$=val\]匹配属性值以指定值结尾的元素
 *  \[attr\*=val\]匹配属性值中包含指定值的元素

3、伪类选择器

（1）树形结构关系伪类选择器

*  :root伪类，表示树的根元素
 *  剩下的在之前的章节有写，不赘述了。

（2）链接与行为伪类选择器

（3）逻辑伪类选择器

:not

:not(:hover)\{

上面的代码表示选择没有被鼠标悬停的元素

尽量使用id和class选择器。

（二）选择器的组合

1、选择器列表中，连接方式的优先级

第一优先级：无连接符号

第二连接符：“空格”，“~”，“+”，“>”，“||”

第三连接符：逗号“,”

如下面的选择器

.c,.a>.b.d\{\}

它的结构如下

![20190325190041677.png][]

这里的复合选择器就是.b.d，表示且，也即是选择同时拥有.b和.d的元素。

复杂选择器是针对节点关系的，有以下五种，“空格”，“~”，“+”，“>”，“||”

（三）选择器的优先级

1、选择器的优先级顺序

（1）!important

（2）行内样式

（3）id选择器

（4）class选择器

（5）标签选择器

（6）通配符\*

（7）浏览器自由定义和继承

2、复杂选择器的优先级

复杂选择器的优先级也就是说，当有多处地方的代码指向同一个元素的时候，选择哪一个复杂选择器里面的样式。

css标准用一个三元组(a,b,c)来构成一个复杂选择器的优先级。

其中，id选择器的数目记为a，

伪类选择器和class选择器的数目记为b，

伪元素选择器和标签选择器的数目记为c

specificty = base\*base\*a+base\*b+base\*c

也即是说

*  id个数多的优先级高
 *  id个数相同的，class个数多的优先级高
 *  id和class个数相同的，元素的个数多的优先级高。
 *  同一个优先级的，后面的会覆盖前面的样式。

3、根据id来选择单个元素，根据class和class选择成组元素，根据标签选择器来确定页面的格式。

（四）伪元素

*  ::first-line，选择元素的第一行，排版后显示的第一行
 *  ::first-letter，选择元素的第一个字母
 *  ::before
 *  ::after

（1）下面是first-line和first-letter能实现的样式

::first-line

*  font相关
 *  color相关
 *  background-color相关
 *  word-spacing
 *  letter-spacing
 *  text-decoration
 *  text-transform
 *  line-height

::first-letter

*  font相关
 *  color相关
 *  background-color相关
 *  word-spacing
 *  letter-spacing
 *  text-decoration
 *  text-transform
 *  line-heigh
 *  float
 *  vertical-align
 *  盒模型相关：margin，padding、border

（2）::before,::after

这两个元素跟哈桑面不同的是，它不是在已有的内容套上一个元素，而是真正的无中生有，造出一个元素，这两个都需要指定content属性才会生效。

[20190325190041677.png]: /images/20220228/fb418d215f8348cfbfbcb5a40e178fe4.png