css包含哪些选择器？

css3的选择器有哪些？

css3选择器如下：

一、通配符选择器（*）

通配符选择器是用来选择所有元素，，也可以选择某个元素下的所有元素。

二、元素选择器（E）

元素选择器，是css选择器中最常见而且最基本的选择器。

三、类选择器（.className）

类选择器是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名

四、id选择器（#ID）

ID选择器和上面说的类选择器是很相似的，在使用ID选择器之前也需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个“.”号（.className）而id选择器是在名称前使用＂#＂如（#id）,

五、后代选择器（EF）

后代选择器也被称作包含选择器，所起作用就是可以选择某元素的后代元素，比如说：E?

F，前面E为祖先元素，F为后代元素，所表达的意思就是选择了E元素的所有后代F元素，请注意他们之间需要一个空格隔开。

六、子元素选择器（Egt;F）

子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中Egt;F所表示的是选择了E元素下的所有子元素F。这和后代选择器（E?

F）不一样，在后代选择器中F是E的后代元素，而子元素选择器Egt;F，其中F仅仅是E的子元素而以。

七、相邻兄弟元素选择器（E+F）

相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且F元素在E元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择F元素。

主要的css选择器如下：

1、标签选择器

2、类选择器

3、ID选择器

4、全局选择器

5、组合选择器

6、继承选择器

7、伪类选择器

层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

css常用的四种选择器类型有：

标签选择器：针对一类标签

ID选择器：针对某一个特定的标签使用

类选择器：针对你想要的所有标签使用

后代选择器：用空格隔开

1、标签选择器：选择器的名字代表html页面上的标签

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。

举例：

styletype="text/css"

p{

font-size:14px;

}

/style

body

pcss/p

/body

再比如说，想让“学完了安卓，继续学前端哟”这句话中的“前端”两个变为红色字体，那么可以用span标签把“前端”这两个字围起来，然后给span标签加一个标签选择器。

代码如下：

!DOCTYPEhtml

html

head

metacharset="UTF-8"

titleDocument/title

styletype="text/css"

span{

color:red;

}

/style

/head

body

p学完了安卓，继续学span前端/span哟/p

/body

/html

【总结】需要注意的是：

（1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。

（2）无论这个标签藏的多深，一定能够被选择上。

（3）选择的所有，而不是一个。

2、ID选择器：规定用#来定义（名字自定义）

针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义。

举例：

head

titleDocument/title

styletype="text/css"

#mytitle

{

border:3pxdashedgreen;

}

/style

/head

然后在别处使用id来引用它：

body

h2id="mytitle"你好/h2

/body

id选择器的选择符是“#”。

任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字，可以任取，但是：

（1）只能有字母、数字、下划线。

（2）必须以字母开头。

（3）不能和标签同名。比如id不能叫做body、img、a。

（4）大小写严格区分，也就是说aa,和AA是两个不同的ID

另外，特别强调的是：HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！

一个标签可以被多个css选择器选择：

比如，可以同时让标签选择器和id选择器作用于同一个标签。（用到了层叠）如下：

请点击输入图片描述

然后通过网页的审查元素看一下效果：

请点击输入图片描述

现在，假设选择器冲突了，比如id选择器说这个文字是红色的，标签选择器说这个文字是绿色的。那么听谁的？

实际上，css有着非常严格的计算公式，能够处理冲突.

一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”的第一层含义

3、类选择器：规定用圆点.来定义

类选择器.?针对想要的所有标签使用。优点：灵活。

css中用.来表示类。举例如下：

styletype="text/css"

.oneclass/*定义类选择器*/{

width:800px;

}

/style

/head

然后在别处使用class来引用它：

body

h2class="oneclass"你好/h2

/body

和id非常相似，任何的标签都可以携带id属性和class属性。但是id属性只能被某一特定标签引用一次

class属性的特点：

特性1：类选择器可以被多种标签使用。

特性2：同一个标签可以使用多个类选择器。用空格隔开。举例如下

h3class="classone?classtwo"我是一个h3啊/h3

而不能写成：

h3class="teshu"class="zhongyao"我是一个h3啊/h3

类选择器使用的举例：

类选择器的使用，能够决定一个人的css水平。

应该注意：

（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。

（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

如：

styletype="text/css"

.lv{

color:green;

}

.da{

font-size:30px;

}

.underline{

text-decoration:underline;

}

/style

然后让每个标签去选取自己想要用的类选择器：

pclass="lvda"段落1/p

pclass="lvxian"段落2/p

pclass="daxian"段落3/p

问题：到底用id还是用class？

