[Codecademy] HTML&CSS第九课 :CSS Selectors



本文出自   http://blog.csdn.net/shuangde800


[Codecademy] HTML && CSS课程学习目录


------------------------------------------------------------------------------------------------



All HTML elements are selectors(所有的html元素都是html)


前面课程给

,

,,等元素定义成了css的selector,事实上,任何的html元素都可以定义成selector,可以是

,




ID


ID具有唯一性,只能被一个元素引用(实际上大多数浏览器也支持被多个引用,但是不推荐)。


ID的定义以#开头,然后加上ID名即可,例如:
#first{
     height: 50px;
}
#second{
     height: 100px;
}
#intro{
     color: #FF0000;
}


引用ID
引用id和引用class的方式一样:




clas和id的差别:请看 
除此之外,class和id在表现形式的优先级上也有区别,id比class的优先级高,例如:
有个class和id:
.first {
    color: #ff0000;
}
#second {
    color: #0000ff;
}


然后一个标签同时引用他们:


那么颜色将显示id second.



pseudo-class selectors(伪类选择器)

已经学了css类选择器,是时候学习伪类选择器了。

伪类选择器是一种获取不是html文件元素树上的一个元素。

你应该曾经在网页上遇到过这种情况:网页上有些链接,当你的鼠标停在上面时链接会变一种颜色,而你点了链接之后,链接又变了一种颜色。这就是用伪类选择器来实现的。


CSS的伪类选择器的语法是:
selector:pseudo-class_selector{
     property: value;
}



例如:

a:hover {
	color: #cc0000;
	font-weight: bold;
	text-decoration: none;
}
 




Links(链接)


链接上有很多种伪类选择器可以用。
a:link 未访问过的链接
a:visited 访问过的链接
a:hover  鼠标停在链接上面时
a:link {
text-decoration: none;
color: #008B45;
}

a:hover {
color: #00FF00;
}

a:visited {
color: #EE9A00;
}




First-Child


另一个有用的伪类选择器是first-child,它会把风格应用给所有节点的第一个儿子节点,

p:first-child{
     color: red;
}


例如:
stylesheet.css
p:first-child {
    font-family: cursive;
    color: red;
}

index.html


	
		
		
	
	
		

I'm the first child!

We're not.

I'm the first child!

We're not.

We're not.

We're not.

We're not.

We're not.


效果:

[Codecademy] HTML&CSS第九课 :CSS Selectors_第2张图片




Nth child


除了first-child,你还可以选择第任意个儿子节点,

p:nth-child(2){
     color: red;
}









你可能感兴趣的:(html&css)