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

 

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{}

 

它的结构如下

这里的复合选择器就是.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属性才会生效。