《精通CSS》复盘

为元素命名

//不好的命名方式
red
leftColumn
topNav
firstPara
//好的命名
error
secondaryContent
mainNav
intro

总结：采用完全小写的类名和ID,多个单词之间用连字符分隔。如

andy-budd

总结：有意义的类名的优点是可以在整个网站中重用它们，在分配ID和类名时，一定要保持名称与表现方式无关。要使用有意义的命名。

ID还是类

• 类应该是应用在概念上相似的元素，这些元素出现在同一页面的多个位置，而ID应用于不同的唯一的元素。
• 如果使用大量ID，很快就会难以找到唯一的名称，最终不得不创建非常长的命名约定，因此更常使用类名，只有在元素目标非常独特，绝不会对网站上其他地方别的东西使用这个名称时，才会使用ID，只有在绝对确定这个元素只会出现一次的情况下，才使用ID，如果认为以后可能需要相似的元素，就使用类。
• id在css中使用#
• 类class在css中使用.
• 如果发现添加了许多类，那么很可能意味着html文档的结构有问题。

div还是span

• 为了将不必要的标记减少到最小应该只在没有现有元素能实现区域分割的情况下使用div元素，例如使用主导航列表，就不需要将它包围在div中。
• div对块级元素进行分组，span用来对付行内元素进行分组和标识。

常用的选择器

最常用的选择器是类型选择器和后代选择器。类型选择器也叫作元素选择器。如下

p{
	color:black;
	}

后代选择器用来选择特定元素的后代，由两个选择器之间的空格表示。如下

blockquote p{
	padding-left:2em
	}

id选择器　#
类选择器由点表示

伪类选择器

:link和:visited称为链接伪类，只能用于锚元素。
:hover :active :focus称为动态伪类，理论上可以应用于任何元素。
通过把伪类连接在一起，可以创建更复杂的行为。

//在已访问链接和未访问链接上实现不同的鼠标悬停效果
a:visited:hover {
	color:olive;
	}

a:link {
	color:blue;
}

tr:hover {
	bacckground-color:red;
}

通用选择器

匹配所有可用元素

* {
	padding:0;
}

在与其他选择器结合使用时，通用选择器可以用来对某个元素的所有后代应用样式，或者跳过一级后代。

#nav li *{
	padding-left:0;
}
//表示对id=nav 下的li标签的所有子代应用样式

高级选择器

在对于站点功能或者布局很重要的任何元素都应该避免使用这些高级选择器。

子选择器和相邻同胞选择器

子选择器选择元素的直接后代，即子元素。例如：

#nav>li {
	padding-left:20px;
}
//表示对id=nav下的第一层的li标签（包括其并列的li标签）使用样式。

h2 + p {
	font-weight:bold;
}
//表示对h2标签下的第一个p标签进行样式设置
<h2>   </h2>
	<p>    </p>
	<p>    </p>