13518219792
CSS中常用的选择器：
创新互联建站-专业网站定制、快速模板网站建设、高性价比浔阳网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式浔阳网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖浔阳地区。费用合理售后完善，十余年实体公司更值得信赖。
（一）基本选择器（二）层次选择器（三）动态伪类选择器（四）目标伪类选择器
（五）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-)
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教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术。陪有梦想的人一起成长！
1、标记选择器（如：body,div,p,ul,li）
2、id选择器（如：id="name",id="name_txt"）
3、类选择器（如：id="name",id="name_txt"）
4、后代选择器（如：#head.navulli从父集到子孙集的选择器）
5、子元素选择器（如：divp,带大于号）
6、伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）
看完了基本的css选择器类型后，我们接着来看一下css优先级的概念。
当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，用到谁的值谁的优先级就高。
我们来看一下css选择器优先级的算法：
每个规则对应一个初始"四位数"：0、0、0、0
若是行内选择符，则加1、0、0、0
若是ID选择符，则加0、1、0、0
若是类选择符/伪类选择符，则分别加0、0、1、0
若是元素选择符，则分别加0、0、0、1
算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。
看完了上述内容，那我们就来看看css选择器优先级的具体排序。
css选择器优先级最高到最低顺序为：
1.id选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.子选择器（ulli）
5.后代选择器（lia）
6.伪类选择（a:hover,li:nth-child）
最后，需要注意的是：
!important的优先级是最高的，但出现冲突时则需比较”四位数“;
优先级相同时，则采用就近原则，选择最后出现的样式;
继承得来的属性，其优先级最低。
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。）。
8、字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含) 。
扩展资料：
css选择器的基本定义是：每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。
说了这么一大段话，其实简而言之，就是要使用css对html页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，html页面中的元素就是通过CSS选择器进行控制的。
参考资料来源：百度百科—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选择器
