CSS选择器

一.选择器的分类

每一条css样式声明由两部分组成，形式如下：

选择器 {    样式;}

选择器指明了样式的作用对象，也就是“样式”作用于网页中的哪些元素，接下来就来探究以下都有哪些选择器

1.通用选择器

通用选择器，匹配html所有的标签元素，经常被用来清除默认样式（但不推荐使用，推荐使用reset.css或normalize.css)

声明如下：

* {    css样式代码;}

举个例子：

* {    margin: 0;    padding: 0;}

上面的css样式代码的作用：将html中的所有标签的margin和padding设置为0

2.标签选择器

标签选择器其实就是html代码中的标签

声明如下：

标签 {    css样式代码;}

举个例子：

/*css*/div {    width: 100px;    height: 100px;    background: #333;    font-size: 14px;    line-height: 1.6em;}/*html*/<div>div元素</div>

上面的css样式代码的作用：为html中的所有的div标签设置背景色、字体大小、行高

3.类选择器

通过给标签的class属性定义属性名就可以通过如下的声明为其增加样式

.类选择器名称 {    css样式代码;}

举个例子：

/*css*/.nav {    width: 200px;    height: 100px;    border: 1px solid #000;}/*html*/<div class="nav"></div>

4.ID选择器

声明如下：

#ID选择器名称 {    css代码样式;}

举个例子：

/*css*/#nav {    width: 200px;    height: 100px;    border: 1px solid #000;}/*html*/<div id="nav"></div>

5.子选择器

声明如下：

父选择器>子选择器 {    css样式代码;}

举个例子：

/*css*/.container>p {    width: 200px;    height: 100px;    border: 1px solid #000;}/*html*/<div class="container">    <div>div元素</div>    <p>p元素</p></div>

6.后代选择器

声明如下：

父选择器 子选择器 {    css样式代码;}

举个例子：

/*css*/.container p {    width: 200px;    height: 100px;    border: 1px solid #000;}/*html*/<div class="container">    <div>div元素</div>    <p>p元素</p></div>

7.伪类选择器

声明如下：

选择器:伪类 {    css样式代码;}

举个例子：

/*css*/button {    display: block;    width: 200px;    height: 20px;    cursor: pointer;}button:hover {    background: #006633;}/*html*/<button>链接</button>

8.分组选择器

声明如下：

选择器1，选择器2{    css样式代码;}

举个例子：

/*css*/div,p {    width: 200px;    height: 100px;    border: 1px solid #000;}/*html*/<div class="container">    <div>div元素</div>    <p>p元素</p></div>

9.属性选择器

举个例子：

/*css*/input[type="text"] {    width: 160px;    height: 20px;}input[type="password"] {    width: 180px;    height: 20px;}/*html*/<input type="text" /><input type="password" />

二.css选择器的优先级

权重越大，优先级越高，越先执行，其中，标签选择器的权重为1，类选择器的权重为10，ID选择器的权重为100

举个例子：

#main                 /*权重为100*/.main                 /*权重为10*/span                  /*权重为1*/.main span            /*权重为10+1=11*/ input[type="text"]    /*权重介于10-100之间*/

注：id的优先级最高，但在实际开发中，id选择器不常用，因为不易于维护样式，常用的选择器是类选择器、标签选择器、后代选择器（后代选择器不能超过三个）

（完）