一、选择符的使用:
同一个元素可以使用多个类选择符,类名与类名之间用空格分隔 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伪类应用如下: