CSS选择器（Selectors ）
一、CSS选择器作用
CSS选择器可用于实现对HTML网页上的元素样式的一对一，一对多或者多对一的控制。

二、CSS选择器的种类（这里介绍常用的）

标签选择器（Type selectors ）：直接引用HTML中的标签控制相应元素样式。
例如：

P {
  font-size: 1.25em;
  color: yellow;
}
//  P标签内的字体大小为1.25em,字体颜色为黄色.

类选择器（Class Selectors ）：利用自行定义的类名控制相应元素样式，用“.”来标志。
例如：

.className{
background-color: red;
}
//  设置className类的背景颜色为红色。

ID选择器（ID Selectors)：利用自行定义的ID名（ID名需唯一）控制相应元素样式，用“#”来标志。（因为选择器级联关系，建议非必要时，少用）
例如：

#idName{
width:200px;
height:200px;
background-color: yellow;
}
//  设置idName元素宽200px,高200px，背景颜色为黄色。

群组选择器(Group Selectors )：多种选择器组合成一组，控制同一种样式，选择器间用“，”隔开。（当要设置多个元素拥有同种样式时，采用群组选择器更加便捷，而且可以减少CSS代码。）
例如：

P,.className,#idName{
font-size: 1.25em;
                  color: yellow;
background-color: red;
}
//  设置p标签，className类，idName相应元素的字体大小为1.25em,字体颜色为红        色。

子选择器(Child Selectors )：用两个常用选择器，中间通过“>”进行选择。其中前面的选择器选择父元素，后面的选择器仅选择父元素第一代孩子中全部对应的元素。
例如：

<style>
#box > span {color:red;}
</style>

<div id="box">
<h2>测试子选择器</h2>
<span>第一个span标签</span>
<p><span>第二个span标签</span></p>
</div>
//  父元素box中的第一代孩子中的span元素字体将被设置为红色，而包含在p标签 
中的span元素（box元素的第二代孩子）则没有被影响。

拓展：
:first-child 匹配包含在其父元素中，每个作为首孩子出现的元素。（不限元素类型）
:last-child 匹配包含在其父元素中，每个作为最后孩子出现的元素。
:only-child 匹配包含其父元素中，每个作为唯一孩子出现的元素。
:nth-child(n) 匹配包含在父元素中，每个作为第n个孩子出现的元素。（n 可以是数字、关键词或公式）

:first-of-type 匹配包含在其父元素中，每个作为首孩子出现的特定类型元素。
:last-of-type 匹配包含在其父元素中，每个作为最后孩子出现的特定类型元素。
:nth-of-type(n) 匹配包含在父元素中，每个作为第n个孩子出现的的特定类型元素。 （n 可以是数字、关键词或公式）

后代选择器(Descendant Selectors )：用两个常用选择器，中间通过空格隔开。其中前面的选择器选择父元素，后面的选择器选择父元素全部孩子中全部对应的元素。（注意不要和子选择器选择对象范围混淆）
例如：

<style>
#box span {color:red;}
</style>

<div id="box">
<h2>测试子选择器</h2>
<span>第一个span标签</span>
<p><span>第二个span标签</span></p>
</div>
//  父元素box的后代中的所有span元素的字体都会被设置成红色。

相邻同胞选择器(Adjacent sibling selectors)：用两个常用选择器，中间通过“+”进行选择。作用于与前面选择器同胞的，且是后面选择器选择的第一个元素。
例如

<style>
p+span{color:red;}
</style>

<div id="box">
<h2>测试相邻同胞选择器选择器</h2>
<p><span>第一个span标签</span></p>
<span>第二个span标签</span>
<span>第三个span标签</span>
</div>
//  第二个span标签和p标签同胞故字体将被设置为红色。

伪类选择器(pseudo-classes Selectors)：有时候还会需要用文档以外的其他条件来实现元素的样式，例如鼠标悬停时，目标元素的样式变化等。
例如：

<style>
    a:hover{
        color:red;
        }
</style>

<a href="#">鼠标悬停时，我会改变颜色哟.</a>
//  鼠标悬停在链接上时，字体颜色由默认的蓝色变成红色。

与此相似的伪类有：

:link 设置元素初始样式。
:visited 设置元素被访问后的样式。
:hover 设置鼠标悬停时样式。
:active 设置鼠标点击瞬间的样式。

// 在CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被
置于 a:hover 之后，才是有效的。若要同时设置这四种，一般设置顺序为LVHA。
// 该种伪类一般被应用在链接上，也可以应用在其他元素上，例如表单元素中。

拓展：
:first-line 设置段落的首行样式。
:first-letter 设置段落的首字母样式。（若为英文则作用于第一个字母，若为中文则作用于第一个汉字）

属性选择器(Attribute Selectors )：通过判断元素中是否存在html中某个属性或者符合某个属性值来选择作用该元素。
例如一：

<style>
    p
{
        color:red;
        }
</style>

<p title="tag">我是含有title标签的p标签，我将变红色。</p>
<p>我是不含title标签的p标签。</p>
//  选择将含有title属性的p标签元素字体设置成红色。

例如二：

<style>
    p
{
        color:red;
}
</style>
    
