1.类选择器
根据HTML标签的class属性选择样式应用的属性
.类值{ … }
2.ID选择器
根据HTML标签的ID属性选择样式应用的元素
#id值{ … }
3.标签选择器
根据HTML标签选择样式应用的属性
标签名{ … }
4.子选择器
.food>li{
扫描二维码关注公众号，回复：
4301185 查看本文章
border:1px solid red;
}
5.包含选择器
.first span{color:red;}
6.通用选择器
* {color:red;}
7.伪类选择器
1、静态伪类(只应用于超链接)
[注意]visited伪类只能设置字体颜色、边框颜色、outline颜色的样式
a:link{color: red;} 设置超链接在未被访问前的样式。
a:visited{color: green;} 设置超链接在其链接地址已被访问过时的样式
2、动态伪类(可应用于任何元素)
设置超链接在其鼠标悬停时的样式。
a:hover{
cursor:pointer;
color:red;
}
设置超链接在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
a:active{
cursor:pointer
color:red;
}
拥有焦点
input:focus{
color:red;
}
3.UI元素伪类
[注意]input和:和enabled之间都不可以有空格
input:enabled{color: red} 可用状态
input:disabled{color: red} 不可用状态
input:checked{color: red} 选中状态
4.结构伪类
[注意]n可以是整数(从1开始)，也可以是公式，也可以是关键字(even、odd)
.parent:first-child 父元素的第一个子元素,与nth-child(1)等同 .parent:last-child 父元素的最后一个子元素,与nth-last-child(1)等同 .parent:nth-child(n) 选择父元素的第n个子元素
5.伪类的结合
[注意]与顺序无关
a:hover:first-child{color: black;}
8.伪元素选择器
1、:first-letter 设置首字母样式,只能与块级元素关联;
p:first-letter {color: red;}
2、:first-line 设置首行样式,只能与块级元素关联；
p:first-line{color: red;}
3、:before 在元素内容前面插入内容
默认这个伪元素是行内元素，继承元素可继承的属性；所有元素都必须放在出现该伪元素的选择器的最后面。若写成 p:before em 就是不合法的
p:before{content:"text"}
4、:after 在元素内容后面插入内容
默认这个伪元素是行内元素，继承元素可继承的属性
p:after{content:"text"}
9.属性选择器
属性选择器根据元素的属性及属性值来选择元素
1、简单属性选择器
a[href][title]{color: red;}
#div[class]{color: red;}
.box[id]{color: red;}
img[alt]{color: red;}
[class]{color: red;}
2、具体属性选择器
a[href="http://www.baidu.com"][title="baidu"] {color: red;}
[id="tox"]{color: red;}
3、部分属性选择器
[class ^="b"] 选择class属性值以"b"开头的所有元素 [class $="b"] 选择class属性值以"b"结尾的所有元素 [class *="b"] 选择class属性值包含"b"的所有元素
上面三个属于正则匹配，是CSS3新增的属性选择器