一、选择符的使用：

一、选择符的使用：

同一个元素可以使用多个类选择符，类名与类名之间用空格分隔 class="class1 class2"。

可以看到：一个元素可以应用多个类选择符。

当使用两个颜色选择符时，无论在元素中应用时先写了哪个类，结果都是一样的。

可以试着调整一下样式的顺序，在css中，将red写在blue的后面，如下图。

可以看到在元素中无论哪个写在后是一样的。即后面的样式会覆盖前面的，是说的在css中。在css中对于同一个属性如果有不同的定义，后面的属性会覆盖前面的。

 

选择符的继承：

可以看到：在div中应用了class="blue  size"两个选择符。里面的子元素<p>继承</p>虽然没有使用任何的选择符，但是他继承了父元素<div></div>的选择符，所以结果呈现的是蓝色的36px的样式。

当在子元素中也定义一个父元素中已经定义过的颜色属性时，此时子元素的样式会覆盖父元素的样式。结果如下图，继承为红色。

我们发现在样式表中是把红色定义在后面，是后面的样式覆盖了前面的？还是子元素的覆盖了父元素的呢？测试如下。

当给继承2加上样式blue后：

可以发现是子元素的样式覆盖了父元素的样式。

总结：

在同一个元素（标签）中使用多个选择符，当同一个属性被多次定义时，后面定义的属性样式会覆盖前面定义的。

在不同的元素（标签）中，因为继承的原因，父元素和子元素所使用的样式都会起作用，起全部作用或部分作用。若子元素与父元素对同一个属性定义了不同的样式，子元素所定义的样式会覆盖父元素所定义的样式，而与样式表中定义的顺序无关。

 

二、css样式的优先权：

四种方式的优先权：

内联式（行内样式）》内嵌式（内部式）》链接式（外部式）》@import导入式

css优先权：（1）就近原则。（2）作用范围越小，优先权越高。（3）离要修饰目标越近的样式优先权越高。测试如下。

（1）通过下面的比较看出行内样式的优先权最高。

 

（2）为了比较内嵌式与外链式的优先级，测试如下。

考虑到后面的样式会覆盖前面的样式。调整顺序测试如下。

通过测试发现：后面的样式会覆盖前面的样式。就近原则的作用。

（3）内嵌和导入式的比较如下。

 

调整顺序后：

通过比较可以看出：内嵌式和外链式、@import导入式共用时，就近原则起作用。

当在内嵌中使用@import导入式时，比较如下。

通过比较发现：后面的样式并没有覆盖掉前面的样式，说明了内嵌式的优先级要高于@import导入式的优先级。

（4）外链式和@import导入式的优先级比较如下。

调整顺序如下：

如果在link的文件中导入green文件。如下。

通过比较发现@import在后，然而并没有覆盖link的.blue{color:blue;}。说明了外链式的优先级要高于@import导入式的优先级。

 

总结：

行内样式的优先级最高。

就近原则先起作用。后面的样式会覆盖前面的样式。

当在外链式中使用了导入式时，外链式的优先级高。

在实际中经常使用的是内嵌式和外链式。通常将外链式写在前面，如果有需要，再加一些内嵌式，通过使用就近原则让内嵌式起作用，从而达到想要的某种效果。

 

三、选择符的优先级

行内》 id 》 class 》标签选择符

（1）行内选择符和其他三种的比较如下。

通过比较可以看出行内选择符的优先级最高。

（2）通过上面两个图也可以看出：标签选择符的优先权最低。

（3）ID选择符和类选择符的比较如下。

通过比较可以看出ID选择符的优先权高于类选择符的优先权。

可以采用！important语法来提升优先权。但是IE6不支持。

提升优先权后：

 

四、CSS伪类

伪类语法：

元素名称：伪类名称{ 属性：值；}。例如：a:hover{ color:red;}

超链接伪类的顺序：L------V------H-----A

a:link{} a:visited{}  a:hover{}   a:active{}

自定义链接的css伪类   类名称：状态{}

css伪类用于向某些选择器中添加特殊的效果

语法：选择符：伪类名称{属性：值；}

css伪类应用如下：