创建css的时候选择器有哪⼏类,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。)
在标签内写⼊的⽅式，应该是CSS的⼀种引⼊⽅式，⽽不是选择器，因为根本就没有⽤到选择器。
我们分别来看下这些选择器：
1：标签名选择器
⼀个XHTML⽂档中有许多标签，例如p标签，h1标签等。若要使⽂档中的所有p标签都使⽤同⼀个CSS样式，就应使⽤标签选择器。
div {color:red;border:1px blue solid;}
p {color:#000;}
2：类选择器
使⽤标签选择器可以为整个XHTML⽂档中的同⼀个标签指定相同的CSS样式。但是在实际运⽤中，XHTML⽂档中的同⼀个标签会被反复使⽤。若要为相同的标签赋予不同的CSS样式就应使⽤类选择器。
测试代码
.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样式指定给⼀个标签。
测试代码
#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等。
⽐如
组选择器
.
test1,span,test2 {border:1px blue solid;}
div,span,img {border:1px blue solid;}
组选择器实际上是对CSS的⼀种简化写法，只不过把有相同定义的不同选择器放在⼀起，省了很多代码。
6.继承选择器
css选择器分为哪几类学习使⽤继承选择器就必须先了解⽂档树和CSS的继承。每个XHTML都可以被看作⼀个⽂档树，⽂档树的根部就是html标签，⽽head和body标签就是其⼦元素。在head和body⾥的其他标签就是html标签的孙⼦元素。整个XHTML就呈现⼀种祖先和⼦孙的树状关系。CSS 的继承是指⼦孙元素继承祖先元素的某些属性。以下通过实例来详细讲解这两个重要的CSS概念。
⽂档树    CSS的继承    继承选择器
.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;}
总结：常见的有  H1.red {color: red}      选择H1下的class="red"的元素
div,span,img {border:1px blue solid;}  中间⽤“，”号分开。    选：选择 div span以及img三者的元素
.test span img {border:1px blue solid;} 中间⽤空格或者分号隔开 。 选择class=".test"下的span下的imag元素；属于层层递减的最后⼀个元素

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。