答案：尽可能的用class，除非极特殊的情况可以用id。

原因：id是js用的。也就是说，js要通过id属性得到标签，所以css层面尽量不用id，要不然js就很别扭。另一层面，会认为一个有id的元素，有动态效果。

举例如下：

请点击输入图片描述

上图所示，css和js都在用同一个id，会出现不好沟通的情况。

记住这句话：类上样式，id上行为。意思是说，class属性交给css使用，id属性交给js使用。

上面这三种选择器的区别：

标签选择器针对的是页面上的一类标签。

ID选择器是只针对特定的标签(一个)，ID是此标签在此页面上的唯一标识。

类选择器可以被多种标签使用。

4、后代选择器:定义的时候用空格隔开

对于EF这种格式，表示所有属于E元素后代的F元素，有这个样式。空格就表示后代。

后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。

后代选择器，描述的是祖先结构。

看定义可能有点难理解，我们来看例子吧。

举例1：

styletype="text/css"

.div1p{

color:red;

}

/style

空格就表示后代。.div1p表示.div1的后代所有的p。

这里强调一下：这两个标签不一定是连续紧挨着的，只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。

举例：

styletype="text/css"

h3bi{

color:red;

}

/style

上方代码的意思是说：定义了h3标签中的b标签中的i标签的样式。

同理：h3和b和i标签不一定是连续紧挨着的，只要保持一个后代的关联即可。

效果：

请点击输入图片描述

或者还有下面这种写法：

请点击输入图片描述

上面的这种写法，h3标签和i标签并不是紧挨着的，但他们保持着一种后代关系。

还有下面这种写法：（含类选择器、id选择器都是可以的）

请点击输入图片描述

在开头说了：后代选择器，描述的是一种祖先结构。举个例子来说明这句话：

!DOCTYPEhtml

html

head

metacharset="UTF-8"

titleDocument/title

styletype="text/css"

divdivp{

color:red;

}

.div2{...}

.div3{...}

.div4{...}

/style

/head

body

div

div

div

div

p我是什么颜色？/p

/div

/div

/div

/div

/body

/html

上面css中的divdivp，也能使文字的颜色变红。通过浏览器的审查元素，我们可以看到p元素的祖先列表：

请点击输入图片描述

CSS选择器、优先级与匹配原理\x0d\x0a1.id选择器（#myid）2.类选择器（.myclassname）3.标签选择器（div,h1,p）4.相邻选择器（h1+p）5.子选择器（ul通配选择符的权值0,0,0,0\x0d\x0a2.标签的权值为0,0,0,1\x0d\x0a3.类的权值为0,0,1,0\x0d\x0a4.属性选择的权值为0,0,1,0\x0d\x0a5.伪类选择的权值为0,0,1,0\x0d\x0a6.伪对象选择的权值为0,0,0,1\x0d\x0a7.ID的权值为0,1,0,0\x0d\x0a8.important的权值为最高1,0,0,0\x0d\x0a使用规则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先。\x0d\x0a从上面我们可以得出两个关键的因素：\x0d\x0a1.权值的大小跟选择器的类型和数量有关\x0d\x0a2.样式的优先级跟样式的定义顺序有关

1、标签选择器，也称为元素选择器。

标签选择器的基本形式如下：tagName{property:value}，其中tagName是标签名称，property是css的属性。

2、类选择器。

类选择器用来为一系列标签定义相同的呈现方式，常用的语法是.classValue{property:value}。其中classValue是类选择器的名称，这是由css编写者自己命名。(所有浏览器都支持类选择器，但多类选择器(.className1.className2)不被ie6支持。)

3、ID选择器。

ID选择器定义的是某一个特定的html元素，一个网页中只有一个标签或元素使用某一ID的属性值。ID选择器的基本语法格式如下：#idValue{property:value}。其中idValue是ID选择器的名称，可以由CSS编写者自己编写。(所有浏览器都支持)

4、全局选择器。

全局选择器就是对所有的htmlz元素起作用。语法格式为：*{propery:value}。其中“*”表示对所有元素起作用，property表示css的属性，value表示属性值。

5、复合选择器。

将多种选择器进行搭配，可以构成一种复合选择器，也称为组合选择器。

6、继承选择器。

继承的规则是子标签在没有定义的情况下，继承父标签的选择器;当子标签重复定义了父标签的声明时，执行子标签选择器。

7、伪类选择器。

伪类选择器主要应用在标签上，它由四种状态：未访问链接(link)、已访问链接(visited)、激活链接(active)、鼠标停留在连接上(hover)。