学会使用css的选择器–基本选择器

css选择器我们在之前说过，html和css是分离开的，那么就不能像行内样式那样直接去操作要控制的元素，所以规则制定者，开发出一种规则，通过css选择器来进行html中元素的查找和获取，实现对元素的控制，例如：
p{color:red;} p标签中的所有文字为红色

css选择器的基本语法

<style type="text/css">
/*
选择器{}
{}之前的内容就是我们的css选择器
选择器指明了{}中相关css样式要操作的元素
{}里面是相关的css属性
*/
    div{
        width: 100px;
        height: 200px;
        color: #ffffff;
    }
    /*
    整个文档下（document）所有的div元素宽度100像素，高度200像素，文字颜色白色
    */
</style>

css选择器的作用

像上面举的例子一样，div{}可以选择这个文档下所有的div元素，让这些元素都具有{}里面的css属性，也就是一个选择器的内容可以让多个元素使用，减少重复代码出现，并且当进行修改时，我们只需要修改一个选择器中的内容，这个选择器控制的所有元素都会跟着改变。

css选择器的分类

标签选择器

标签选择器就是有html标签中的标签名决定的，例如：<ul></ul>如果想选择这个无序列表我们需要怎样书写呢？<style>ul{}</style>直接使用标签进行选择

类选择器

标签选择器可以选择页面中所有的这个标签，但是我们在页面中并不是只要是这个标签样式就会一致，很多时候是特殊的、有区别的，这个时候就需要区别开这些相同的标签名，这个时候就可以使用类选择器。

类选择器是有标签的class属性值和“.”组成的，例如<p class="className"></p> <style>.className{}</style>className就是类名

一个元素可以有一个或多个类名，每个类名之间用空格隔开，例如：<p class="className1 className2"></p> <style>.className1{} .className2{}</style>都可以控制这个元素。

一个类名也可以控制不同的元素，例如：

<p class="nav"></p>
<div class="nav"></div>
<ul class="nav"></ul>
<style type="text/css">
    .nav{
        width: 100px;
        height: 200px;
        color: #ffffff;
    }
</style>

那么nav这个类名就控制了p标签、div标签、ul标签。

id选择器

当标签选择器和类选择器没有办法满足使用的时候，我们就需要一个终极武器，id选择器。

id选择器是有标签的id属性值和“#”组成的，例如<p id="idName"></p> <style>.className{}</style>
id选择器要注意，一个页面一个id名只能出现一次。

通配符选择器

通配符选择器很简单，就是一个“{}”组成的，这个选择器可以进行全部元素选择。就像平时使用电脑，比如要搜索C盘里所有的网页，可以使用 .html来搜索，.html是网页的后缀名，*代表了所有网页的名称；
在CSS中，同样使用 * 代表所有的标签或元素，它叫做通配符选择器。

例如 <style>* {color:red;}</style>这里就把所有元素的字体设置为红色。
不过，由于会匹配所有的元素，这样会影响网页渲染的时间，因此很多人开始停止使用通配符选择器，取而代之的是，把所有需要统一设置的元素，放在一起，一块设置。