css选择器样式规则,css选择器样式规则的说法

详解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教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术。陪有梦想的人一起成长！

相关问答

Q1: 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} 即具有相同样式的标签分组显示

Q2: 2、css 选择器

使用 * 可为所有元素设置样式。

根据标签为元素设置样式

同时设置多个元素组合

类选择器是为一类状态声明样式规则，下面是把文本居中定义为类样式。

将类选择器指定为具体标签。这样样式的权重就提高了

注意span.help-block不能写成 span .help-block。标签选择器和类选择器中间加了空格的话，就变成了 span下面所有class是help-block的选择器了

HTML中元素是以父子级、兄弟关系存在的。后代选择器指元素内的元素（不只是子元素，是后代元素，子集，孙子级，所有的。。。）。

子元素选择器中选择子元素，不包括孙级及以下元素。

用于选择紧挨着的同级兄弟元素。

用于选择后面的所有指定的兄弟元素或者所有元素。

为具有 class 属性的h1标签设置样式

约束多个属性

具体属性值设置样式

^ 以指定值开头的元素

$ 以指定值结尾的元素

属性内部任何位置出现值的元素，包含关系

~ 属性值中包含指定词汇的元素

| 以指定值开头或以属性连接破折号的元素

Q3: 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选择器