css选择器命名规范?

发布网友 发布时间：2024-09-17 08:04

我来回答

共1个回答

热心网友 时间：2024-09-29 04:51

css中id选择器的命名规则有哪些

基本上这些命名都符合标识符的命名规则

1、必须由字母、数字、下划线和美元符号组成

2、首字母必须是字母或下划线

3、建议采用驼峰式命名如：newCont，从第二个单词开始首字母大写

##CSS选择器

#标签选择器

#id选择器

#类选择器

#后代选择器

#子元素选择器

#交集选择器

#并集选择器

#兄弟选择器(相邻兄弟选择器/通用兄弟选择器)

#序选择器(CSS3中最具代表性)

#属性选择器

#通配符选择器

#伪元素选择器

标签选择器

1.什么是标签选择器?

作用:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性

2.格式:

标签名称{

属性:值;

}

注意点:

1.标签选择器选中的是当前界面中所有的标签,而不能单独选中某一个标签

2.标签选择器无论藏得多深都能被选中

3.只要是HTML中的标签就可以作为标签选择器

id选择器

1.什么是id选择器?

作用:根据指定的id名称找到对应的标签,然后设置属性

格式:

#id名称{

属性:值;

}

注意点:

1.每个HTML标签都有一个属性叫做id,也就是说每个标签都可以设置id

2.在同一个界面的id名称是不可以重复的

3.在编写id选择器时一定要在id名称前面加上#

4

id的名称是有一定的规范的

4.1.if的名称只能由字母/数字/下划线组成

4.2.id名称不能以数字开头

4.3id名称不能是HTML标签的名称

4.4在企业开发中一般情况下如果仅仅是为了设置样式,我们不会使用id,因为前端开发中是留给js使用的

类选择器

什么是类选择器?

作用:根据指定的类名称找到对应的标签,然后设置属性

格式:

.类名称{

属性:值;

}

注意点:

1.每个HTML标签都有一个属性叫做class,也就是说每个标签都可以设置class

2.在同一个界面的class名称是可以重复的

3.在编写class选择器时一定要在class名称前面加上.

4.类名的命名规范和id名称的命名规范一样

5.类名解释专门用来给某个特定的标签设置样式的

6.在HTML中每个标签可以同时绑定多个类名

格式:

标签名称class=“类名1类名2类名3”

错误写法

id和class的区别?

1.1

id相当于人的身份证不可以重复

class相当于人的名称可以重复

1.2

一个HTML标签只能绑定一个id名称

一个HTML表圈可以绑定多个class名称

2.id选择器是以#开头

class选择器以.开头

3.在企业开发中到底使用id选择器还是用class选择器

id选择器一般是给js用的,除非特殊情况,否则不要用id去设置样式

4.在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平

后代选择器

什么是后代选择器?

-作用:找到指定标签的所有特定的后代标签,设置属性

-格式:

标签名称1标签名称2{

属性:值;

}

先找到名称叫做标签名称1的标签,然后再在这个标签下面去查找所有名称叫做标签名称2的标签,然后再设置属性

-注意点:

1.后代选择器必须用空格隔开

2.后代不仅仅是儿子,也包括孙子/重孙子.只要最终是放到指定标签中的都是后代

3.后代选择器不仅仅可以使用标签名称还可以使用其他选择器

子元素选择器

什么是子元素选择器?

-作用:找到所有标签中特定的直接子元素,然后设置属性

-格式:

标签名称1标签名称2{

属性:值;

}

先找到名称叫做”标签名称1”的标签,然后再这个标签中找到所有的直接子元素名称叫做”标签名称2”的元素

-注意点:

1.子元素选择器只会查找儿子,不会查找其他被嵌套的标签

2.子元素选择器,之间需要用连接,而且不能有空格

3.子元素选择器不仅仅可以使用标签名称还可以用其他选择器

4.子元素选择器可以通过符号一直延续下去

1.后代选择器和子元素选择器之间的区别?

1.1

后代选择器使用空格作为连接符号

子元素选择器使用作为连接符号

1.2

后代选择器会选中指定标签中,所有的特定后代标签

子元素选择器只会选中指定标签中,所有的特定直接标签

2.后代选择器和子元素选择器之间的共同点

2.1

