《精通CSS：高级Web标准解决方案》系列（01）：为样式找到应用目标

1、常用的选择器

　　最常用的选择器类型：类型选择器和后代选择器。类型选择器用来寻找特定类型的元素；后代选择器由其他两个选择器之间的空格表示。例如：

　　类型选择器：

p{ color: black;}
h1{font-weight: bold;}

　　后代选择器：选择一个元素的所有后代

p h1{padding-left: 2em;}

　　ID选择器由一个#字符表示，类选择器由一个点号表示。例如：

#intro {font-weight:bold;}
.date-posted {color: #ccc;}

<p id="intro">happy birthday andy</p>
<p class="date-posted">24/3/2009</p>

　　伪类：:link和:visited称为链接伪类，只能应用于锚元素。:hover、:active和:focus称为动态伪类。例如：

a:link{color: blue;}
a:visited{color:green;}
a:hover, a:focus, a:active {color: red; }

　　值得提出的是：通常把伪类连接在一起，可以创建更复杂的行为。例如：

/*make all visited links olive on hover*/
a:visited:hover {color: olive;}

　　通用选择器：作用就像通配符，匹配所有可用元素。通用选择器由一个星号表示。例如：

*{
  padding:0;
  margin:0;    
}

2、高级选择器

 　　子选择器：只选择元素的直接后代，即子元素。与后代选择器的区别：后代选择器选择一个元素的所有后代。例如：

#nav>li{
background:url(folder.png) no-repeat left top;
padding-left:20px;  
}

 　　属性选择器：根据某个属性是否存在或属性的值来寻找元素。例如，下面的例子，当鼠标悬停在这个元素上时将鼠标指针改为问号，表示这个元素与众不同。

<p>The term ><acronym title="self-contained underwater breathing apparatus">SCUBA</acronym> is an acronym rather than an abbreviation as it is pronounced as a word.</p>

acronym[title]:hover, acronym[title]:focus{
cursor:help;
}

　　除了根据某个属性是否存在对元素应用样式之外，还可以根据属性值应用样式。例如：

a[rel="nofollow"]{
background:url(nofollow.gif) no-repeat right center;
padding-right:20px;
}

　　一些属性可以有多个值，值之间用空格分隔。

3、规划、组织和维护样式表

　　将外部样式表附加到网页上有两种方法，可以连接他们。

<link href="/css/basic.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>

　　除了导入到HTML文档之外，还可以从另一个样式表导入样式表。

@import url(/css/layout.css);

　　CSS注释以/*开头，以*/结束。