CSS学习二之CSS基本选择器

           博主也是边学习边记录学习过程，怀着一颗前端大牛的心学习，上一篇说的是css的引入方式，这一篇来说css的选择器，css选择器比较多，所以博主也不是全部都学，主要说其中几个常用的，这里博主把在网上总结到的选择器画成一张图表，简单明了。

         

 这篇文章主要就说基本选择器

一、基本选择器的语法

1，基本选择器语法

选择器类型功能描述* 通配选择器 选择文档中所以HTML元素E 元素选择器选择指定类型的HTML元素#id ID选择器选择指定ID属性值为“id”的任意类型元素.class 类选择器选择指定class属性值为“class”的任意类型的任意多个元素selector1,selectorN 群组选择器将每一个选择器匹配的元素集合并写法主要如下 

通配选择器顾明思义就是通用的，通用选择器用*来表示。例如：，如下这样就是引用这个css的html文件所有标签背景色为蓝色，宽30个元素，高20个元素         

*{    background: blue;    width: 30px;    height: 20px;}

表示所有div标签后代的所有元素都应用这个样式：

div *{    background: blue;    width: 30px;    height: 20px;}

        标签选择器，则是决定哪些标签采用相应的CSS样式，(在大环境中你可能处于不同的位置，但是不管怎么样，你总是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里都是这身衣服)比如，这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改某个属性就可以了，就这么容易！

div{    background: blue;    width: 30px;    height: 20px;}

         ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次，例如，你将一个元素的id取值为”demo”，那么在同一页面你就不能再将其他元素id取名为”demo”了。尽管你会发现即便你把几个元素都命名成相同的id名字，css选择器还是会把这些元素都选中应用样式（如class选择器那样），对于css选择器，id属性的唯一性似乎不存在。然而，对于js而言，它只会选择具有相同id名字元素中的第一个。出于一个好的编程习惯，同一个id不要在页面中出现第二次。前面以”#”号来标志，在样式里面可以这样定义：

<div  id="demo"></div>

#demo{    background: blue;    width: 30px;    height: 20px;}

类选择器根据类名来选择，前面以”.”来标志，

.demo1{    background: blue;    width: 30px;    height: 20px;}

 在HTML中，元素可以定义一个class的属性。div标签使用名为demo1的css属性

<div class="demo1"></div>

        群组选择器当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。使用群组选择器，将会大大的简化CSS代码，将具有多个相同属性的元素，合并群组进行选择，定义同样的CSS属性，这大大的提高了编码效率，同时也减少了CSS文件的体积。如：

div,p,ul,a{    background: blue;    width: 30px;    height: 20px;}

上面这些是使用比较多的基本选择器使用方法。