后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器

2.2

后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去

3.在企业开发中如何选择

交集选择器

什么是交集选择器?

-作用:给所有选择器选中的标签中,相交的那部分标签设置属性

-格式:

选择器1选择器2{

属性:值;

}

-注意点:

1.选择器1和选择器2之间没有任何的连接符号

2.选择器可以使用标签的名称/id名称/class名称

3.交集选择器仅仅作为了解,企业开发中用的并不多

并集选择器

什么是并集选择器?

-作用:给所有选择器选中的标签设置属性

格式:

选择器1,选择器2{

属性:值;

}

注意点:

1.并集选择器必须使用,来连接

2.2.选择器可以使用标签的名称/id名称/class名称

兄弟选择器

1.相邻兄弟选择器CSS2

-作用:给指定选择器后面[紧跟]的那个选择器选中的标签设置属性

格式:

选择器1+选择器2{

属性:值;

}

注意点:

1.相邻兄弟选择器必须通过+连接

2.相邻兄弟选择器只能选中紧跟其后面的那个标签,不能选中被隔开的标签

2.通用兄弟选择器CSS3

-作用:给指定的选择器后面的所有选择器选中的所有标签都设置属性

-格式:

选择器1~选择器2{

属性:值;

}

-注意点:

1.通用兄弟选择器必须用~连接

2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的标签后面的所有标签

序选择器(CSS3中新增的选择器中最具代表性)

1.同级别的第几个

:first-child选中同级别中的第一个标签

:last-child选中同级别中的最后一个标签

:nth-child(n)选中同级别中的第n个标签

:nth-last-child(n)选中同级别中的倒数第n个标签

:only-child选中父元素中唯一的子元素

:nth-child(odd)奇数选中同级别中的所有奇数个标签

:nth-child(even)偶数选中同级别中的所有偶数个标签

:nth-child(xn+y)选中同级别中的所有的用户自定义的(xn+y)个标签

x和y是用户自定义的,而n是一个计数器,从0开始递增有多少个标签n就递增多少次

注意点:不区分类型

2.同类型的第几个

:first-of-type选中同级别中同类型的第一个标签

:last-of-type选中同级别中同类型的最后一个

:nth-of-type(n)选中同级别中同类型的第n个标签

:nth-last-of-type(n)选中同级别中同类型的倒数第n个标签

:only-of-type选中父元素中唯一类型的某个标签

属性选择器

什么是属性选择器?

作用:根据指定的属性名称找到对应标签,然后设置属性

格式:

[attribute]

作用:根据指定的属性名称找到对应的标签,然后设置属性

[attribute=value]

作用:找到有指定属性,并且属性的取值等于value的标签,然后设置属性

最常见的应用场景,就是用于区分input属性

1.属性的取值是以什么开头的

[attribute|=value]CSS2

[attribute^=value]CSS3

两者之间的区别:

CSS2中的只能找到value开头并以-和其他内容隔开的标签,而CSS3可以找到以value开头的所有标签

2.属性的取值是以什么结尾的

[attribute$=value]?CSS3

3.属性的取值是否包含某个特定的值的

[attribute~=value]CSS2

[attribute*=value]CSS3

两者之间的区别:

CSS2中的只能找到的单词,也就是说value用空格和其他内容隔开的标签,而CSS3可以找到包含value的所有标签

通配符选择器

什么是通配符选择器?

-作用:给当前界面上所有的标签设置属性

-格式:

*{

属性:值;

}

-注意点:

由于通配符是设置界面上所有的标签的属性,所以在设置前会遍历所有的标签,如果当前界面上的标签比较多,那么性能会比较差,所以企业开发中一般不会使用通配符选择器

1.什么是伪元素选择器?

伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素

格式:

给指定标签的内容前面添加一个子元素

标签名称::before{

属性名称:值;

}

给指定标签的内容后面添加一个子元素

标签名称::before{

属性名称:值;

}

类选择器允许以一种于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。

而与类选择器不同,id选择器在HTML文档仅仅使用一次,控制单个元素的样式。

.class1.class2id和class选择器和选择器连写的时候中间没有分隔符，.和#本身充当分隔符的元素

element#idid和class选择器和选择器连写的时候中间没有分隔符，.和#本身充当分隔符的元素

