06css选择器

css选择器

基础选择器

1.通配选择器

*表示通配符,它可以匹配任何标签

*{
    css内容
}

2.标签名选择器

E{css内容}

给所有标签名为E的元素设置css样式

3.类名选择器

.类型 {css内容}

使用的时候需要在 标签上绑定 class=“类名” 如果有多个类名,使用 空格 隔开,类名最好不要超过5个

4.id选择器

#id名 {css内容}

在一个页面当中,id是唯一的,只能绑定在一个标签上,也就是一个页面中没有同名的id

5.群组选择器

如果多种选择器所表达的css内容是相同的,则可以把他们写成群组选择器

.wp,#abc,div{ css内容 }

层次选择器

1.后代选择器

E M { css内容 }

通过E选择器 设置 E 中的 M选择器 的css内容,M可以是E的子级,也可以是E的后代中的某一个选择器

2.父子选择器

E>M {css内容}

通过E选择器找到 E选择器的子级M选择器,设置css内容

3.兄弟选择器

E~M {css内容}

通过E选择器找到 该元素之后所有选择器名为 M 的兄弟元素,并设置css样式

4.相邻兄弟选择器

E+M {css内容}

通过E选择器找到 该元素之后第一个兄弟元素M,并且对M设置css样式

伪类选择器

a的伪类

伪类,是css系统创建好的内部的类,用来对标签的某一个时机设置样式

1. link:初始时候的状态
2. visited：点击之后的状态
3. hover：鼠标悬浮时候的状态
4. active:鼠标按下不松手时候的状态

顺序是 l -> v -> h -> a

ie8以后，任何标签都可以添加:hover 伪类

可以根据hover 触发 元素本身，以及通过元素能找到的元素 的变化

选择器的优先级

什么时候需要考虑选择器的优先级？

不同的选择器，同时作用于同一个标签元素，并且他们具有相同的css属性设置，对该css属性设置了不同的值

选择器优先级的强弱顺序：

序号	选择器	优先级
1	！ important	100000
2	行间样式，在标签上，添加 style 属性	10000
3	id选择器	1000
4	类名选择器，伪类选择器，属性选择器	100
5	元素（标签名）选择器，伪元素选择器	10
6	通配符选择器 *	1
7	系统默认提供的css属性	0

假设后面的数字是权重的值，那么在比较的时候，只需要把选择器的值相加，然后比较大小既是权重的大小

如果他们的值相同，后来者居上