CSS选择器种类及介绍

1.标签选择器（如：body,div,p,ul,li）

2.类选择器（如：class="head",class="head_logo"）

3.ID选择器（如：id="name",id="name_txt"）

4.全局选择器（如：*号）

5.组合选择器（如：.head .head_logo,注意两选择器用空格键分开）

6.继承选择器（如：div p,注意两选择器用空格键分开）

7.伪类选择器（如：就是连接样式,a元素的伪类，4种不一样的状态：link、visited、active、hover。）

在标签内写入style=" "的方式，应该是CSS的一种引入方式，而不是选择器，由于根本就没有用到选择器。

咱们分别来看下这些选择器：

1：标签名选择器

一个XHTML文档中有许多标签，例如p标签，h1标签等。若要使文档中的全部p标签都使用同一个CSS样式，就应使用标签选择器。

div {color:red;border:1px blue solid;}

p {color:#000;}

2：类选择器

使用标签选择器能够为整个XHTML文档中的同一个标签指定相同的CSS样式。可是在实际运用中，XHTML文档中的同一个标签会被反复使用。若要为相同的标签赋予不一样的CSS样式就应使用类选择器。

<div class="test">测试代码</div>

.test {color:red;border:1px blue solid;}

在html文档里，咱们在要控制样式的标签的开标签（非成对标签如input直接放在标签里）里加入
class="xxx",在页面对应的css文件里，用.xxx就能够指向这个标签，从而对这个标签进行控制，咱们称这种经过定义类（class）来找到标签的方式为
：类选择器。

这种定义class
的方式是前端开发最经常使用的选择器，有几个突出的特色：能够给不一样的标签设置同一个类，从而用一条CSS命令控制几个标签，减小大量代码，是页面修改简单，易维护，易改版；其次，后台工做人员机会不会用到有关class的相关设置，不须要跟后台人员之间进行交互；再者，能够经过js等动态改变标签的Classname，从而改变整个标签的样式，使前端动态效果实现起来更为容易。

3：ID选择器

ID选择器和类选择器类似，不一样的是，ID选择器不能复用。在一个XHTML文档中，一个ID选择器只能把其CSS样式指定给一个标签。
<div id="test">测试代码</div>

#test {color:red;border:1px blue solid;}

有 ID 的 HTML元素能够被JavaScript来操纵.再就是ID也是后台开发人员会常常用的，因此前端开发人员应该尽可能少的使用。

4.全局选择器

全局选择器是一个星号。它能做用于XHTML文档中的全部元素。

*{margin:0; padding:0;}

5.组合选择器

标签选择器、类选择器和ID选择器是能够组合起来使用的。通常的组合方式是标签选择器和类选择器组合，标签选择器和ID选择器组合。因为这两种组合方式的原理和效果同样，因此只介绍标签选择器和类选择器的组合。组合选择器只是一种组合形式，并不算是一种真正的选择器，但在实际中常用。

好比 .orderlist li {xxxx} 或者  .tableset td {} 

咱们使用的时候通常用在重复出现而且样式相同的一些标签里，好比 li td  dd等。

好比 <h1 class="red"></h1>       H1.red {color: red}

群组选择器

.test1,span,test2 {border:1px blue solid;}

div,span,img {border:1px blue solid;}

群组选择器其实是对CSS的一种简化写法，只不过把有相同定义的不一样选择器放在一块儿，省了不少代码。

6.继承选择器

学习使用继承选择器就必须先了解文档树和CSS的继承。每一个XHTML均可以被看做一个文档树，文档树的根部就是html标签，而head和body标签就是其子元素。在head和body里的其余标签就是html标签的孙子元素。整个XHTML就呈现一种祖先和子孙的树状关系。CSS的继承是指子孙元素继承祖先元素的某些属性。如下经过实例来详细讲解这两个重要的CSS概念。

文档树    CSS的继承    继承选择器

<div class="test">

<span><img src="xxx" alt="示例图片"/></span>

</div>

.test span img {border:1px blue solid;}

div span img {border:1px blue solid;}

后代选择器其实是使用：多个选择器加上中间的空格来找到具体的要控制标签；从左往右，依次细化，最后锁定要控制的标签，如上例，先找到class为test的标签，再从他的子标签里查找span标签，再从span的子标签中找到IMG标签。

7.伪类选择器

伪类也是选择器的一种，可是用伪类定义的CSS样式并非做用在标签上的。伪类做用在标签的状态上。因为不少浏览器支持不一样类型的伪类，没有一个统一的标准，因此不少伪类都不常被用到。伪类包括：:first-child、:link:、:vistited、:hover、:active、:focus和:lang等等。其中有一组伪类是主流浏览器都支持的，就是超连接的伪类，包括:link:、:vistited、:hover和:active。

a的这四个伪类，分别表示了a的四种状态，要注意的是，a能够只具备一种状态（:link），或者同时具备2种或者三种状态！好比说，任何一个有HREF属性的a标签，在未有任何操做时都已经具有了:link的条件，也就是知足了有连接属性这个条件；若是访问过的a标签，同时会具有
:link :visited 两种状态。把鼠标移到访问过的a标签上的时候，a标签就同时具有了 :link :visited :hover三种状态。

a:link{text-decoration:none;}