css选择器有哪些

1. css有哪些种类的选择器

CSS选择器如下：
1. 标签名选择器 div { color：Red;} /即页面中的各个标签名的css样式
2.类选择器 .divClass {color:Red;} /即定义的每个标签的class 中的css样式
3.ID选择器 #myDiv {color:Red;} /即页面中的标签的id
4.后代选择器（类选择器的后代选择器） .divClass span { color:Red;} /即多个选择器以逗号的格式分隔 命名找到准确的标签
5.群组选择器 div,span,img {color:Red} /即具有相同样式的标签分组显示
选择器的优先级
1.最高优先级是 (直接在标签中的设置样式，假设级别为1000)<div style="color:Red;"></div>
2.次优先级是（ID选择器 ,假设级别为100） #myDiv{color:Red;}
3.其次优先级是（类选择器，假设级别为10） .divClass{color:Red;}
4.最后优先级是 （标签选择器，假设级别是 1） div{color:Red;}
5.那么后代选择器的优先级就可以计算了啊
比如 .divClass span { color:Red;} 优先级别就是：10+1=11
想详细的话可以参考W3C文档。

2. CSS中的选择器分几种

1. 标签名选择器 div { color：Red;} 即页面中的各个标签名的css样式
2.类选择器 .divClass {color:Red;} 即定义的每个标签的专class 中的属css样式

3.ID选择器 #myDiv {color:Red;} 即页面中的标签的id

4.后代选择器（类选择器的后代选择器） .divClass span { color:Red;} 即多个选择器以逗号的格式分隔 命名找到准确的标签

5.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

3. css选择器有哪些

标签选择器
类选择器
ID选择器
全局选择器
组合选择器
继承选择器
伪类选择器

4. 什么是css选择器字符串

css的选择器是还是比较富的，主要的css选择器如下：
标签选择器（如：body,div,p,ul,li）
.类选择器（如：class="head",class="head_logo"）
ID选择器（如：id="name",id="name_txt"）
全局选择器（如：*号）
.组合选择器（如：.head .head_logo,注意两选择器用空格键分开）
.继承选择器（如：div p,注意两选择器用空格键分开）
伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）
字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)
以上选择器在日常开发中最常用的就是标签选择器、类选择器和id选择器，下面是这三种选择器的基本用法1、标签名选择器 一个XHTML文档中有许多标签，例如p标签，h1标签等。若要使文档中的所有p标签都使用同一个CSS样式，就应使用标签选择器。

1
2

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

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

1
2

<div class="test">测试代码</div>
.test {color:red;border:1px blue solid;}

3、id选择器，id选择器是唯一的，只可以获取独一无二的一个元素。

1
2

<div id="test">测试代码</div>
#test {color:red;border:1px blue solid;}

5. css选择器有哪些

1、类型选择器

CSS中的一种选择器是元素类型的名称。使用这种选择器(称为类型选择器)，可以向这种元素类型的每个实例上应用声明。例如，以下简单规则的选择器是H1，因此规则作用于文档中所有的H1元素。

2、简单属性选择器

CLASS属性

CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。从本质上讲，可以使用CLASS属性来分类元素，在样式表中创建规则来引用CLASS属性的值，然后浏览器自动将这些属性应用到该组元素。

类选择器以标志符(句点)开头，用于指示后面是哪种类型的选择器。对于类选择器，之所以选择句点是因为在很多编程语言中它与术语"类"相关联。翻译成英语，标志符表示"带有类名的元素"。

ID属性

ID属性的操作类似于CLASS属性，但有一点重要的不同之处:ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。

