《精通CSS高级web标准解决方案》——第一章、第二章（为样式找到应用目标）即选择器

浏览数：32 / 时间：2015年06月09日

2015-04-16 08:49:35

1.“多类症”：classitis. “多div”:症。

第二章为样式找到应用目标（选择器）

1.有效且结构良好的文档为你要应用的样式提供了一个框架。

2.选择器：1.类型选择器（即元素选择器）

　　　　　2.后代选择器

　　　　　3.类选择器

　　　　　4.ID选择器

3.不要给这些元素指定不同的类，而应将一个类货ID应用于他们的祖先，然后使用后代选择器来定位他们。

4.有时我们需要根据文档结构之外的其他条件对元素应用样式，例如表单元素或链接的状态。这要使用伪类选择器来完成。

/*make tables rows red when hovered over */
tr:hover{background:red;}

　　:link和：visited成为链接伪类，只能应用于锚元素。

　　：hover,:active,:focus成为动态伪类，理论上可以应用于任何元素，大多数浏览器都支持这个功能。但是，IE6只注意应用于锚链接的：active和：hover选择器，完全忽略：focus.IE7在任何元素上都支持：hover，但是忽略：active 和： focus.

通过把伪类链接在一起，可以创建更为复杂的行为。a:visited:hover{color:olive}

5.通用选择符。（可以用来对某个元素的所有后代应用样式）

6.子选择器（区别于后代选择器）：例：#nav>li{……}，子选择器只选择元素的直接后代，即子元素。

7.相邻同胞选择器可用于定位同一个父元素下的某个元素之后的元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>xuanzeqi</title>
  <style>
     h2 + p {
      font-size:1.4em;
      font-weight:bold;
      color:olive;
    }
  </style>

</head>
<body>
<h2>hello ,michael</h2>
<p>good mornig,今天是2015041609:31</p>
<p>come on ,keep going</p>

</body>
</html>

　　技术分享

8.属性选择器。可以根据某个属性是否存在或属性的值来寻找元素。

<!DOCTYPE html>
<html>
<head>
<title>nihao</title>
<style>
[title]{
cursor:help;
}
</style>
</head>
<body>

Can I get this <acronym title="as soon as possible">ASAP</acronym>?

</body>
</html>