<p title="tag1">我是含有title标签且值为tag1的p标签。</p>
<p title="tag2">我是含有title标签且值为tag2的p标签，我将变红色。</p>
//  选择设置含有title属性，且title属性值为tag2的p标签元素字体为红色。

通配选择器：通用选择器用*来表示,选择作用于所有元素。
例如：

*{
 color:red;
}
//  所有的元素的字体颜色都将被设置成红色。

三、样式继承
样式继承：某元素设置了样式，则其后代可以继承其某些样式设置。
例如：

<style>
.father{
    font-size:20px;
    color:yellow;
    border:#000 1px solid;
    }
</style>

<div class="father">
    <p>样式继承</p>
<p><span>样式继承</span></p>
</div>
//  在父元素div中设置了字体大小20px，字体颜色黄色,边框黑色，1px，实线 ，其后代将继承了它的字体样式，但没有继承它的边框样式。
//  注意：父元素的某些样式设置时不会被子元素继承，例如margin（外边距），border（边框）等等。

四、选择器级联
级联：是属性设置发生冲突时，浏览器用来确定元素会应用那种样式的一套规则。

属性发生冲突的两种情况：

第一种：某元素的多个祖先设置了同个属性的值。
第二种：同时两个或者两个以上的样式设置了同一个属性。

样式应用规则：
注意：某些样式重置后，浏览器仍会保留某些初始属性设置。
例如：

<style>
.box{
    font-size:20px;
    }
</style>

<div class="box">
<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
</div>
//设置了一样的字体大小后，浏览器仍会保持h标签初始大小等级。

1、当元素的多个祖先同时设置了同个属性，则元素应用离它最近的祖先设置的样式。
例如：

<style>
.grandpa{
    color:yellow;
    }
.father{
    color:red;
    }
</style>

<div class="grandpa">
<div class="father">
<p>样式继承</p>
</div>
</div>
//  p标签元素的祖先同时设置了字体颜色，最终p标签元素最终继承了离它最近的father类设置的样式，字体为红色。

2、元素应用本身直接设置的样式。
例如：

<style>
.grandpa{
    color:yellow;
    }
p{
    color:blue;
    }
.father{
    color:red;
    }
</style>

<div class="grandpa">
<div class="father">
<p>样式继承</p>
</div>
</div>
//  p标签元素最终使用本身设置的字体颜色，蓝色。

3、应用选择器权重高者的样式。

权重比例如下：
一个标签选择器=1个权重
一个类选择器=10个权重
一个ID选择器=100个权重
例如：

idName p 权重=100+1=101

idName .className p 权重=100+10+1=111

// 注意：伪元素相当于1个权重，例如：:first-line；伪类相当于10个权重，例如：:hover。
例如：

<style>
.className{
    color:blue;
    }

#idName{
    color:yellow;
    }
</style>

<div id="idName" class="className">
<p>样式设置</p>
</div>
//  ID选择器权重高，p标签元素字体为黄色

4、后设置的样式会覆盖先设置的样式。
例如：

<style>
.style1{
    width:100px;
    height:100px;
    background:red;
    }
.style2{
    background:yellow;
    }
</style>

<div class="style1 style2"></div>
//  最终背景颜色为后设置的黄色。

5、！Important可以推翻样式。
例如：

<style>
p{
    color:red !important;
    color:yellow;
    }
</style>

<p>!important</p>
//  字体颜色最终为红色。

五、控制样式应用的方法
第一种：采用!important。
注意：由于!important的权力很大，推翻同属性的其他样式设置，经常使用将导致你的样式不遵从级联规则。

第二种：改变样式的选择器权重。
注意：仅仅采用简单的加大权重，容易导致选择器名称过长。
例如：

<style>
.intro{
    color:red;
    }
#content .intro{
    color:yellow;
    }
</style>

<body>
<div id="content">
<p class="intro">增加权重</p>
</div>
</body>
//  通过增加一个id选择器来增加权重，使字体样式变黄色而不是红色。

第三种：微调样式出现顺序。
注意：一般先引用外部样式，再写内部样式。
例如：

css.css文件中的样式是：
p{
    color:blue;
    }
Html中部分代码：
<link rel="stylesheet" type="text/css" href="css.css" />
<style>
p{
    color:red;
    }
</style>

<body>
<p>我会听内部样式的。</p>
</body>
//  最终文字为红色。

又如：

<style>
p{
    color:red;
    }
</style>
<link rel="stylesheet" type="text/css" href="css.css" />

<body>
<p>我会听外部样式的。</p>
//  最终文字为蓝色的。

样式内容简介：
HTML呈现网页的基本内容，CSS呈现网页的外观。
CSS样式有外部样式和内部样式。CSS样式一般包含了两部分，一部分是选择器（告诉浏览器该样式的作用对象），一部分是声明块。声明语句包括了属性和属性值。
外部样式：
好处：
1、利于更快的开发（样式代码可以复用）和修改网页。
2、使用户更快打开网页。（外部样式会缓存在用户的计算机上，用户再打开相同外部样式的网页则不需要重新加载外部样式。）
坏处：
网页开发时，有时重新修改了外部样式，但之前缓存了外部样式，浏览器一般不再重新加载外部样式，导致与预期效果不同。
内部样式：只应用于当前网页，不便于开发和对于整个网站的修改。