*属性选择器

*伪类选择器

*伪元素选择器

优先级:从高到低

在支持CSS的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a;link表示未被访问状态;

a:hover表示鼠标悬停状态;

a:active表示活动状态;

a;visited表示已被访问状态;

他们的顺序应该是"LVHA"的顺序.

E:first-child匹配元素E的第一个子元素

E:link匹配所有未被点击的链接

E:visited匹配所有已被点击的链接

E:active匹配鼠标已经其上按下、还没有释放的E元素

E:hover匹配鼠标悬停其上的E元素

E:focus匹配获得当前焦点的E元素

E:lang(c)匹配lang属性等于c的E元素

E:enabled匹配表单中可用的元素

E:disabled匹配表单中禁用的元素

E:checked匹配表单中被选中的radio或checkbox元素

E::selection匹配用户当前选中的元素

E:root匹配文档的根元素，对于HTML文档，就是HTML元素

E:nth-child(n)匹配其父元素的第n个子元素，第一个编号为1

E:nth-last-child(n)匹配其父元素的倒数第n个子元素，第一个编号为1

E:nth-of-type(n)与:nth-child()作用类似，但是仅匹配使用同种标签的元素

E:nth-last-of-type(n)与:nth-last-child()作用类似，但是仅匹配使用同种标签的元素

E:last-child匹配父元素的最后一个子元素，等同于:nth-last-child(1)

E:first-of-type匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)

E:last-of-type匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)

E:only-child匹配父元素下仅有的一个子元素，等同于:first-child:last-child或:nth-child(1):nth-last-child(1)

E:only-of-type匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)

E:empty匹配一个不包含任何子元素的元素，文本节点也被看作子元素

E:not(selector)匹配不符合当前选择器的任何元素

参考

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.SelectorsMDN

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

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

6.征服高级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用于一个元素被激活时（即按下鼠标之后放开鼠标之前的状态）

伪类选择器的属性：linkvisitedhoveractive

说明：

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.标签名选择器div{color：Red;}即页面中的各个标签名的css样式

2.类选择器.divClass{color:Red;}即定义的每个标签的class中的css样式

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

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

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

热心网友 时间：2024-09-29 04:48

css中id选择器的命名规则有哪些

基本上这些命名都符合标识符的命名规则

1、必须由字母、数字、下划线和美元符号组成

2、首字母必须是字母或下划线

3、建议采用驼峰式命名如：newCont，从第二个单词开始首字母大写

##CSS选择器

#标签选择器

#id选择器

#类选择器

#后代选择器

#子元素选择器

#交集选择器

#并集选择器

#兄弟选择器(相邻兄弟选择器/通用兄弟选择器)

#序选择器(CSS3中最具代表性)

#属性选择器

#通配符选择器

#伪元素选择器

标签选择器

1.什么是标签选择器?

作用:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性

2.格式:

标签名称{

属性:值;

}

注意点:

1.标签选择器选中的是当前界面中所有的标签,而不能单独选中某一个标签

2.标签选择器无论藏得多深都能被选中

3.只要是HTML中的标签就可以作为标签选择器

id选择器

1.什么是id选择器?

作用:根据指定的id名称找到对应的标签,然后设置属性

格式:

#id名称{

属性:值;

}

注意点:

1.每个HTML标签都有一个属性叫做id,也就是说每个标签都可以设置id

2.在同一个界面的id名称是不可以重复的

3.在编写id选择器时一定要在id名称前面加上#

4

id的名称是有一定的规范的

4.1.if的名称只能由字母/数字/下划线组成

4.2.id名称不能以数字开头

4.3id名称不能是HTML标签的名称

4.4在企业开发中一般情况下如果仅仅是为了设置样式,我们不会使用id,因为前端开发中是留给js使用的

类选择器

什么是类选择器?

作用:根据指定的类名称找到对应的标签,然后设置属性

格式:

.类名称{

属性:值;

}

注意点:

1.每个HTML标签都有一个属性叫做class,也就是说每个标签都可以设置class

2.在同一个界面的class名称是可以重复的

3.在编写class选择器时一定要在class名称前面加上.

4.类名的命名规范和id名称的命名规范一样

