大家好，今天来为大家分享css选择器命名规则的一些知识点，和css类选择器使用实例的问题解析，大家要是都明白，那么可以忽略，如果不太清楚的话可以看看本篇文章，相信很大概率可以解决您的问题，接下来我们就一起来看看吧！
一、css命名规则
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
5.其他(animation, transition等)
CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦!
有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器，为什么呢?
浏览器兼容问题(比如使用_tips的选择器命名，在IE6是无效的)
能良好区分JavaScript变量命名(JS变量命名是用“_”)
id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。
CSS命名规范(规则)常用的CSS命名规则
页面外围控制整体布局宽度：wrapper
页面外围控制整体布局宽度：wrapper
4.尽量不缩写，除非一看就明白的单词。
二、类选择器命名格式以什么符号开头
W3C CSS2.1的 4.1.3节中提到：标识符（包括选择器中的元素名，类和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上，再加连字号（-）和下划线（_）；它们不能以数字，或一个连字号后跟数字为开头。它们还可以包含转义字符加任何ISO 10646字符作为一个数字编码。
由于设计到的字符很多，本文只针对字符[a-zA-Z0-9]，再加连字号（-）和下划线（_）进行讨论。关于CSS中允许使用的字符和大小写信息
在W3C CSS2.1说明文档中，只提到选择器标识符不能以数字，或一个连字号后跟数字为开头。除此之外，没有相关的说明。那么各浏览器下的表现是否遵循这一规则呢？
三、css选择器有哪些各种选择器优先级大小顺序
CSS中的一种选择器是元素类型的名称。使用这种选择器(称为类型选择器)，可以向这种元素类型的每个实例上应用声明。例如，以下简单规则的选择器是H1，因此规则作用于文档中所有的H1元素。
CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。从本质上讲，可以使用CLASS属性来分类元素，在样式表中创建规则来引用CLASS属性的值，然后浏览器自动将这些属性应用到该组元素。
类选择器以标志符(句点)开头，用于指示后面是哪种类型的选择器。对于类选择器，之所以选择句点是因为在很多编程语言中它与术语"类"相关联。翻译成英语，标志符表示"带有类名的元素"。
ID属性的操作类似于CLASS属性，但有一点重要的不同之处:ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。
需要注意的是，ID选择器的标志符是散列符号(#)。标志符用来提醒浏览器接下来出现的是ID值。
尽管在选择器中可以使用CLASS和ID属性值，STYLE属性实际上可以替代整个选择器机制。不是只具有一个能够在选择器中引用的值(这正是ID和CLASS具有的值)，STYLE属性的值实际上是一个或多个CSS声明。
通常情况下，使用CSS，设计者将把所有的样式规则置于一个样式表中，该样式表位于文档顶部的STYLE元素内(或在外部进行链接)。但是，使用STYLE属性能够绕过样式表将声明直接放置到文档的开始标记中。
可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。通过组合选择器，可以更加精确地处理希望赋予某种表示的元素。例如，要组合类型选择器和类选择器，一个元素必须满足两个要求:它必须是正确的类型和正确的类以便使样式规则可以作用于它。
在CSS1中，样式通常是基于在HTML源代码中出现的标记和属性。对于很多设计情景而言这种做法完全可行，但是它无法实现设计者希望获得的一些常见的设计效果。
设计伪类和伪元素可以实现其中的一些效果。这两种机制扩充了CSS的表现能力。在CSS1中，使用伪类可以根据一些情况改变文档中链接的样式，如根据链接是否被访问，何时被访问以及用户和文档的交互方式来应用改变。借助于伪元素，可以更改元素的第一个字母和第一行的样式，或者添加源文档中没有出现过的元素。
伪类和伪元素都不存在于HTML;也就是说，它们在HTML代码中是不可见的。这两种机制都得到了精心设计以便能够在CSS以后的版本中做进一步地扩充;也就是说实现更多的效果。
四、css中id选择器的命名规则有哪些
这次给大家科普一下css中id选择器的命名规则有哪些，给CSS中ID选择器命名的时候有哪些注意事项，下面就是总结，一起来看一下。
只能包含[a-zA-Z0-9]、-,，其中不能以、-、0-9开头
在CSS的命名规范中，名称不能以数字开始，只能以字母、连字符、下划线开始。之后可以是字母、连字符、下划线或数字。
同时应该注意的是，虽然在HTML4.01及以前的版本不严谨，但在XHTML中，CSS中的命名是区分大小写。
所谓语义性，即名字应当描述内容，而不是描述表现，例子如下
underlined-and-green(下划线绿色)
红色标示涉及元素的表现形式，这在命名里是不允许的，因为表现形式是变化的，当变化发生，不仅要修改CSS的class和id名，还要修改html相应元素的class和id名，相当麻烦，当你所编辑的是大型网站，出现多处这样的修改，是非常耗时且头疼的。所以应该尽可能采用适应变化的命名，即命名与内容紧密相关。
当然，有些时候适当运用表现来命名会更灵活。如，用bordered(带边框)的表现名给网站多处添加同样的样式。
记住，最佳方案不是最干净的那个，也不是最漂亮的那个，与其拘泥成法，不如将思路放开一些。
最佳规则：始终使用字母、数字或连字符，并且始终以字母开头
记住，class和id名称是区分大小写的。
不要使用下划线，不要以数字或连字符打头，不接受“*”，“/”，“\”。虽然新的浏览器对生僻字符集的支持功能更多，但不是所有的浏览器如此，为了保证兼容性，请遵循最佳规则吧。
使用一些约定俗称的惯例名称，可提高代码可预测性，既让自己和他人容易理解，也有助于屏幕阅读器和分析器的工作，提高SEO（搜索引擎优化）
驼峰式（缩写单词的每个字母采用同样的大小写：pdfLink linkPDF）
加前缀，如：wp-users。命名空间需要制定团队内的命名空间约定。
这是防御式CSS采用的技术之一，通过命名空间隔离代码，避免冲突，使其不影响原有和未来的代码。
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
移动端布局中的流式布局是什么原理
五、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}即具有相同样式的标签分组显示
六、css有哪些种类的选择器
css的选择器是还是比较富的，主要的css选择器如下：
标签选择器（如：body,div,p,ul,li）
.类选择器（如：class="head",class="head_logo"）
ID选择器（如：id="name",id="name_txt"）
.组合选择器（如：.head.head_logo,注意两选择器用空格键分开）
.继承选择器（如：div p,注意两选择器用空格键分开）
伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）
字符串匹配的属性选择符(^$*三种，分别对应开始、结尾、包含)
以上选择器在日常开发中最常用的就是标签选择器、类选择器和id选择器，下面是这三种选择器的基本用法
一个XHTML文档中有许多标签，例如p标签，h1标签等。若要使文档中的所有p标签都使用同一个CSS样式，就应使用标签选择器。
div{color:red;border:1pxbluesolid;}
p{color:#000;}
2、类选择器
使用标签选择器可以为整个XHTML文档中的同一个标签指定相同的CSS样式。但是在实际运用中，XHTML文档中的同一个标签会被反复使用。若要为相同的标签赋予不同的CSS样式就应使用类选择器。
<divclass="test">测试代码</div>
.test{color:red;border:1pxbluesolid;}
3、id选择器，id选择器是唯一的，只可以获取独一无二的一个元素。
3、id选择器，id选择器是唯一的，只可以获取独一无二的一个元素。
<divid="test">测试代码</div>
#test{color:red;border:1pxbluesolid;}
好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！
