一、上下文选择器
1.标签选择器
<style>
h1 {font-size: 16px;}
p {color:red;}
</style>
代码中的h1和p就是选择器,他们是选择器里面最常用的一种,叫做标签选择器。我们可以直接通过标签元素来指定需要添加样式的位置。
如果我们需要为多个标签添加同一种样式时,我们可以把它们组合在一起,每个标签选择器用“,”隔开,如下:
<style>
h1,h2,h3 {
font-weight: bold;
color: blue;
}
</style>
这样的组合我们叫它分组选择器。
2.后代组合选择器
当我们想为下面的article和aside的段落文本分别设置不同的字号时,我们就可以用到后代选择器了,它们是在祖先元素和后代元素之间加了一个空格,如代码所示:
<style>
article p {
font-size: 12px;
}
aside p {
font-size: 14px;
}
</style>
后代选择器有一个问题就是,祖先元素选择的后代元素都会带有样式,但是我们有时候并不需要所有的标签都带有样式,这个时候我们就要用到其他的选择器了。
3.子选择器
我们可以用DOM中的父子元素关系来选择,也就是子选择器,两个元素中间用“>”来连接,如代码所示:
<style>
article>p {
font-size: 12px;
}
</style>
同胞选择器
我们也可以通过同胞关系来选择,叫做同胞选择器或者是兄弟选择器,这就意味着选择器的标签元素需要具有同一个父元素,它们之间用“+”来连接,例子:
<style>
h2+p {
font-size: 12px;
}
</style>
并且需要注意的是:p标签必须是紧跟在h2标签的后面。
4.一般同胞选择器
一般同胞选择器中间用“~”连接。
<style>
h2~p {
font-size: 12px;
}
</style>
一般同胞选择器和同胞选择器的区别就是,p标签不一定是紧跟在h2标签的后面。
5.通用选择器
通用选择器是使用通配符“ * ”,它可以匹配任何元素。比如:
*{
color: green;
}
它会导致所有文本和边框都变成绿色。这里有个小知识:
color属性设定的是前景色。前景色既影响文本也影响边框,但通常我们只用它设定文本颜色。
我们也可以这样使用通用选择器:
p* {
color: green;
}
这样只会把p包含的所有元素的文本变成红色。
通用选择器还有一个有意思的用法,就是可以用它构成一个非子选择器,比如:
section*a {
font-size: 1.3em;
}
代码所表示的是,所有section的孙子元素,而非子元素的a标签都会被选中。这个从逻辑上来说也好理解,左边的section代表通配符的父元素,右边的a代表通配符的子元素,而*就是所有中间元素的集合。
以上就是通过DOM的层次结构的“上下文”关系来表示的选择器。
二、id和类选择器
id和类选择器是我们在CSS中常用的选择器,它们可以更精确的定位到我们要添加样式的标签位置。只要在HTML标记中为元素添加id和class属性,就可以通过id和类选择器直接选择。
可以给id和class属性设定任何值,但不能以数字或特殊符号开头。
1.类选择器
类选择器前面要加一个“ . ” ,后面跟着类名,如下:
<style>
p {
font-family: helvetica,sans-serif;
}
.specialtext {
font-style: italic;
}
</style>
2、标签带类选择器
当然,需要更精确的也可以这样写:
<style>
p {
font-family: helvetica,sans-serif;
}
.specialtext {
font-style: italic;
}
p.specialtext {
color: red;
}
p.specialtext span{
font-weight: bold;
}
</style>
第三个样式只选择带.specialtext类的p,第四就更精确到p中的span元素了。
3、多类选择器
同个标签可以存在多个类属性,每个类都用空格分隔,要选择两个类名可以这样写:
<style>
.specialtext.featured {
font-size: 120%;
}
</style>
注意:CSS类选择器的两个类名之间没有空格,如果加了空格就变成了“祖先/后代”关系的上下文选择器了。
4.ID选择器
ID与类的写法相似,只不过id选择器前面用“ # ”后面跟着id名,
<style>
#specialtext {
font-style: italic;
}
</style>
***
***
***
<p id="specialtext">这是一个特殊段落</p>
id还可以用于页内导航
<a href="#bio">Biography</a>
这样的链接就可以直接在页面内跳转到具有id名为“bio”的标签的位置。如果没想好“href”中放什么链接,也可以用“#”来充当占位符。
什么时候用id,什么时候用类
1、什么时候用id
id的用途是在页面中唯一地标识一个元素,强调的是唯一性。每个id名称必须是不相同的,而且每个id名称在页面中只能用一次。尤其是于JavaScript关联时,相同的id可能会导致JS行为异常。
2、什么时候用类
类的目的是为了标识一组具有相同样式特征的元素,强调的是通用性。切不可乱用类,这样会增加需要编写和维护的CSS量。
ID具有唯一性,Class具有普遍性。
ID是唯一的,所以尽量在结构外围使用,通常用于页面布局。
Class是可重复的,所以尽量在结构内部使用,通常用于样式定义。
ID的样式优先级高于Class。
三、属性选择器
1.属性名选择器
我们可能会遇到这样的HTML代码:
<img sec="images/yellow_flower.jpg" title="yellow flower" alt="yellow flower" />
如果我们想要为带有title属性的图片添加样式,那么我们就可以用到属性名选择器了,如下:
img[title] {
border: 2px solid blue;
}
这时,图片就会显示2像素宽的蓝色边框。一般来说title属性和alt属性都是设定相同的值,增加可阅读性。
2.属性值选择器
属性值选择器就更精确地定位我们所需要添加样式的位置了。如下:
img[title="red flower"] {
border: 4px solid green;
}
***
***
***
<img src="images/red_flower.jpg" title="red flower" alt="red flower" />
只有在title属性值为“red flower”时,才会为图片加上边框样式。
3.属性和值选择器-多个值
[title~="hello"]{
color: red;
}
该例子为包含指定值的title属性的所有元素设置样式,适用于由空格分隔的属性值。
[lang|=en] {
color: red;
}
该例子为带有包含指定值的lang属性的所有元素设置样式。适用于由连字符分隔的属性值。
4.设置表单样式
input[type="text"]{
width: 50px;
display: block;
}
input[type="button"]{
width:12opx;
margin-left:35px;
}
选择器参考手册 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。 [attribute|=value]
用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 [attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value]
匹配属性值中包含指定值的每个元素。
四、伪类
伪类与类相似,但它并没有附加到标记中的标签上,所以称之为伪类,伪类分两种:
UI伪类,会在html元素处于特定状态时,为该元素应用CSS样式。 结构化伪类,会在标记中存在某种结构上的关系时,为相应的元素引用CSS样式。
UI伪类
1、链接伪类
针对连接的伪类一共有四个,也是我们常用伪类,它们的顺序也始终是这样的:
a:Link {color: black;} /链接等待被点击/
a:visited {color: grey}
a:hover {text-decoration: none;} /鼠标悬停在这个链接上/
a:active {color:red;} /链接正在被点击(鼠标按下还没有释放)/
一个冒号(:)表示伪类,两个冒号(::)表示CSS3新增的伪元素。
很多时候不一定要将四个元素都写出来。而且这些伪类也可以用于任何元素,如下:
p:hover {background-color: grey;}
这条代码就可以使鼠标悬停在p标签位置时,背景颜色变为灰色。
2、focus伪类
任何元素都可以运用focus伪类,但一般用于表单:
input:focus {background-color: yellow;}
表单中的文本框在用户单击它时会获取焦点,同时为该文本框添加一个黄色背景。测试
3、:target伪类
如果用户点击一个指向页面中其他元素的链接,则那个元素就是目标(target),可以用:target选中它。
<style>
#more_info:target {background:#eee;}
</style>
<a href="#more_info">More Information</a>
<h2 id="more_info">This is the information you are looking for.</h2>
用户单击链接跳转id为more_info的元素时,为该元素添加浅灰色背景。维基百科在其引证中就大量地使用了:target伪类。
结构化伪类
1、:first-child和:last-child
:first-child代表一组同胞元素中的第一个元素,而:last-child则代表最后一个。如下:
<style>
ol.results li:first-child {
color: blue;
}
ol.results li:last-child {
color: red;
}
</style>
<ol class="results">
<li>MY FAST PONY</li>
<li>STEADY TROTTER</li>
<li>SLOW OL'NAG</li>
</ol>
2、nth-child(n)
n可以是表示一个数值(也可以使用odd或者even表示奇数和偶数,也可用2n+1或者2n来表示),例如:
li:nth-child(3) {color: grey;}
:nth-child伪类最常用于提高表格的可读性,交替使用不同的颜色。
转自:http://ife.baidu.com/note/detail/id/1116
针对伪类还需要在学习一下