CSS学习笔记（二）选择器

CSS常用选择器一般有：

1.类型选择器

p{color:#FF0000;}

h1{font-weight:bold;}

2.后代选择器

li a{text-decoration:none;}

上述两种样式适用于那些应用范围广的一般性样式。

对于更特定的元素可以适用：

1.ID选择器

ID选择器由#表示

#intro{font-weight:bold;}

<p id="intro">Some Text</p>

 

2.类选择器

类选择器由.表示

.datePosed{color:green;}

<p class="datePosed">24/3/2012</p>

 

一般由上述几个混合选择器作为很好的方式，

伪类

有时候，希望根据文档结构之外的其他条件对元素应用样式

如：a:link{color:green;}

:link和:visited称为链接伪类，只应用于锚元素。:hover,:active,:focus称为动态伪类，理论上可以应用于任何元素。

但现在只有少数浏览器支持这些功能（firefox）

通用选择器

一般应用于页面上所有元素

*{padding:0;margin:0;}

高级选择器

1.子选择器

子选择器只对选择元素的直接后代，即子元素起作用

#nav > li {backgroud:url(folder.png)no-repeat left top;}

<ul id="nav">

　　<li>Home</li>

　　<li>Server</li>

　　　　<ul>

　　　　　　<li>Desgin</li>

　　　　</ul>

　　<li>Contact Us</li>

</ul>

只对外层列表起作用

2.相邻同胞选择器

只对其后同一个父元素下的相邻元素

h1 + p {font-weight:bold;}

<h1>Main Heading</h1>

<p>Frist paragram</p>

<p>Second paragram</p>

3.属性选择器

abbr[title] {border-bottom:1px dotted #999;}

abbr[title]:hover {cursor:help;}

<abbr title="Cascading style sheet">CSS</abbr>