css选择器命名规则,CSS选择器与优先级详解（一）
css选择器命名规则,CSS选择器与优先级详解（一）详细介绍
本文目录一览： css中id选择器的命名规则有哪些
这次给大家科普一下css中id选择器的命名规则有哪些，给CSS中ID选择器命名的时候有哪些注意事项，下面就是总结，一起来看一下。大小写敏感只能包含[a-zA-Z0-9]、-,，其中不能以、-、0-9开头在CSS的命名规范中，名称不能以数字开始，只能以字母、连字符、下划线开始。之后可以是字母、连字符、下划线或数字。同时应该注意的是，虽然在HTML4.01及以前的版本不严谨，但在XHTML中，CSS中的命名是区分大小写。1.首先说说语义性所谓语义性，即名字应当描述内容，而不是描述表现，例子如下?表现型（不提倡）PurpleBold(紫色粗体)BigHeading(大号标题)top-left-box(左上方框)underlined-and-green(下划线绿色)boxLeft(左侧框)red(红色)红色标示涉及元素的表现形式，这在命名里是不允许的，因为表现形式是变化的，当变化发生，不仅要修改CSS的class和id名，还要修改html相应元素的class和id名，相当麻烦，当你所编辑的是大型网站，出现多处这样的修改，是非常耗时且头疼的。所以应该尽可能采用适应变化的命名，即命名与内容紧密相关。?语义型（提倡）sidebar(侧边栏)warning(警告)当然，有些时候适当运用表现来命名会更灵活。如，用bordered(带边框)的表现名给网站多处添加同样的样式。记住，最佳方案不是最干净的那个，也不是最漂亮的那个，与其拘泥成法，不如将思路放开一些。2.可接受的字符最佳规则：始终使用字母、数字或连字符，并且始终以字母开头记住，class和id名称是区分大小写的。不要使用下划线，不要以数字或连字符打头，不接受“*”，“/”，“\”。虽然新的浏览器对生僻字符集的支持功能更多，但不是所有的浏览器如此，为了保证兼容性，请遵循最佳规则吧。3.惯例使用一些约定俗称的惯例名称，可提高代码可预测性，既让自己和他人容易理解，也有助于屏幕阅读器和分析器的工作，提高SEO（搜索引擎优化）惯例参照Web前端开发规范手册4.大小写驼峰式（缩写单词的每个字母采用同样的大小写：pdfLink linkPDF）连字符5.命名空间加前缀，如：wp-users。命名空间需要制定团队内的命名空间约定。这是防御式CSS采用的技术之一，通过命名空间隔离代码，避免冲突，使其不影响原有和未来的代码。相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：网页中的图片格式应该如何选择移动端布局中的流式布局是什么原理让元素水平垂直居中冷门方法html+css的垂直居中容器js中比较运算符应如何科学使用
css命名规则
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态态：status
投票：vote
合作伙伴：partner
注释的写法
/* Footer */
内容区
/* End Footer */
id的命名
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
CSS的命名规则的话，这跟自己想怎么命名就怎么命名，只要自己能看懂就行。
这个实际上就是根据一个规律性进行一个命名的，它的命名规则还是比较好的。
使用css的时候，只要是没有数字开头的这样的命名都是可以的，并没有什么太多的规则。
S，命名规则这个就要看具体的情况了，一般都是按照武器的命名的或者人物的命名，也有特殊的情况
CSS书写顺序
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
CSS书写规范使用CSS缩写属性
CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
去掉小数点前的“0”
简写命名
很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦!
16进制颜色代码缩写
有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。
连字符CSS选择器命名规范
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器，为什么呢?
输入的时候少按一个shift键;
浏览器兼容问题 (比如使用_tips的选择器命名，在IE6是无效的)
能良好区分JavaScript变量命名(JS变量命名是用“_”)
不要随意使用Id
id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
为选择器添加状态前缀
有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。
CSS命名规范(规则)常用的CSS命名规则
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签：tags
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
注释的写法:
/* Header */
内容区
/* End Header */
Id的命名:
1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：register
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
注意事项::
1.一律小写;
2.尽量用英文;
3.不加中槓和下划线;
4.尽量不缩写，除非一看就明白的单词。
CSS样式表文件命名
主要的 master.css
模块 module.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
css选择器命名规则？
h1.maintitle这样命名，只能用在以下形式
如果写成.maintitle h1，则是下面的形式
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} 即具有相同样式的标签分组显示
css3的基本选择器有哪几种？
1、标签选择器，也称为元素选择器。
标签选择器的基本形式如下：tagName{property:value}，其中tagName是标签名称，property是css的属性。
2、类选择器。
类选择器用来为一系列标签定义相同的呈现方式，常用的语法是 .classValue{property:value}。其中classValue是类选择器的名称，这是由css编写者自己命名。(所有浏览器都支持类选择器，但多类选择器(.className1.className2)不被ie6支持。)
3、ID选择器。
ID选择器定义的是某一个特定的html元素，一个网页中只有一个标签或元素使用某一ID的属性值。ID选择器的基本语法格式如下：#idValue{property:value}。其中idValue是ID选择器的名称，可以由CSS编写者自己编写。(所有浏览器都支持)
4、全局选择器。
全局选择器就是对所有的htmlz元素起作用。语法格式为： *{propery:value}。其中“*”表示对所有元素起作用，property表示css的属性，value表示属性值。
5、复合选择器。
将多种选择器进行搭配，可以构成一种复合选择器，也称为组合选择器。
6、继承选择器。
继承的规则是子标签在没有定义的情况下，继承父标签的选择器;当子标签重复定义了父标签的声明时，执行子标签选择器。
7、伪类选择器。
伪类选择器主要应用在标签上，它由四种状态：未访问链接(link)、已访问链接(visited)、激活链接(active)、鼠标停留在连接上(hover)。
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、简易属性选择器
只顾其名不顾其值，这是简易属性选择器的特点。
h1[class] {color: silver;}将会作用于任何带class的h1元素，不管class的值是什么。所以
Hello
、
Serenity
、
Fooling
的h1都会受到这条规则的影响。
2、精确属性值选择器
3、部分属性值选择器
如其名，只要属性值部分匹配（这里的部分，实际上要匹配整个单词）就会作用于该元素。让我们来看个例子：
When handling plutonium, care must be taken to avoid the formation of a critical mass.
p[class~="warning"] {font-weight: bold;}
和
p[class~="urgent"] {font-weight: bold;}
中任何一条都可以让这个p的字体变粗。
该选择器十分有用，比如你要样式化插图，其title中都含字符串”Figure”，如 title= "Figure 5：xxx说明"，则你可以使用img[title~="Figure"] 。
需要注重的是，如我第一句就强调的，你需要匹配的是整个单词，img[title~="Figure"] 不会匹配title= "Figure5：xxx说明"。
另外，我做了个小小的测试，你把例子中的“Figure”改成“插图”，把img[title~="Figure"] 改成img[title~="插图"] ，在Firefox中依然可以匹配，不管编码（encoding）是GB2312还是UTF-8。看来CSS对中文的支持还不赖。
4、非凡属性选择器
有点怪，这个选择器。它是这样工作的，嗯，举个例子比描述更轻易。
*[lang|="en"] {color: white;}，这条规则（rule）将会选择属性lang的值en或者en-打头的元素。就是说，它可以匹配
Hello!
、
Greetings!
和
而不匹配
Bonjour!
和Jrooana!。
详解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教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术。陪有梦想的人一起成长！
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选择器
HTML，CSS里面关于 id，class，name 属性的区别和用法
1、HTML 中 id与name 区别
一个name可以同时对应多个控件，比如checkbox和radio
而id必须是全文档中唯一的
id要符合标识的要求，比如大小写敏感，最好不要包含下划线（因为不兼容CSS）。而name基本上没有什么要求，甚至可以用数字。table、tr、td、div、p、span、h1、li等元素一般用id。
与表单相关的元素也可以赋ID值, 但为这些元素赋ID值的时候引用这些元素的方法就要变一下了，具体的如下：
赋name时，引用元素的方式: document.formName.inputName 或 document.frames("frameName")
赋id时，引用元素的方式: document.all.inputID 或 document.all.frameID
除去与表单相关的元素，只能赋id不能赋name，这些元素有body、li、a、table、tr、td、th、p、div、span、pre、dl、dt、dd、font、b等等
2、CSS 中 id、class属性的区别
1）class是设置标签的类，用于指定元素属于何种样式的类。在CSS样式中以小写的“点”及“.”来命名，在html页面里则以class="css5" 来选择调用，命名好的CSS又叫css选择器。
如： .css5{属性：属性值;} 选择器在html调用为“
.baobao { color: lime; background: #ff80c0 }
使用方法：class="baobao"
2）id是设置标签的标识。用于定义一个元素的独特的样式。在CSS样式定义的时候 以“#”来开头命名id名称
如一个CSS规则：
#binbin { font-size: larger }
使用方法：id="binbin"
id是一个标签，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆；
3）css里的id用法与class用法一样，只是把class换成id。如例子：
在CSS样式定义ID
#css5 {height:25px; width: 200px;}
调用ID ：
class是一个样式，可以套在任何结构和内容上，就像一件衣服。
扩展资料
CSS选择器
类型选择器
CSS中的一种选择器是元素类型的名称。使用这种选择器(称为类型选择器)，可以向这种元素类型的每个实例上应用声明。例如，以下简单规则的选择器是H1，因此规则作用于文档中所有的H1元素：
H1 {color:red}
简单属性选择器
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属性能够绕过样式表将声明直接放置到文档的开始标记中。
组合选择器类型
可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。通过组合选择器，可以更加精确地处理希望赋予某种表示的元素。例如，要组合类型选择器和类选择器，一个元素必须满足两个要求：它必须是正确的类型和正确的类以便使样式规则可以作用于它。
外部信息：伪类和伪元素
在CSS1中，样式通常是基于在HTML源代码中出现的标记和属性。对于很多设计情景而言这种做法完全可行，但是它无法实现设计者希望获得的一些常见的设计效果。
设计伪类和伪元素可以实现其中的一些效果。这两种机制扩充了CSS的表现能力。
在CSS1中，使用伪类可以根据一些情况改变文档中链接的样式，如根据链接是否被访问，何时被访问以及用户和文档的交互方式来应用改变。借助于伪元素，可以更改元素的第一个字母和第一行的样式，或者添加源文档中没有出现过的元素。
伪类和伪元素都不存在于HTML；也就是说，它们在HTML代码中是不可见的。这两种机制都得到了精心设计以便能够在CSS以后的版本中做进一步地扩充；也就是说实现更多的效果。
参考资料来源：百度百科-CSS （层叠样式表）
1. name：指定标签的名称
应用场景：
①form表单：name可作为转递给服务器表单列表的变量名；如上面的传到服务器的名称为：username='text的值'。
②input type='radio'单选标签：把几个单选标签的 name设为一个相同值时，将会进行单选操作。
男
女
③快速获取一组name相同的标签：获取拥有相同name的标签，一起进行操作，如:更改属性、注册事件等。
function changtxtcolor() {
var txts = document.getElementsByName('txtcolor'); //获取所有name=txtcolor 的标签
for (var i = 0; i < txts.length; i++) { //循环遍历标签，并把背景色改为red
txts[i].style.backgroundColor = 'red';
}
}
2. id：指定标签的唯一标识
应用场景：
①根据提供的唯一id号，快速获取标签对象。如：document.getElementById(id)
②用于充当label标签for属性的值：示例：
，表示单击此label标签时，id为userid的标签获得焦点。
3. class：指定标签的类名
应用场景
①CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。
一个name可以同时对应多个控件，比如checkbox和radio.
name做为css里的伪类筛选。input[name="a"] 但是ie不支持。需要借住js来实现
class是设置标签的类，用于指定元素属于何种样式的类。在CSS样式中以小写的“点”及“.”来命名，在html页面里则以class="类名" 来选择调用，命名好的CSS又叫css选择器。
如： .css5{属性：属性值;} 选择器在html调用为“
.ba{ color:#000}
使用方法：class="ba"
id是设置标签的标识。用于定义一个元素的独特的样式。在CSS样式定义的时候 以“#”来开头命名id名称
如一个CSS规则：
#bi{ font-size: larger }
使用方法：id="bi"
id是一个标签，用于区分不同的结构和内容，一个页面中只能出现一个，不能重复。虽然重复了不会报错，但这是一种规范
css 里id和class的优先级：对于有定义同一元素css属性的情况下
id优先级最高
如
#a{color:#f00;}
.b{color:#000;}
最终结果是红色，因为id优先级最高
1、id: id是设置标签的标识。用于定义一个元素的独特的样式。在CSS样式定义的时候 以“#”来开头命名id名称。
用法：若一个标签的id="myid",那么使用它的时候通过”$("#myid")“来获取当前标签或使用“#myid{}”来定义CSS样式。
2、class：根据用户定义的标准对一个或多个元素进行标记和定义，一个标签可以有多个class，例如class="myclass1 myclass2",当前标签就有两个class，分别为myclass1和myclass2。
用法：若一个标签有一个class="myclass",那么获取这个标签可以使用$(".myclass"),同时使用”.myclass{}“来定义CSS样式。
3、name：从名字可以知道这是用于定义一个标签的名字的属性，name可用于数据获取，常用于表单数据的获取。
用法：若一个输入框的name="myname" ，常用request.getparameter("myname")来获取当前输入框的值。