CSS基础语法(二) CSS的9种选择器

1.类选择器

根据HTML标签的class属性选择样式应用的属性

 .类值{ … }

2.ID选择器

根据HTML标签的ID属性选择样式应用的元素

 #id值{ … }

 3.标签选择器

根据HTML标签选择样式应用的属性

标签名{ … }

4.子选择器

.food>li{

    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新增的属性选择器