5.类名解释专门用来给某个特定的标签设置样式的

6.在HTML中每个标签可以同时绑定多个类名

格式:

标签名称class=“类名1类名2类名3”

错误写法

id和class的区别?

1.1

id相当于人的身份证不可以重复

class相当于人的名称可以重复

1.2

一个HTML标签只能绑定一个id名称

一个HTML表圈可以绑定多个class名称

2.id选择器是以#开头

class选择器以.开头

3.在企业开发中到底使用id选择器还是用class选择器

id选择器一般是给js用的,除非特殊情况,否则不要用id去设置样式

4.在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平

后代选择器

什么是后代选择器?

-作用:找到指定标签的所有特定的后代标签,设置属性

-格式:

标签名称1标签名称2{

属性:值;

}

先找到名称叫做标签名称1的标签,然后再在这个标签下面去查找所有名称叫做标签名称2的标签,然后再设置属性

-注意点:

1.后代选择器必须用空格隔开

2.后代不仅仅是儿子,也包括孙子/重孙子.只要最终是放到指定标签中的都是后代

3.后代选择器不仅仅可以使用标签名称还可以使用其他选择器

子元素选择器

什么是子元素选择器?

-作用:找到所有标签中特定的直接子元素,然后设置属性

-格式:

标签名称1标签名称2{

属性:值;

}

先找到名称叫做”标签名称1”的标签,然后再这个标签中找到所有的直接子元素名称叫做”标签名称2”的元素

-注意点:

1.子元素选择器只会查找儿子,不会查找其他被嵌套的标签

2.子元素选择器,之间需要用连接,而且不能有空格

3.子元素选择器不仅仅可以使用标签名称还可以用其他选择器

4.子元素选择器可以通过符号一直延续下去

1.后代选择器和子元素选择器之间的区别?

1.1

后代选择器使用空格作为连接符号

子元素选择器使用作为连接符号

1.2

后代选择器会选中指定标签中,所有的特定后代标签

子元素选择器只会选中指定标签中,所有的特定直接标签

2.后代选择器和子元素选择器之间的共同点

2.1

后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器

2.2

后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去

3.在企业开发中如何选择

交集选择器

什么是交集选择器?

-作用:给所有选择器选中的标签中,相交的那部分标签设置属性

-格式:

选择器1选择器2{

属性:值;

}

-注意点:

1.选择器1和选择器2之间没有任何的连接符号

2.选择器可以使用标签的名称/id名称/class名称

3.交集选择器仅仅作为了解,企业开发中用的并不多

并集选择器

什么是并集选择器?

-作用:给所有选择器选中的标签设置属性

格式:

选择器1,选择器2{

属性:值;

}

注意点:

1.并集选择器必须使用,来连接

2.2.选择器可以使用标签的名称/id名称/class名称

兄弟选择器

1.相邻兄弟选择器CSS2

-作用:给指定选择器后面[紧跟]的那个选择器选中的标签设置属性

格式:

选择器1+选择器2{

属性:值;

}

注意点:

1.相邻兄弟选择器必须通过+连接

2.相邻兄弟选择器只能选中紧跟其后面的那个标签,不能选中被隔开的标签

2.通用兄弟选择器CSS3

-作用:给指定的选择器后面的所有选择器选中的所有标签都设置属性

-格式:

选择器1~选择器2{

属性:值;

}

-注意点:

1.通用兄弟选择器必须用~连接

2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的标签后面的所有标签

序选择器(CSS3中新增的选择器中最具代表性)

1.同级别的第几个

:first-child选中同级别中的第一个标签

:last-child选中同级别中的最后一个标签

:nth-child(n)选中同级别中的第n个标签

:nth-last-child(n)选中同级别中的倒数第n个标签

:only-child选中父元素中唯一的子元素

:nth-child(odd)奇数选中同级别中的所有奇数个标签

:nth-child(even)偶数选中同级别中的所有偶数个标签

:nth-child(xn+y)选中同级别中的所有的用户自定义的(xn+y)个标签

x和y是用户自定义的,而n是一个计数器,从0开始递增有多少个标签n就递增多少次

注意点:不区分类型

2.同类型的第几个

:first-of-type选中同级别中同类型的第一个标签

:last-of-type选中同级别中同类型的最后一个

