每日进步一小点-css

主题列表：css选择器相关问题

常用css选择器

1、通配符选择器 （*）:一般不怎么使用;

2、Id选择器 （id = "id-name"）:具有只能有一个，id-name不能一样

3、类选择器 （class = "class-name"）:可以有多个相同的class-name

4、元素标签选择器 （span ， div等）:使用元素标签名称

5、后代选择器

father child ;

father > child (父元素下面所有的子元素) ;

element + element(相邻兄弟选择器,紧接在element之后的element元素) ;

element1 ~ element2 (一般兄弟选择器,选择前面有element1的所有element2元素)

6、伪类选择器

:root(文档根伪类选择器) ;

:nth-child(n) : 孩子选择器，例如:nth-child(1) ;

nth-of-type(n): 同类型的第n个元素 ;

element:first-child : 父元素的第一个子元素 ;

element:last-child:父元素最后一个子元素 ;

a:link(未被访问的) ;

a:active(正在被点击的) ;

a:hover(鼠标位于其上的) ;

a:visited (已经被点击了的))

:focus(用于选取获得焦点的元素)

7、伪元素选择器

::before

::after

::first-line

::first-letter

选择器优先级问题

优先级问题： ！important > 行内样式 > id选择器 > 类，伪类选择器 > 元素，伪元素选择器 > 继承（有一些css样式是继承的：比如font-family那些之类的）> 通配符（*）

优先级是由A,B,C,D来进行比较 如果存在内联样式 A = 1 , 否则为0 ;

B的值就等于Id选择器出现的次数；

C的值等于类选择器，伪类选择器，属性选择器出现的次数

D的值就等于元素选择器，伪元素选择器出现的次数;

比较规则:谁大谁胜出 ； 如果一样，后面覆盖前面;