需要注意的是，ID选择器的标志符是散列符号(#)。标志符用来提醒浏览器接下来出现的是ID值。

STYLE属性

尽管在选择器中可以使用CLASS和ID属性值，STYLE属性实际上可以替代整个选择器机制。不是只具有一个能够在选择器中引用的值(这正是ID和CLASS具有的值)，STYLE属性的值实际上是一个或多个CSS声明。

通常情况下，使用CSS，设计者将把所有的样式规则置于一个样式表中，该样式表位于文档顶部的STYLE元素内(或在外部进行链接)。但是，使用STYLE属性能够绕过样式表将声明直接放置到文档的开始标记中。

3、组合选择器类型

可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。通过组合选择器，可以更加精确地处理希望赋予某种表示的元素。例如，要组合类型选择器和类选择器，一个元素必须满足两个要求:它必须是正确的类型和正确的类以便使样式规则可以作用于它。

外部信息:伪类和伪元素

在CSS1中，样式通常是基于在HTML源代码中出现的标记和属性。对于很多设计情景而言这种做法完全可行，但是它无法实现设计者希望获得的一些常见的设计效果。

设计伪类和伪元素可以实现其中的一些效果。这两种机制扩充了CSS的表现能力。在CSS1中，使用伪类可以根据一些情况改变文档中链接的样式，如根据链接是否被访问，何时被访问以及用户和文档的交互方式来应用改变。借助于伪元素，可以更改元素的第一个字母和第一行的样式，或者添加源文档中没有出现过的元素。

伪类和伪元素都不存在于HTML;也就是说，它们在HTML代码中是不可见的。这两种机制都得到了精心设计以便能够在CSS以后的版本中做进一步地扩充;也就是说实现更多的效果。

6. css样式有哪几种选择器

CSS选择器、优先级与抄匹配原理
1.id 选择器袭（#myid）2.类选择器（.myclassname）3.标签选择器（div,h1,p）4.相邻选择器（h1+p）5.子选择器（ul < li）6.后代选择器（li a）7.通配符选择器（*）8.属性选择器（a[rel="external"]）9.伪类选择器（a:hover,li:nth-child）
其中ID选择器的效率是最高，而伪类选择器的效率则是最低

CSS的权重

1. 通配选择符的权值 0,0,0,0
2. 标签的权值为 0,0,0,1
3. 类的权值为 0,0,1,0
4. 属性选择的权值为 0,0,1,0
5. 伪类选择的权值为 0,0,1,0
6. 伪对象选择的权值为 0,0,0,1
7. ID的权值为 0,1,0,0
8. important的权值为最高 1,0,0,0
使用规则： 选择器的权值加到一起，大的优先；如果权值相同，后定义的优先 。
从上面我们可以得出两个关键的因素：
1. 权值的大小跟选择器的类型和数量有关
2. 样式的优先级跟样式的定义顺序有关

7. css复合选择器有哪些

CSS复合选择器包括子选择器、相邻选择器、包含选择器、多层选择器嵌套、属性选择器、伪选择器和伪元素选择器，以上具体的使用如下，感兴趣的朋友可以学习下
1.子选择器
复制代码 代码如下:
<style type="text/css">
#pic>img{ // 使用 > 号，让选择器只选择直接的子类，width:200px;
height:200px;
}
</style>
<div id="pic">
<img src="1.jpg" alt="photo" />
<span><img src="btn" alt="点击大图" /></span>
</div>
2.相邻选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
3.包含选择器
复制代码 代码如下:
#header p{font-size:14px}
#main p {font-size:12}
定义<div id = "header">包含框里的段落字体大小为14像素
定义<div id = "main">包含框里的段落字体大小为12像素.
4.多层选择器嵌套
复制代码 代码如下:
#wrap #header h2 span {font-size:24px}
#wrap #main h2 span {font-size:14px}
5.属性选择器
（1）匹配属性名选择器
div[class] {font-size:24px;}
使该选择器能够匹配div中设置了class属性的对象定义格式
（2)匹配属性值选择器
img[alt="图像"][title="图像"] {border：solid 2px red}：
给<img src="images/pic1.jpg" alt="图像" title=“图像”>定义样式
(3)模糊匹配属性值选择器
6.伪选择器和伪元素选择器
复制代码 代码如下:
<style type ="text/css">
a:link{color:#FF0000} /*正常链接状态下样式*/
a:visited{color:#0000FF} /*被访问之后的样式*/
a:hover{color:#00FF00} /*鼠标经过的样式*/
a:active{color:#FF00FF} /*超链接被激活的样式*/
</style>

8. 什么是CSS的选择器，包括哪几种类型

在
CSS
中，选择器是一种模式，用于选择需要添加样式的元素。
"CSS"
列指示该属性是在哪个
CSS
版本中定义的。（CSS1、CSS2
还是
CSS3。）

选择器
例子
例子描述
CSS
.class
.intro
选择
class="intro"
的所有元素。
1
#id
#firstname
选择
id="firstname"
的所有元素。
1
*
*
选择所有元素。
2
element
p
选择所有
<p>
元素。
1
element,element
div,p
选择所有
<div>
元素和所有
<p>
元素。
1
element element
div
p
选择
<div>
元素内部的所有
<p>
元素。
1
element>element
div>p
选择父元素为
<div>
元素的所有
<p>
元素。
2
element+element
div+p
选择紧接在
<div>
元素之后的所有
<p>
元素。
2
[attribute]
[target]
选择带有
target
属性所有元素。
2
[attribute=value]
[target=_blank]
选择
target="_blank"
的所有元素。
2
[attribute~=value]
[title~=flower]
选择
title
属性包含单词
"flower"
的所有元素。
2
[attribute|=value]
[lang|=en]
选择
lang
属性值以
"en"
开头的所有元素。
2
:link
a:link
选择所有未被访问的链接。
1
:visited
a:visited
选择所有已被访问的链接。
1
:active
a:active
选择活动链接。
1
:hover
a:hover
选择鼠标指针位于其上的链接。
1
:focus
input:focus
选择获得焦点的
input
元素。
2
:first-letter
p:first-letter
选择每个
<p>
元素的首字母。
1
:first-line
p:first-line
选择每个
<p>
元素的首行。
1
:first-child
p:first-child
选择属于父元素的第一个子元素的每个
<p>
元素。
2
:before
p:before
在每个
<p>
元素的内容之前插入内容。
2
:after
p:after
在每个
<p>
元素的内容之后插入内容。
2
:lang(language)
p:lang(it)
选择带有以
"it"
开头的
lang
属性值的每个
<p>
元素。
2
element1~element2
p~ul
选择前面有
<p>
元素的每个
<ul>
元素。
3
[attribute^=value]
a[src^="https"]
选择其
src
属性值以
"https"
开头的每个
<a>
元素。
3
[attribute$=value]
a[src$=".pdf"]
选择其
src
属性以
".pdf"
结尾的所有
<a>
元素。
3
[attribute*=value]
a[src*="abc"]
选择其
src
属性中包含
"abc"
子串的每个
<a>
元素。
3
:first-of-type
p:first-of-type
选择属于其父元素的首个
<p>
元素的每个
<p>
元素。
3
:last-of-type
p:last-of-type
选择属于其父元素的最后
<p>
元素的每个
<p>
元素。
3
:only-of-type
p:only-of-type
选择属于其父元素唯一的
<p>
元素的每个
<p>
元素。
3
:only-child
p:only-child
选择属于其父元素的唯一子元素的每个
<p>
元素。
3
:nth-child(n)
p:nth-child(2)
选择属于其父元素的第二个子元素的每个
<p>
元素。
3
:nth-last-child(n)
p:nth-last-child(2)
同上，从最后一个子元素开始计数。
3
:nth-of-type(n)
p:nth-of-type(2)
选择属于其父元素第二个
<p>
元素的每个
<p>
元素。
3
:nth-last-of-type(n)
p:nth-last-of-type(2)
同上，但是从最后一个子元素开始计数。
3
:last-child
p:last-child
选择属于其父元素最后一个子元素每个
<p>
元素。
3
:root
:root
选择文档的根元素。
3
:empty
p:empty
选择没有子元素的每个
<p>
元素（包括文本节点）。
3
:target
#news:target
选择当前活动的
#news
元素。
3
:enabled
input:enabled
选择每个启用的
<input>
元素。
3
:disabled
input:disabled
选择每个禁用的
<input>
元素
3
:checked
input:checked
选择每个被选中的
<input>
元素。
3
:not(selector)
:not(p)
选择非
<p>
元素的每个元素。
3
::selection
::selection
选择被用户选取的元素部分。

9. 经常使用的css选择器有哪些

css2.1有标签选择器、class选择器、id选择器
css3就多了，有伪类选择器、属性选择器、伪元素、层级选择器

10. css的五类选择器有哪些

何止五类啊？ 常用的就有8类

• 标签选择器（如：回body,div,p,ul,li）

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

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

• 全局选择器（如：*号）

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

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

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

• 字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)