CSS选择器（Selectors ）---ＣＳＳ学习之路

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;

ackground-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[title]{

color:red;

}

</style>

 

<p title="tag">我是含有title标签的p标签，我将变红色。</p>

<p>我是不含title标签的p标签。</p>

//  选择将含有title属性的p标签元素字体设置成红色。

例如二：

<style>

p[title="tag2"]{

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、使用户更快打开网页。（外部样式会缓存在用户的计算机上，用户再打开相同外部样式的网页则不需要重新加载外部样式。）

坏处：

网页开发时，有时重新修改了外部样式，但之前缓存了外部样式，浏览器一般不再重新加载外部样式，导致与预期效果不同。

内部样式：只应用于当前网页，不便于开发和对于整个网站的修改。