HTML+CSS学习笔记（七）

上次我们说到了建立CSS的三种方式，这一次我们开始将目光放在具体的实现细节上。我们知道，CSS样式规则有两个主要部分，选择器决定将格式化应用到哪些元素上，而声明则定义要应用的格式化，这一次，我们重点关注如何定义CSS选择器。

选择器可以定义五个不同的标准来选择要进行格式化的元素。

     1、元素的类型或名称

h1{color:red;}

 2、元素所在的上下文

h1 em{color:red}; //这里em才是被选择的元素，只应用于包含在h1中的em

 3、元素的类和ID

.error{color:red;} //类

#gaudi{color:red;} //ID

 4、元素的伪类和伪元素

a:link{color:red;} //这种属于伪类元素，表示页面上未被访问的链接

 5、元素是否有某些属性和值

a[title]{color:red;} //含有title属性的a元素

a[href="http://www.example.com"] //href属性值为该网址的a元素

 

选择器可以使用这五个标准的任意组合，多数情况下一到两个即可，也可以对几个不同的元素应用相同的样式。

注意：编写CSS的一个重要目标是让选择器尽可能的简单，仅保持必要的特殊性，充分利用样式的层叠特性，即元素的后代会继承祖先元素的样式。同时应将通用设计元素挑选出来，编写一个类，从而可以在不同的地方共享这种样式，CSS也更易于维护，尽量减少ID选择器的使用。

1. 按名称选择元素

   也即类型选择器，就是HTML中的各种标签，浏览器对于不同的标签会默认有一些样式，当然，你完全可以修改它。通配符*可以匹配所有的标签，因此也很少使用到。

2. 按类或ID选择元素

   按类选择：.classname ，关于class的名称最好抽象一些，比如说可以设置为color而非red。多个类可以叠加在一起，如.classname1.classname2，中间不用加空格，特殊性高于单一的类元素

   按ID选择：#IDname

   注意：除非必须特别针对目标元素，最后不要在id或class选择其中添加元素名称。一再强调的是，减少ID选择器的使用，但它仍有其存在的价值，如：在页面中定义锚，在编写JavaScript为特定的页面元素应用特殊行为时

3. 按上下文选择元素

   CSS中可以根据元素的祖先、父元素或者同胞元素来定位。

article p{color:red;} //article中的所有p元素，无论隔了多少代

article>p{color:red;} //article中的子元素为p的元素，只隔了一代

article h1+p{color:red;} //article后代元素中直接跟在h1后面的p元素

article h1~p{color:red;} //article后代元素中出现在h1后面的p元素（可以不直接相邻）

 4、选择第一个元素和最后一个元素

     有时需要选择第一个或者最后一个元素，就要用到:first-child和:last-child伪类。

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

     可以用ul li:first-child来选择第一个<li>元素，反过来用:last-child可以选择最后一个元素

5、选择元素的第一个字母或者第一行

我们可以使用伪类:first-letter和:first-line只选择元素的第一个字母或者第一行

比如：

p:first-letter{color:red;} //使得每段的第一个字母变成红色

至于:first-line，根据浏览器的显示效果，第一行不是固定的，但无论以何种方式看，受影响的始终只有第一行。

 

6、按状态选择链接元素

CSS允许根据连接的当前状态对他们进行格式化，这是通过一系列伪类实现的，链接的状态是由使用者决定的，在代码中是无法指定链接的状态的。

有这么几个伪类。

a:link{color:red;} //设置未被激活链接的样式

a:visited{color:orange;} //设置访问过的链接的样式

a:focus{color:purple;} / /设置获得焦点（通常是键盘选择）时链接的样式

a:hover{color:green;} //设置光标悬浮在链接上时的样式

a:active{color:blue;} //设置光标点击链接时的样式

应该始终按照上面的顺序定义链接的样式，避免链接处于多种状态，当然，只选择其中几个也是完全可以的。

 7、按属性选择元素

可以给具有给定属性或属性值的元素进行格式化，CSS提供了多种方法，包括只检查属性名，检查全部或者部分属性值。

通用格式如下：

element[attribute="value"]，中括号可以继续写下去。

a[href]{color:red;}

a[class="link"]{color:red;}

 

 8、指定元素组

我们经常需要将相同的样式规则应用于多个元素，一个一个设置自然可以，不过我们有更好的办法，即利用"组选择器"。

其实没有看上去那么复杂，只要将多个选择器用"，"隔开，就可在大括号里编写统一的样式。

h1,

p,

a{

color:red;

}

选择器不一定非得是元素名称，可以很复杂，上面前七条里的规则都可以，其实这只不过是把单独写的合并在一起了而已，拆开来效果一样。

有时为应用于多个选择器的共同样式设置一个规则，然后再为每个选择器设置更加个性化的样式，这种方法经常用到，要注意的是后面的规则会覆盖前面的规则。

 

 

总结：选择器越简单越好，不仅方便查询，而其便于维护，仅保持最低的特殊性即可，要知道，特殊性越强，适用性就越窄。从最简单的开始，逐渐的增强特殊性，完全符合"渐进增强"的原则。