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选择器不常用，因为不易于维护样式，常用的选择器是类选择器、标签选择器、后代选择器（后代选择器不能超过三个）

（完）