Web前端从入门到精通-6 css简介—

Web前端从入门到精通-6 css简介——选择器优先级

上节课我们主要介绍了三种css的选择器

结束的时候留了一个小问题，不知道大家还有没有记得

当多种选择器同时对一个元素操作时，会有什么情况呢？

不知道大家试了没有

先说句题外话，可能有的朋友说

你闲的蛋疼用多种选择器操作一个元素

我让一种选择器操纵一个元素不就可以了吗

我们学一个东西往往是为了用的，而不是为了装13的

所以我提出的这个问题自然有它的价值所在

接下来我会给大家分析

还拿我们的列表做例子，这次给大家举一个百度首页的例子

百度的推荐导航列表这里是不是我们的鼠标移上去的那一个块儿外面会出现一个蓝色的框

好的，我们接下来就做一个这个效果的模拟缩水版

大概长这个样

当然，我们这里假设第二个被移入了

如果希望做成真正的移入之后边框变蓝，还需要在不久的将来学的一个东西——hover伪类

好了，现在先不要管它是什么

经过分析我们可以发现其实这就是一个列表，那基本上可以锁定用列表来做了

为什么用列表呢？其实，网页上尺寸大小一致、但是颜色或者样式略有不同的排列很整齐的这些东西就是用列表来做的

列表通常就用ul li来做

说句题外话，之前我们说过ul是无序列表，有无序列表必然就有有序列表，无序是unordered list(ul)，那么有序就是ordered list(ol)

不管是有序还是无序标签，里面的每一项都是li

还有一种列表dl，里面是dt和dd，大家有兴趣可以百度一下

一不小心又多扯了一些东西，现在继续

我们先不管那个带蓝色框的块儿，先把所有的块儿做成黑色边框

html的话很简单了，直接上代码

    <ul class="video-list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

css的话由于要给所有的li加上蓝色边框，所以自然就有

.video-list li{ width:200px; height:100px; border:5px solid black;}

接下来，我们一定会对第二个li做一些处理，因为它的颜色和别的不一样

所以有了下面的代码

    <ul class="video-list">
        <li></li>
        <li class="active"></li>
        <li></li>
        <li></li>
    </ul>

接下来，我们再在css里面加上一句

.video-list .active{ border:5px solid blue;}

再次预览，我们的效果就达到了

好的，到此我们可以展开分析了，.video-list li和.video-list .active这两个选择器选中的元素是不是有重叠部分？

第二个li这两个选择器都选中了吧？

那这个li的边框颜色为什么按照.video-list .active走呢？

如果你认为是因为.video-list .active写在了.video-list li的后面，后者将前者覆盖了，那你不妨将它们两个对调看看结果

会令你很失望的

其实根本原因就在于像.active这种类选择器的优先级要高于li这种元素选择器

那么知道了这一点之后，大家现在一定又想起id选择器

id选择器和这两种选择器比比高低的话情况会是怎么样呢？

大家自己可以试试，我在这里直接写结论

id选择器>类选择器>元素选择器

当然，这个结论成立的前提必须是.active和li前面的部分一致

例如，在我们这个例子中前面的部分是.video-list

至于为什么一致，我不想多说，开始学一样东西说的太多难免会晕

接下来我们再解释另外一个问题，那就是为什么用两种选择器同时控制一个元素

在我们的这个例子中，大家想想，如果保持被选择器控制的元素不冲动

要怎么做呢？

我们就需要定义两个不同的类选择器

所以css就要写成这样

.video-list .org{ width:200px; height:100px; border:5px solid black;}
.video-list .active{ width:200px; height:100px; border:5px solid blue;}

单是定义两个类倒是没什么，但是我们需要对html大动干戈

    <ul class="video-list">
        <li class="org"></li>
        <li class="active"></li>
        <li class="org"></li>
        <li class="org"></li>
    </ul>

我们需要给每个li都加上一个class类名，这样做是不是很繁琐？？

而且等大家学了js之后就会发现这样写更让人蛋疼的地方，现在不再多说

当然这节课说到优先级的问题了，我们就说的彻底一点

大家思考一下

截止到目前为止，我们的css代码可以写在页面的那些地方呢？

style标签里面，这是最近我们一直在这里面写的

但不要忘了，我们的css最开始是怎么写的

是通过style属性写在html标签里面的行内样式，像这样：

<div style="100px; height:100px; background:red;"></div>

大家一定要明确这是两种引入css的方式

那么除了这两种之外还有没有其他的呢？

肯定有

当我们的style标签里面的css代码很多的时候，管理起来就会不太方便

所以有时我们会把css代码单独放到一个文件里面，这个文件的格式就是.css的格式

然后在html页面里面通过link标签引入

而且可以有多个html页面引用同一个css

这样在制作多个风格相似的网页中可以都引用同一个css文件，如果风格需要改变时只需要改变这个css文件里面的内容即可

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部引入css</title>
    <link rel="stylesheet" href="outerStyle.css">
</head>
<body>
    <div class="org"></div>
</body>
</html>

这里面的link标签就是将outerStyle.css里面的css代码引入到了这个页面中

outerStyle里面的css语法和style标签里面css的语法没有任何区别

值得注意的是引入css的时候link标签一定要加上rel这个属性

还要将outerStyle.css这个文件和当前编辑的html页面放在同一个路径下(说的通俗一点就是放在同一个文件夹下面)

可以告诉link标签引入的是样式表文件，也就是css文件

不要认为link标签有多么神秘，你完全可以将它当做一对儿style标签，里面就是css文件里的内容

为什么说这些呢？

因为我们在实际的开发中，会有很多个link标签

其实完全可以将它们替换成对应的style标签

然后style里面的内容再进行刚才我们说的id选择器>类选择器>元素选择器比拼

好的，到这里，不知道大家有没有思考过这样一个问题：如果我在行间给某个元素设置了样式，就像下面这样

<div class="div1" style="100px; height:100px; background:red;"></div>

然后我又在style标签里面给它加了一些样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css层叠规则</title>
    <style type="text/css">
    #div1{ width:100px; height:100px; background:blue;}
    </style>
</head>
<body>
    <div id="div1" style="100px; height:100px; background:red;"></div>
</body>
</html>

此时，大家思考一下，页面中的div块儿应该显示成什么颜色呢？

大家自己把代码跑一遍就会发现是红色，那么证明一个问题，我们的行间样式比我们的id选择器优先级还要高

你可以这样理解，近水楼台先得月，谁让行间的样式距离标签那么近呢

所以我们的结论变得更加完善

行间样式>id选择器>类选择器>元素选择器

我们最后再测试一下外部引入文件的情况，消除大家度link最后的疑虑：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css层叠规则</title>
    <link rel="stylesheet" href="outerStyle.css"><!-- 外部文件:.div1{100px; height:100px; background:green;} -->
    <style type="text/css">
    .div1{ width:100px; height:100px; background:blue;}
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>

div块儿是蓝色还是绿色呢？

预览之后发现是蓝色

如果将style里面的样式和link标签对调一下，即

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css层叠规则</title>
    <style type="text/css">
    .div1{ width:100px; height:100px; background:blue;}
    </style>
    <link rel="stylesheet" href="outerStyle.css"><!-- 外部文件:.div1{100px; height:100px; background:green;} -->
</head>
<body>
    <div class="div1"></div>
</body>
</html>

预览之后就会发现是绿色

刚才我们说过了，link标签完全可以用style标签来替换掉，里面的内容就相当于外部文件里面写的内容

仅此而已

好的，这节课我们主要讲的是css中的层叠这一特性

当然层叠细说起来要远比这个复杂很多，而且需要在实战中不断反思才能理解的更深入