CSS选择器

基本选择器

ID选择器 --> #p1

• 在标签属性中设置id，用id关联样式

标签选择器 --> div

• 所有标签统一选择
  

类选择器 --> .c1

• 有某个类的所有标签
  
• 有某个类的某个标签
  

通用选择器 --> *

• 所有内容选择器
  

组合选择器

子子孙孙选择器（后代选择器） --> div p

子子孙孙标签

儿子选择器 --> div>p

• 找儿子标签，嵌套标签中的下一个
  

毗邻选择器(紧挨着下面的标签) --> div+p

• 毗邻的下面的标签
  

弟弟选择器(同级下面所有的标签) --> div~p

• 弟弟选择器，同级完往下面找
  

属性选择器

有某个属性的标签 --> div[title]

• 有此属性的所有标签
  

有属性并且属性值等于我给定的值 --> div[title=‘hello’]

• 有此属性值的标签
  
• 不常用的用法
  

分组和嵌套

分组应用于多个选择器找到的标签应用相同的样式时，为了避免重复写到一起 div, p {color: red}

• 把相同样式的多项选择分为一组，节省代码
  

将基本选择器任意嵌套组合使用 .c1>p

	如#d1~p
	#d1>.c1
	.c1.c2       在标签中既有c1类，也有.c2类

• 嵌套选择器
  

伪类选择器

根据标签不同的状态给状态设置不同样式。

伪元素选择器

通过CSS操作HTML内容
类似装饰器。。。不影响文档本身内容

选择器的优先级

当选择器相同的时候

由于html文件是从上到下执行，所以当选择器相同时，以最后一个为准。

当选择器不同的时候

• 内联样式（1000） > id选择器 （100） > class选择器（10）> 元素选择器（1）> 继承样式
• 不讲道理的 !important