:nth-of-type(n)选中同级别中同类型的第n个标签

:nth-last-of-type(n)选中同级别中同类型的倒数第n个标签

:only-of-type选中父元素中唯一类型的某个标签

属性选择器

什么是属性选择器?

作用:根据指定的属性名称找到对应标签,然后设置属性

格式:

[attribute]

作用:根据指定的属性名称找到对应的标签,然后设置属性

[attribute=value]

作用:找到有指定属性,并且属性的取值等于value的标签,然后设置属性

最常见的应用场景,就是用于区分input属性

1.属性的取值是以什么开头的

[attribute|=value]CSS2

[attribute^=value]CSS3

两者之间的区别:

CSS2中的只能找到value开头并以-和其他内容隔开的标签,而CSS3可以找到以value开头的所有标签

2.属性的取值是以什么结尾的

[attribute$=value]?CSS3

3.属性的取值是否包含某个特定的值的

[attribute~=value]CSS2

[attribute*=value]CSS3

两者之间的区别:

CSS2中的只能找到的单词,也就是说value用空格和其他内容隔开的标签,而CSS3可以找到包含value的所有标签

通配符选择器

什么是通配符选择器?

-作用:给当前界面上所有的标签设置属性

-格式:

*{

属性:值;

}

-注意点:

由于通配符是设置界面上所有的标签的属性,所以在设置前会遍历所有的标签,如果当前界面上的标签比较多,那么性能会比较差,所以企业开发中一般不会使用通配符选择器

1.什么是伪元素选择器?

伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素

格式:

给指定标签的内容前面添加一个子元素

标签名称::before{

属性名称:值;

}

给指定标签的内容后面添加一个子元素

标签名称::before{

属性名称:值;

}

类选择器允许以一种于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。

而与类选择器不同,id选择器在HTML文档仅仅使用一次,控制单个元素的样式。

.class1.class2id和class选择器和选择器连写的时候中间没有分隔符，.和#本身充当分隔符的元素

element#idid和class选择器和选择器连写的时候中间没有分隔符，.和#本身充当分隔符的元素

*属性选择器

*伪类选择器

*伪元素选择器

优先级:从高到低

在支持CSS的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a;link表示未被访问状态;

a:hover表示鼠标悬停状态;

a:active表示活动状态;

a;visited表示已被访问状态;

他们的顺序应该是"LVHA"的顺序.

E:first-child匹配元素E的第一个子元素

E:link匹配所有未被点击的链接

E:visited匹配所有已被点击的链接

E:active匹配鼠标已经其上按下、还没有释放的E元素

E:hover匹配鼠标悬停其上的E元素

E:focus匹配获得当前焦点的E元素

E:lang(c)匹配lang属性等于c的E元素

E:enabled匹配表单中可用的元素

E:disabled匹配表单中禁用的元素

E:checked匹配表单中被选中的radio或checkbox元素

E::selection匹配用户当前选中的元素

E:root匹配文档的根元素，对于HTML文档，就是HTML元素

E:nth-child(n)匹配其父元素的第n个子元素，第一个编号为1

E:nth-last-child(n)匹配其父元素的倒数第n个子元素，第一个编号为1

E:nth-of-type(n)与:nth-child()作用类似，但是仅匹配使用同种标签的元素

E:nth-last-of-type(n)与:nth-last-child()作用类似，但是仅匹配使用同种标签的元素

E:last-child匹配父元素的最后一个子元素，等同于:nth-last-child(1)

E:first-of-type匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)

E:last-of-type匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)

E:only-child匹配父元素下仅有的一个子元素，等同于:first-child:last-child或:nth-child(1):nth-last-child(1)

E:only-of-type匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)

E:empty匹配一个不包含任何子元素的元素，文本节点也被看作子元素

E:not(selector)匹配不符合当前选择器的任何元素

参考

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.SelectorsMDN

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

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

6.征服高级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用于一个元素被激活时（即按下鼠标之后放开鼠标之前的状态）

伪类选择器的属性：linkvisitedhoveractive

说明：

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.标签名选择器div{color：Red;}即页面中的各个标签名的css样式

2.类选择器.divClass{color:Red;}即定义的每个标签的class中的css样式

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

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

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