前端学习-css选择器

css选择器

选择器	权重
!important	无穷大【谨慎使用】
行内样式	1，0，0，0
ID选择器	0，1，0，0
类选择器	0，0，1，0
标签选择器	0，0，0，1
通配符选择器	0，0，0，0
继承	最低

权重排序： !important > 行内样式 > ID选择器 > 类选择器【属性选择器|伪类选择器】 > 标签选择器【伪元素选择器】 > 通配符选择器

一、基础选择器

• 通配符选择器(*)
• 标签选择器
• 类选择器
• ID选择器

二、复合选择器

2.1 后代选择器(空格分隔)

/* 选择ul内的所有li */
ul li {          
    width: 100px;
    height: 50px;
}

2.2 兄弟选择器（+或~分隔）

p+h5：选择p之后且和p标签相邻 ，【某元素后的相邻兄弟元素】
p~h5： 选择p之后所有p标签 ，【某元素后的所有兄弟元素】

p+h5 {
	color: pink;
}
p~h5 {
	color: pink;
}

2.3 子代选择器（>分隔）

/* 选择ul内的最近一级的li【即亲儿子】 */
ul>li {
    width: 100px;
    height: 50px;
}

2.4 并集选择器（,分隔）

/* 选择p和h2，表示或 */
p,h2 {
    color: pink;
}

2.5 交集选择器（无分隔）

注意： 第一个必须是标签选择器，第二个必须是类选择器或ID选择器

/* 选择div且类名为nav，表示且 */
div.nav {
    background-color: pink;
}

2.6 伪类选择器（:分隔）

伪类选择器主要分为

• 链接伪类：(focus【用于有光标，一般为表单元素】、hover、visited、link、active)
• 结构伪类(first-chiid、nth-of-type()、last-child)
• 状态伪类(checked、disabled)
• 否定伪类(not())

2.7 属性选择器([]包含)

• E[attr] ： 选择带有attr属性的E元素
• E[attr=value]： 选择带有attr= value的E元素
• E[attr~=value]: 选择attr属性值中包含value并以空格分隔的E元素
• E[attr*=value]: 选择attr属性值中包含value的E元素
  空格分隔：在第一个位置时后面接空格，在最后一个位置时前面有空格，在中间位置时左右都有空格
• E[attr|=value]: 选择attr属性值中以value开头的E元素【必须是完整或单独的单词】
  如： 为value 或者value-形式
• E[attr^=value]: 选择attr属性值中以value开头的E元素【不必是完整的单词】
• E[attr$=value]: 选择attr属性值中以value结尾的E元素

三、复合选择器的权重计算注意事项

1、复合选择器的权重由各基础选择器的权重累加【并集选择器各算各的，逗号分隔】
2、伪元素选择器不参加权重计算(创建DOM元素之外的虚拟元素，权重为1，一般不会实际中不会涉及权重累计问题)，【个人理解】
3、伪类选择器的权重为10(对DOM中的元素添加效果，权重为10，一般只有结构伪类会涉及权重累计问题)【个人理解】
4、权重高的样式会覆盖权重低的【优先级】；权重相同时，位于后面的样式生效【层叠性】