CSS选择器

选择器

/**
 1. 标签选择器
  	标签名 {
		属性1:属性值;
		属性2:属性值;
	}
 */
div {
	width: 100px;
	height
}

/**
 2. 类选择器
  	.类名 {
		属性1:属性值;
		属性2:属性值;
	}
 */
.nav {
	width: 100px;
	height
}

/**
 3. id选择器
  	#id {
		属性1:属性值;
		属性2:属性值;
	}
 */
#title {
	width: 100px;
	height
}

/**
 4. 通配符选择器
  	* {
		属性1:属性值;
		属性2:属性值;
	}
 */
* {
	width: 100px;
	height
}

/**
 5. 伪类选择器
  	:类名 {
		属性1:属性值;
		属性2:属性值;
	}
	常用伪类选择器有：
		链接伪类选择器：(a标签的顺序：link -> visited -> hover -> active，如果编写顺序不对就会导致样式失效，但是可以缺少)
			a. link     未访问的链接
		 	b. visited	已访问的链接
		 	c. hover	鼠标移动到链接上
		 	d. active	选定的链接
		 结构伪类选择器：
		 	a. first-child  			选择第一个列
			b. last-child 				选择最后一个列
			c. nth-child(n)				选择第n列
			d. nth-child(even)			选择所有偶数列
			e. nth-child(odd)			选择所有的奇数列
			f. nth-child(n)				选择所有的列（n从0开始）
			g. nth-child(2n)			选择所有的偶数列
			h. nth-child(2n+1)			选择所有的奇数列
			i. nth-last-child(even)		从最后一个开始数，选择所有的偶数列
		目标伪类选择器：
			a. target					
 */
 
 /**
 6. 交集选择器
  	标签名.类名 {
		属性1:属性值;
		属性2:属性值;
	}
 */
div.title {
	width: 100px;
	height
}

 /**
 7. 并集选择器
  	标签名,.类名,#id名 {
		属性1:属性值;
		属性2:属性值;
	}
 */
h1,p,div{
	color: red;
}

 /**
 8. 后代选择器
  	父级选择器名称 子一级选择器名称  子二级选择器名称 {
		属性1:属性值;
		属性2:属性值;
	}
 */
.nav ul li{
	color: red;
}

 /**
 9. 子元素选择器（注意：子元素选择器必须与后代选择器一起使用，否则单独使用子元素选择器会变成后代选择器的作用）
  	父级选择器名称 > 直属子级选择器名称 {
		属性1:属性值;
		属性2:属性值;
	}
 */
.nav > li{
	color: red;
}

 /**
 10. 属性选择器
  		a. E[attr] 			存在attr属性即可
  		b. E[attr=val] 		属性值完全等于val
  		c. E[attr*=val] 	属性值包含val并且在任意位置
  		d. E[attr^=val] 	属性值以val打头
  		e. E[attr$=val] 	属性值以val结尾
 */
a[title] {
	color:red;
}

 /**
 11.  伪元素选择器 before 和 after
  	  before 和 after之所以被称为伪元素，因为他们并不是html里面真正所有的元素，但是拥有和html元素相同的属性,相当于在指定的盒子中加了一个行内元素，所以如果想要设置宽高，需要先进行元素转换
 */
div::before {
	content: "this ";
	border: 1px solid red;
	display:inline-block;
	width:100px;
	height:100px;
}
div::after {
	content: " a pan";
	border: 1px solid red;
}

权重

选择器优先级

选择器	权重
标签选择器	0001
类选择器，伪类选择器，属性选择器	0010
id选择器	0100
行内样式表	1000
！important	∞无穷大

• 外部样式和内部样式，先比较选择器的优先级，在选择器优先级相同的情况下，内部样式权重更高
• 都属于内部样式或外部样式，选择器优先级相同的，以文档加载顺序最后一个样式有效

权重的叠加

例如：

div ul li	0 0 0 3
.nav ul li	0 0 1 2
a:hover	0 0 1 0
.nav a	0 0 1 1
#nav a	0 1 0 1

注意：

• 权重的数位之间是没有进制的，级别之间不可超越，比如0 0 0 5 + 0 0 0 5 = 0 0 0 1 0而不是0 0 1 0，所以不会存在10个标签选择器跟类选择器的权重一样的情况
• 子类标签继承父类标签的样式，继承过来的权重为0 0 0 0