css选择器

样式的三种链接方式
优先级：行内样式>外部样式=内部样式

选择器语法：
selector {
属性：值;
属性：值；
…
}

基本选择器

元素选择器：div、p、span…

特例： * 选中所有元素（整个页面全部覆盖）

属性选择器：对元素选择器更精确地限制 E[attr]{ }

如：div[id]有id属性的div元素
div[id=xx]有id属性，并且id属性值等于xx的div元素
div[id$=xx]有id属性，并且id属性值以xx结尾的div元素
div[id^=xx]有id属性，并且id属性值以xx开头的div元素
div[id*=xx]有id属性，并且id属性值包含xx的div元素

id选择器：#id值

#aaxxcc {
		background: red;
		color: purple;
	} 
	 div#aaxxcc{
	}

class选择器：.class值{ }

特例结合选择器 : 标签.class { }

包含选择器 selector1 selector2{ } 强调包含

div p {
	background: red;
	color: purple;
}

子选择器 selector1>selector2{ } 强调父子关系

div>p {
	background: red;
	color: purple；
} 

兄弟选择器 selector1~selector2{ } 向下找

 .php~.java {
	background: red;
	color: purple;
} 

找所有弟弟 selector2为*

 .php~*{
	background: red,
	color: purple;
}

选择器组合 selector1,selector2,selector3…{ }*

p, div,span {
	background: red;
	color: purple;    
} 

伪元素选择器

首字母 ::first-letter 块级元素(竖着布局的元素)

div::first-letter {
	font-size: 40px;
	color: purple;
}

首行 ::first-line 块级元素(竖着布局的元素)

div {
	//单词裂开
	word-break: break-all;
}
div::first-line {
	font-size: 40px;
	color: purple;
}

在前边追加 ::before { }

div::before {
	content: "111";
	background: red;
	font-size: 40px;
	color: yellow;
} 

在元素后边追加 ::after { }

div::after { }
	content: "111",
	background: red;
	font-size: 40px;
	color: yellow;
}

伪类选择器

结构性伪类选择器

:nth-child(n)，n可以是数字，如果是数字的话n从1开始;n可以是单词 odd(奇数)even(偶数);n可以是表达式 比如 2n+1,3n+2 ；n从0开始找第一个 :nth-child(1) :first-child
找最后一个:nth-last-child(1) :last-child
:nth-last-child(n)倒着数
只认数字，如果类型恰好符合，则找到

:nth-of-type(n)，n可以是数字，如果是数字的话n从1开始;n可以是单词 odd(奇数)even(偶数);n可以是表达式 比如 2n+1,3n+2 ；n从0
开始找第一个:nth-of-type(1) :first-of-type
找最后一个 :nth-last-of-type(1) :last-of-type
:nth-last-of-type(n)倒着数
既认数字也认类型，找同类型下的第n个

UI状态伪类选择器

:hover鼠标悬停状态

ul li:hover {
	font-size: 40px;
	color: purple;
}

:focus焦点状态

input:focus {
	background: blue;
}

:checked选中状态

input:checked {
	box-shadow:2px 2px 3px red;
} 

其他伪类选择器

not()排除

ul li:not(.java):not(.php){
	font-size: 40px;
	color: purple;
	background: goldenrod;
}

css选择器优先级

1、选择器写的越长(越准确)，优先级越高
2、优先级 id选择器>class选择器>元素选择器
3、同级别长度下，css按照代码顺序执行，后边的代码把前边的覆盖掉
4、终极规则:以上规则适用于绝大部分场景，特殊场景不适用时自行测试