font, line-height, letter-spacing, color- text-align等) 背景(background, border等) 其他(animation, transition...8266e4bfeda1bd42d8f9794eb4ea0a13.png 连字符CSS选择器命名规范 1.长名称或词组可以使用中横线来为选择器命名。...2.不建议使用“_”下划线来命名CSS选择器，为什么呢?...输入的时候少按一个shift键; 浏览器兼容问题 (比如使用_tips的选择器命名，在IE6是无效的) 能良好区分JavaScript变量命名(JS变量命名是用“_”) 4a47a0db6e60853dedfcfdf08a5ca249...fb5c81ed3a220004b71069645f112867-1.png 为选择器添加状态前缀 有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。
文章目录 前言 一、html规范 1.块级元素 2.行内元素 二、CSS规范 1.命名空间规范(了解) 2.CSS书写顺序 3.CSS书写规范 4.去掉小数点前的“0” 5.连字符CSS选择器命名规范...6.字符小写 7.选择器 8.代码注释 9.不要随意使用ID 10.为选择器添加状态前缀 11.CSS命名规范（规则） ---- 前言 HTML+CSS【规范】 个人主页：@MIKE笔记 来自专栏...4.去掉小数点前的“0” 5.连字符CSS选择器命名规范 1.长名称或词组可以使用中横线来为选择器命名。 2.不建议使用“_”下划线来命名CSS选择器，为什么呢？...输入的时候少按一个shift键； 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的） 能良好区分JavaScript变量命名（JS变量命名是用“_”） 6.字符小写 定义的选择器名...10.为选择器添加状态前缀 有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。
font, line-height, letter-spacing, color- text-align等) 背景(background, border等) 其他(animation, transition...连字符CSS选择器命名规范 1.长名称或词组可以使用中横线来为选择器命名。 2.不能用“_”下划线来命名CSS选择器，为什么呢？...一些浏览器已经不允许使用下划线来命名CSS选择器（就是不兼容）； 能良好区分JavaScript变量命名. ? ?...不要随意使用id id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。 ? ?...为选择器添加状态前缀 有时候可以给选择器添加一个表示状态的前缀，全语义更明了，比如下图是添加了“.is-”前缀。 ? ?
5、表现与结构分离：CSS样式都应写在CSS文件中，且尽量少用id、组合、属性选择器和行内样式以及style标签样式 为避免在CSS文件使用类选择器和使用js添加类选择器进行样式覆盖时因优先级问题而无法覆盖成功...9、层级(z-index)必须清晰明确 页面弹窗、气泡为最高级（最高级为999），不同弹窗气泡之间可在三位数之间调整；普通区块为10-90内10的倍数；区块展开、弹出为当前父层级上个位增加，禁止层级间盲目攀比...4）16进制颜色代码缩写 有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。 5）连字符CSS选择器命名规范 ① 长名称或词组可以使用中横线来为选择器命名。...输入的时候少按一个shift键； 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6 是无效的） 能良好区分JavaScript变量命名（JS变量命名是用“_”） ③用字母、_号、-号、数字组成...7）为选择器添加状态前缀 有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。
由统计的结果可知，1,1,2的权重最大，因此p标签的颜色应为green ?...image 高维打低维 看过《三体》的同学都知道，高维空间对于低维空间可以随便打，在四维空间，可以轻易地摧毁在三维空间无坚不摧的水滴。类似的，在css中，再多的标签选择器，也敌不过一个类选择器 ?...image 继承而来的权重为0 继承父辈的财产，如果不好好利用，而是坐吃山空，那远不如自力更生者。css继承的样式，权重是0。即：随便一个标签选择器就能覆盖继承的样式 ?...image 权重相同怎么办 如果选择器的权重相同，以style中后出现的选择器为准 ?...，以style中后出现的选择器为准 ?
需要注意: 当是一个单一选择器，一条声明出错(如单词拼写错误)，其余规则以及该规则的其余声明都有效。只有该声明无效。 当是一个单一选择器，选择器书写出错，其余规则都有效，只有该规则无效。...当是一个组合选择器，只要其中一个选择器书写出错，其余规则都有效，该规则无效。 CSS 选择器 选择器是学习 CSS 的比较重要的知识，熟练掌握各种选择器，就可以很轻松的对 HTML 元素声明样式。...a[hreflang|="en"] { cursor: not-allowed; } 上下文选择器 E1 E2 选取所有 E1 元素的所有后代元素为 E2 的全部元素。...p~a { color: red; } E1 E2 选取所有 E1 元素的紧邻兄弟元素为 E2 的所有 E2 元素。...其中 I 分量表示 ID 选择器个数 C 分量表示 Class 选择器个数 + 属性选择器个数 + 伪类选择器个数 T 分量表示 Type 选择器个数 + 伪元素选择器个数 如果特指度相同，后加在到浏览器的规则生效
选择器的命名规范 1.模块化命名 例如： 与布局相关的样式以“g”为开头。如“g-content”和“g-header”； 与挂钩相关的样式以“j”为开头。...如“j-open”和“j-request”； 与元件相关的样式以“m”为开头。如“m-dropMenu”和“m-slider”； 与状态相关的样式以“s”为开头。...，避开HTML标记，因为一旦HTML的结构产生更动，则与此对应的样式也就无效了。...针对后一种情况，只要增加新样式选择器的权重值就可以完全避开这个问题，无需用到“！important”。...如width: 300px; _width: 200px;对其它浏览器来说，该选择器的宽度值应为300个像素，但IE 6能够辨识出底线，因此它计算出的宽度就是200个像素。
，但是即使不是xhtml还是写成小写比较好，美观、易读而且可以应对可能的转换需求 选择器优先级 当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义...作为style属性写在元素内的样式 id选择器 类选择器 标签选择器 通配符选择器 浏览器自定义或继承 同一级别 同一级别中后写的会覆盖先写的样式 上面的级别还是很容易看懂的，但是有时候有些规则是多个级别的组合...（经园友提示，权值实际并不是按十进制，用数字表示只是说明思想，一万个class也不如一个id权值高） 内联样式表的权值为 1000 ID 选择器的权值为 100 Class 类选择器的权值为 10 HTML...标签选择器的权值为 1 我们可以把选择器中规则对应做加法，比较权值，如果权值相同那就后面的覆盖前面的了，div.class的权值是1+10=11，而.test1 .test2的权值是10+10=20，...，我们也经常使用backgroung-image等css属性为页面添加图片，这些图片是不是一定会被加载呢，看个例子 <!
1、CSS指层叠样式表(Cascading Style Sheets) 2、使用CSS样式常见的三种方式： 1) 2)......................> 3、CSS层叠样式默认规则后者覆盖前者，特殊情况除外—!important优先级最高，高于上面一切。* 选择器最低，低于一切。；例：#Box {color:red !...4）行内元素与块级元素属性的不同，主要是盒模型属性上，行内元素设置width无效，height无效,margin上下无效，padding上下无效。...，如果找到一个设置了position:relative、absolute、fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位 4）fixed：fixed元素的定位永远是相对于浏览器边界的
CSS 选择器了，这会非常不利于浏览器的实现。...*/.foo { color: red; .bar { color: blue; }}/* 无效原因：没有嵌套选择器 & */ .foo { color: red; .bar & { color...:blue; }}/* 无效原因：& 没有在组合选择器的第一位 */ .foo { color: red; &.bar, .baz { color: blue; }}/* 无效原因：列表的第二个选择器里没有嵌套选择器...*/.foo { color: red; @nest .bar { color: blue; }}/* 无效原因：没有嵌套选择器 & */ .foo { color: red; @nest...& .bar, .baz { color: blue; }}/* 无效原因：列表里并非所有的选择器都包含嵌套选择器 & */ 你有想说的吗？
在讨论 CSS 优先级之前，先说说 CSS 7 种基础的选择器： ID 选择器， 如 #id{} 类选择器， 如 .class{} 属性选择器， 如 a[href=”http://zhihu.com”]...> 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 CSS 优先规则4：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b）...，所以 的背景色为 blue。...上面代码中，@import 语句必须出现在内部样式之前，否则文件引入无效。当然不推荐使用 @import 的方式引用外部样式文件，原因见另一篇博客：CSS 引入方式。...CSS 还提供了一种可以完全忽略以上规则的方法，当你一定、必须确保某一个特定的属性要显示时，可以使用这个技术。 CSS 优先规则5：属性后插有 !important 的属性拥有最高优先级。
最近在做一些面试的工作，我经常会问的一个问题就是：CSS中有哪些选择器。我往往得到的答案就是id选择器啊、class选择器啊，再追问下去就没了，这让我很是意外！...> 类型选择器 E { sRules } 选定指定的文档元素 E /** 设置元素p为红色 **/ p { color: red; } 我是p 类选择器 E.myclass { sRules...> 兄弟选择器 E~F { sRules } CSS3 选定文档元素 E 之后且同属一个父元素的兄弟元素 F /* 设置 h1 之后所有的 p 为红色 */ h1>p { color: red; }...link { color: blue; } :visited a:visited { sRules } 设置超链接 a 已经被访问后的样式...要使该属性生效，E 元素必须是某个元素的子元素，E 的父元素最高是 body，即 E 可以是 body 的子元素 /** 该规则当元素中只有一个 li 有效，即可设置 li 为红色，如果有多个 li 则无效
中，书写属性名时大小写不敏感，但是书写选择器时大小写敏感） 定义只能出现在块{}内 可以使用!...important修饰 作用域就是选择器的选定范围，作用域出现交叉时，同名变量覆盖规则取决于选择器权重 /* 这里定义的变量是全局的 */ :root...自定义属性变量是不能用作CSS属性名称的，比如：var(--color): red; 不能用作背景地址，比如：url(var(--url))； 由于var()后面会默认跟随一个空格，因此在其后面加单位是无效的...&& window.CSS.supports && window.CSS.supports('--size', 0)) { /* 支持 */ } 作用域 与 CSS 的"层叠"（cascade...image.png 操作后 ?
链接伪类选择器： :link：链接访问前的样式 :visited：链接访问后的样式 :hover：鼠标悬停时的样式 :active：鼠标点击后长按时的样式 :focus：聚焦后的样式 位置伪类选择器：...相对定位元素（relatively positioned element）是计算后位置属性为 relative 的元素。...绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 或 fixed 的元素。...粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。...---- flex-grow CSS 属性 flex-grow CSS 设置 flex 项主尺寸 的 flex 增长系数。 负值无效，默认为 0。
（除了:where() 的优先级总是为 0）。...两者的区别在于 :is() 计入整体选择器的优先级（它接受优先级最高参数的优先级），而 :where() 的优先级为 0。...又如: :where(#article, #section) .content {} 的优先级等同于.content 选择器 可容错选择器解析 规范将 :is() 和 :where() 定义为接受一个可容错选择器列表...在 CSS 中使用选择器列表时，如果任何选择器无效，则整个列表被视为无效，即如果某个选择器无法解析，则被视为无效，不正确或不受支持的选择器将被忽略，其他选择器将被使用。...如果浏览器能够支持，其功能会非常强大，因为它可以实现类似“父选择器”和“前面兄弟选择器”的功能（提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法），对CSS 的开发会有颠覆性的影响。
选择圆形 对于第一个示例，任务是为演示中的圆形添加淡化和模糊样式。...如果您想通过示例了解更多关于语法的内容，该规范涵盖了各种有效和无效的示例。 接下来的几个示例将简要介绍CSS嵌套的更多特性，帮助您了解其广泛的功能。...无效的嵌套示例 在嵌套中，有几种语法场景是无效的，如果您之前使用预处理器进行嵌套，可能会对此感到惊讶。关于有效嵌套语法的速查表可以在本文的理解嵌套解析器部分找到。...但在CSS嵌套中，这种方法是无效的，因为选择器不是字符串，而是对象引用。...它有助于减少代码重复、提高可读性，并提供更好的维护性和重构能力。 使用嵌套时，确保理解如何正确放置选择器和使用&符号来连接或附加选择器。此外，熟悉无效的嵌套示例，以避免错误。
这与 css 的"层叠"（cascade）规则是一致的。 由于这个原因，全局的变量通常放在根元素:root里面，确保任何选择器都可以读取它们。...这里我先介绍两个关于该功能的前置知识点: 事实上，CSS 变量的 var() 函数还可以使用第二个参数，表示变量的默认值。如果该变量此前没有定义或者是无效值，就会使用这个默认值。...这种方式更适合组件开发，因为该方案不声明任何 css 变量，只是预留的 css 变量名称和默认属性。 这样的话，无论开发者的选择器优先度有多低，代码都可以很容易的覆盖默认属性。...解释如下，事实上 -foo: ; 这个变量并不是一个无效值，它是一个空值。initial 才是 CSS 变量的无效值。...其实这也可以理解，css 没有所谓的空字符串，空白也不代表着无效，只能使用特定值来表示该变量无效。这个时候，我们再回头来看原来的 CSS 代码。
更多信息请参见MDN的浏览器兼容性表。一些旧的浏览器版本支持:is()选择器的方式为:match() 或 -webkit-any()。欲了解更多信息，请参阅MDN上的:is()页面。...在编写CSS时，它们为你提供了一种在选择器的中间、开头或结尾将元素分组的方法。它们还可以改变特异性，让你有权力取消或增加特异性。...选择器分组 :is()可以做任何关于分组的事情，:where()也可以。这包括在选择器的任何地方使用，嵌套和堆叠它们。对于你期待的完全的CSS灵活性，这里有几个例子。...要找到你的代码中可以从:is()或:where()中受益的地方，寻找有多个逗号的选择器和选择器重复。 使用简单和复杂的选择器与:is() 如果想学习选择器，请查看Learn CSS上的选择器模块。...，如果任何一个选择器无效，所有的选择器都会无效，列表将无法匹配元素。
.foo { --side: margin-top; /* 无效 */ var(--side): 20px; } 上面代码中，变量--side用作属性名，这是无效的。....foo { --gap: 20; /* 无效 */ margin-top: var(--gap)px; } 上面代码中，数值与单位直接写在一起，这是无效的。...不同元素读取这个变量的时候，会采用优先级最高的规则，因此三段文字的颜色是不一样的。 这就是说，变量的作用域就是它所在的选择器的有效范围。...content选择器的生效范围。...--foo: if(x > 5) this.width = 10; 上面代码中，--foo的值在 CSS 里面是无效语句，但是可以被 JavaScript 读取。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
