CSS选择器

基本选择器

通配符选择器

所有标签

*{font-family:"宋体";}

类型（标签）选择器

使用标签的名字作为选择器

td{color:#F00;}

ID选择器

选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
每个html标签的id都是不一样的

#info{
color: red;
}

类选择器

选择器可以为标有特定class 的 HTML 元素指定特定的样式。
注意：也可以在前面添加标签名字，如div.className

.info{
color: red;
}

符号选择器

逗号选择器

将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开

#info,.info{
color: red;
}

后代选择器（空格选择器）

语法：E F {规则}
前面E为祖先元素，Ｆ为后代元素，所表达的意思就是选择了Ｅ元素的所有后代Ｆ元素，中间用空格隔开

p span{
color: red;
}

子元素选择器（>选择器）

语法：(E>F)
子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的子元素而以

ul > li {color: yellow;}

相邻兄弟元素选择器（+选择器）

语法：(E + F)
EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻

p+span{
color: red;
}

通用兄弟选择器（~选择器）

语法：（Ｅ 〜 Ｆ）
E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择
所有Ｅ元素后面的Ｆ元素。

p~span{
color: red;
}

属性选择器

语法：E[attr]{规则}

只使用属性名，但没有确定任何属性值；

[class]{
color: red;
}

语法：Ｅ[attr=“value”]{规则}

E[attr=“value”]是指定了属性值“value”

[title="test"]
{
color:red;
}

E[attr~=“value”]{规则}

只要属性值中有一个value相匹配就可以选中该元素

[class~="hellochina"]{
color: red;
}

E[attr^=“value”]{规则}

选择attr属性值以“value”开头的所有元素

[class^="hello"]{
color: red;
}

E[attr$=“value”]

{规则}
选择元素attr属性，并且他的属性值是以value结尾的

[id$="world"]{
color: red;
}

E[attr*=“value”]{规则}

所选择的属性，其属性值中有这个"value"值都将被选中

[id*="w"]{
color: red;
}

伪类选择器

动态伪类

:linek初始颜色颜色。
:visited用于访问过颜色。
:hover用于当用户把鼠标移动到元素上面时的效果；
:active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
以上四种用于超级连接样式时顺序不能发生变化

a:link{
color: red;
}
a:visited{
color: aqua;
}
a:hover{
color: yellow;
}
a:active{
color: #FFA500;
}

状态伪类

:enabled :disabled :checked
主要是针对于HTML中的Form元素操作

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
input[type]:checked{width：15px; height:15px;}

特殊选择器

1、:first-child 作为父标签的第一个子标签
2、:last-child 作为父标签的最后一个子标签
3、:nth-child(n) 作为父标签的第N个子标签 数字、even偶数、odd奇数
4、:nth-last-child(n) 作为父标签的倒数第N个子标签 数字、even偶数、odd奇数
5、:only-child 作为父标签的唯一一个子标签
6、:nth-of-type() 只参考当前种类
7、:nth-last-of-type() 只参考当前种类
8、:first-of-type和
9、:last-of-type 只参考当前种类
10、:only-of-type 只参考当前种类
11、input:not([type=“submit”]) {border: 1px solid red;}
12、empty 没有子标签，没有内容