CSS选择器

一：组合选择器

选择器的作用：方便找到HTML中的元素
1：分组选择器：把多个相同配置的CSS放在同一个组里面，简化CSS书写，中间是 ， 号

#id,.class{
	color:skyblue;
}

2：后代选择器：某一个标签下面的全部子标签（子子孙孙）都能被响应，中间加空格
例：

/* div标签下的所有p标签，子子孙孙都会被响应*/
div p{
	color:skyblue;
}

3：子代选择器：某一个标签下的子标签，中间是 > 号

/*div下面子标签为p标签的元素*/
div>p{
	color:skyblue;
}

4：相邻兄弟选择器：某一个选择器后面相邻的第一个兄弟，必须要挨着，中间是 + 号

div+p{
	color:skyblue;
}

5：普通兄弟选择器：某一个选择器后面的所以兄弟，中间是 ~ 号

/*和div同级的所有p标签*/
div~p{
	color:skyblue;
}

二：属性选择器

/*   选择a标签中带有 target 属性的所有元素*/
a[target] {
	color:skyblue;
 } 

/* 选择a标签中带有 target = _blank 所有元素*/
a[target=_blank] { 
	color:skyblue;
}  

/* 选择 href 属性值中包含 "cn" 子串的每个 <a> 元素*/
a[href = "cn" ] {
	color:skyblue;
 }

 /* 选择 href 属性值中以 "https" 开头的每个 <a> 元素*/
 a[href ^= "https" ] {
	color:skyblue;
 } 

 /* 选择 href 属性值中以 ".com" 结尾的每个 <a> 元素*/
 a[href $= ".com" ] { 
	color:skyblue;
} 

三：伪类选择器

（1）状态伪类：前面是一个冒号 “:”

/* 设置超链接文字显示在网页中的特效 */
a:link{
	color:skyblue;
}

 /* 浏览过这个链接后页面显示不一样的文字效果*/
 a:visited{
	color:blue;
}

 /* 鼠标放置上去后添加的特效 */
 a:hover{
	color:orange;
}

/*按下链接显示的效果*/
a:active{
	color:red;
}

• 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
• 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

（2）结构伪类：一般应用在表单上面

  /*  给第一个div添加特效 */
  div:first-child {
	color:skyblue;
}

 /* 给最后一个div添加特效 */
 div:last-child{
	color:skyblue;
}

 /*从第一个开始数，为第n个div添加特效 */
 div:nth-child(n) {
	color:skyblue;
}

/*从最后一个开始数，为第n个div添加特效 */
div:nth-last-child(n){
	color:skyblue;
}

/*为div中的 奇数行 添加特效  */
div:nth-child(even){
	color:skyblue;
}

/*为div中的 偶数行  添加特效  */
div:nth-child(odd){
	color:skyblue;
}

/* 限定元素，限定的元素中相同的标签不能超过一个，否则不显示特效。*/
/*当只有一个p标签使这个css样式才生效*/
p:only-of-type: {
	color:skyblue;
}

/* 对div下的第二个p标签元素进行设定*/
div > p :nth-of-type(2){
	color:skyblue;
}

/* 对div下的倒数第二个p标签元素进行设定*/
div > p :nth-last-of-type(2){
	color:skyblue;
}

/*   对可用元素进行设定，一般用于表单上*/
input:enabled{
	background-color:skyblue;
}

/*对不可用元素进行设定，一般用于表单上*/
/* 对添加了 disabled 属性的 input框进行设置样式  */
input:disabled{
	background-color:yellow;
} 

/* 对表单中的必选元素进行设置，配合requried使用 */
input:requried {
	background-color:skyblue;
}  

/*对表单中的可选元素进行设置*/
input:optional {
	background-color:skyblue;
} 

/*对表单中要强制输入的文本框进行设置，配合requried 使用*/
input:valid {
	background-color:skyblue;
}

/*对表单中不强制输入的文本框进行设置 */
input:invalid {
	background-color:skyblue;
}

四：伪元素选择器 前面是两个冒号“::”

定义：伪元素也是标签，是浏览器自动帮我们添加进网页的，无需手动写
写法：标签名或类名或id名后面加 ::
例：给这段文字内容的第一个字添加颜色和改变字体大小

.p1::first-letter {
	color: red;
	font-size: 30px ;
}

1：p::first-letter /* 向文本的第一个字母添加特殊样式
2：p::first-line /* 向文本的首行添加特殊样式
3：p::before /* 在元素之前添加内容 /
4：p::after / 在元素之前添加内容 /
5：::selection { color:red;} / 选择文本时 改变选中文本的颜色 */

选择器的优先级：

优先级从低----> 高：
浏览器自定义–>通配符选择器–>标签选择器–>类选择器–>属性选择器–>伪类选择器–>ID选择器–>内联样式–>！important
！important / 在选择器后面加上 ！important 那么这个选择器的优先级就是最高的。*