css样式的选择器,css样式选择器有哪些类型

css有哪些选择器

CSS中常用的选择器：

（一）基本选择器（二）层次选择器（三）动态伪类选择器（四）目标伪类选择器

（五）ui状态伪类选择器（六）结构伪类选择器（七）属性选择器（八）伪元素

(一)基本选择器

1.标签选择器：通过标签名获取元素 权重：0001

（此种选择器影响范围大，建议尽量应用在层级选择器中。）

2.class选择器：通过 . 类名获取元素 权重：0010

（通过class类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。）

3.id选择器：通过 # id名获取元素 权重：0100

（通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。 ）

4. * 通配符选择器：获取到页面的所有元素

5.群组选择器：用逗号隔开基本选择器，表示这些选择器都获取到

(二)层次/关系选择器

（主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。）

1.包含选择器：用空格隔开基本选择器，表示后一个选择器是前面的后代

例：p a { color:red; }

2.子代选择器：用隔开基本选择器，表示后一个选择器是前面的子代

例：ulli { line-style: none; }

3.相邻兄弟选择器：E+F:表示获取到E后面的紧跟着的F元素（同级的）

例： a+a { }

4.兄弟选择器：E~F:表示获取到E后面所有的同级的F元素

例： li~li { }

(三）动态伪类选择器

1. a:link 锚链接被访问前添加样式

2. a:visited 锚链接被访问后添加样式

3. e:hover 鼠标悬停在元素上添加样式

4. e:active 鼠标点击元素时添加样式

5. :focus 表单元素被聚焦时，添加样式

(四)目标伪类选择器

语法： 目标:target {属性：属性值} 被选中的目标添加样式

目标:target E子元素{属性：属性值} 被选中的目标里的E子元素添加样式

(五)ui状态伪类选择器

1. :enabled 可用的表单元素添加样式

2. :disabled 不可用的表单元素添加样式(disabled )

3. :checked+E 被选中的表单元素添加样式

(六)结构伪类选择器

1. E:first-child 获取到E元素，且要满足为其父元素的第一个孩子。

2. E:last-child 获取到E元素，且要满足为其父元素的最后一个孩子

3. E:nth-child(n) 获取到E元素，且要满足为其父元素的第n个孩子

n的用法：

(1)6n倍数 (2)even偶数/2n odd奇数/2n-1（如可用来选中奇偶行来实现 “隔行换色”）

(3) -n+5 选中1-5

(4)p:nth-child(-n+3):nth-child(n+2) 2-3个

4. E:nth-last-child(n) 获取到E元素，且要满足为其父元素的倒数第n个孩子

5. E:first-of-type 获取到E元素，且要满足为其父元素的第一个该类型的孩子

6. E:last-of-type 获取到E元素，且要满足为其父元素的最后一个该类型的孩子

7. E:nth-of-type(n) 获取到E元素，且要满足为其父元素的第n个该类型的孩子

8. E:nth-last-of-type(n)获取到E元素，且要满足为其父元素的倒数第n个该类型的孩子

9. E:empty 获取到空的E元素（注：连空格都不能有）

(七)属性选择器

1. E[attr] 拥0有attr属性的E元素添加样式 如div[class];

2. E[attr="val"] 拥有attr属性值 为 val的E元素添加样式 如p[class="ab"]

3. E[attr*="val"] attr属性值 包含 val的E元素添加样式

如ul[class="c"] 指class类名中包含有c字母的E元素

4. E[attr^="val"] attr属性值以val 开头 的E元素添加样式

5. E[attr$="val"] attr属性值以val 结尾 的E元素添加样式

(八)伪元素

1. E::before给E元素添加第一个子元素 （前面）

2. E::after 给E元素添加最后一个子元素（后面）

3. E::first-letter给E元素第一个字添加样式

4. E::first-line给E元素第一行添加样式

5. E::selection 元素内容被选中时添加样式(火狐需要加前缀-moz-)

相关问答

Q1: css有哪些种类的选择器

主要的css选择器如下：

1、标签选择器

2、类选择器

3、ID选择器

4、全局选择器

5、组合选择器

6、继承选择器

7、伪类选择器

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

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

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

Q2: CSS选择器与优先级详解（一）

CSS选择器又被称为CSS样式、CSS属性选择器。是由css命名及后面属性及属性值构成一个整体。

1.基础选择器

a.id选择器：通过设置元素的id属性为该元素制定ID。ID由开发者指定。每个ID在文档中必须是唯一的。在写样式表时，ID选择器是以#开头的。

HTML

CSS

执行效果：

b.class选择器：是以独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，也就是要保证类名在html标记中存在。

HTML

CSS

执行效果：

c.元素选择器：通过note节点名称匹配元素。

HTML

CSS

2.属性选择器：

注意：最后一个选择器是E[attr|=val]，由于输入|会对表格造成影响，只能用/代替。

CSS3新增了一些属性选择器，待持续更新。

3.组合选择器

示例如下：

实现效果如下：

示例如下：

从高到低依次是：

1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式

2.作为style属性写在元素标签上的内联样式

3.id选择器

4.类选择器

5.伪类选择器

6.属性选择器

7.标签选择器

8.通配符选择器

9.浏览器自定义

选择器的特殊性值表述为4个部分，用0,0,0,0表示。

参考：

1. css优先级计算规则

2. CSS选择器笔记

3. Selectors MDN

4. CSS3 选择器——基本选择器

5. CSS3 选择器——伪类选择器

6. 征服高级CSS选择器

Q3: css选择器

选定所有对象。

语法

以文档语言对象类型作为选择符。即 html 中的标签

语法

以唯一标识符 id 属性等于 myid 的 E 对象作为选择符。

语法

以 class 属性包含 myclass 的 E 对象作为选择符。

不同于 id 选择符 的唯一性，类选择符可以同时定义多个,并控制多个元素的样式

语法

群组选择器 (selector1,selectorN) 是将具有 相同样式 的元素分组在一起，每个选择器之间用逗号( , )隔开。

语法

后代选择器( E F )是选择 E 元素的所有后代 F 元素，不管 F 元素是 E 元素的子元素、孙元素或者更深层的关系，都会被选中。

语法

子选择器( EF )是选择 E 元素的所有子后代 F 元素，注意 F 元素仅仅是 E 元素的子元素而已。

语法

兄弟选择器( E~F )是 CSS3 新增选择器，代表 E 和 F 具有同一个父元素，并且 F 元素在 E 元素后面，但是不用相邻。

例子

语法

相邻选择器( E+F )是 E 和 F 具有同一个父元素，并且 F 元素在 E 元素后面且相邻。

语法

简介

根据具有链接属性的 E 元素的被访问情况进行匹配。

例子

index.html

index.css

简介

根据用户对于 E 元素的操作来进行匹配。

例子

index.html

index.css

Q4: css样式有哪几种选择器？

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.样式的优先级跟样式的定义顺序有关

Q5: 详解CSS样式选择器有哪些?

CSS选择器就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

CSS选择器分类：

标签选择器、类选择器、ID选择器、全局选择器、群组选择器、后代选择器、伪类选择器

1、html标签选择器：

定义：以html标签作为选择器

2、class类选择器：

定义：为HTML标签添加class属性，通过类选择器来为具有此class属性的元素设置css样式。

类选择器也可以对不同类型元素的同一个名称的类选择器设置不同的样式规则：

同一个元素可以设置多个类，之间用空格隔开：

3、ID选择器

定义：为HTML标签添加ID属性，通过ID选择器来为具有此ID的元素设置CSS规则

4、群组选择器

定义：集体统一设置样式

5、全局选择器

定义：所有标签设置样式

HTML文档结构图

6、后代选择器

定义：使用后代选择器设置，之间用空格隔开，后代选择器可以多层。

7、伪类选择器

链接的四种状态：激活状态，已访问状态，未访问状态，鼠标悬停状态。

伪类

说明

:link

未访问的链接

:visited

已访问的链接

:hover

鼠标悬停状态

:active

激活的链接

:hover 用于访问的鼠标经过某个元素时；

:active 用于一个元素被激活时（即按下鼠标之后放开鼠标之前的状态）

伪类选择器的属性：link visited hover active

说明：

1) a:hover 必须置于 a:link和a:visited之后，才有效

2) a:active 必须置于 a:hover之后才有效

3) 伪类名称对大小写不敏感

8、CSS其它选择器

css继承特性，从父元素那继承部分css属性

选择器的优先级

ID选择优先级最高（id选择器定义具有唯一性）

class选择器次之（class选择器可以多个）

元素选择器再次之

其它选择器优先级主要根据定义的先后顺序，最后定义的优先级高

!important 加重选择器的优先级，添加在样式规则之后，中间用空格隔开。

CSS选择器命名规则

1：采用英文字母，数字以及"-" 和 "_" 命名

2：以小写字母开头，不能以数字和"-" 和 "_" 开头

3：使用有意义的命名规范

常用CSS命名

header

页头

main

主体

footer

页尾

nav

导航

sidebar

侧栏

container

容器

column

栏目

title

标签

menu

菜单

submenu

子菜单

*列举常用命名，大家根据自身项目及团队的规则命名

耐心学习基础知识，基础是盖房的根基，必须打结实。

如果您觉得有用，记得在下方点赞、关注、留言，我会定期奉 上更多的惊喜哦，您的打赏支持才是我继续努力的动力，么么哒。

每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术。陪有梦想的人一起成长！