一直觉得自己CSS很搓很搓很搓~~~, 入职后决心要加强,以前学CSS都是看比较实践的书籍,如《精通CSS》这些,大多是技巧,靠记忆~~ 发现这样学来实在是根基不牢,永远都要跟着别人后头走。 个人觉得要在某个领域中强大,基础原理是必不可少的,于是有了本人第一篇CSS学习的文章,文章主要是根据《CSS权威指南》来对自己的一些不牢靠的知识进行记录巩固,发现对这本书真是相见恨晚,以前学CSS太浮躁了,地基没打好唉~~废话不多说了,进入正题吧~
在选择器上,主要是一些特殊性和层叠顺序规则需要熟悉。
选择器的特殊性:
选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分,如:0,0,0,0。一个选择器的具体特殊性如下确定:
- ID属性值,加 0, 1, 0, 0。
- 类属性值、属性选择或伪类,加 0, 0, 1, 0。
- 元素和伪元素, 加 0, 0, 0, 1。
结合符和通配符对特殊性没有任何贡献(即便无贡献,但和继承值还有浏览器默认样式相比,优先级还是结合符或通配符高)一般第一个0是为内联样式保留的。
层叠规则:
按以下步骤顺序确定层叠规则:
- 找出匹配元素的规则
- 按显示权重对匹配元素所有声明排序,!important规则权重高于没有!important的规则;
- 按来源对声明排序,包括3种来源:创作人员、读者和用户代理。创作人员样式胜过读者样式。有!important标识的读者样式要强于所有其他样式,这包括有!important标识的创作人员样式。创作人员样式和读者样式都比用户代理的默认样式要强。
- 按特殊性对声明排序,较高特殊性胜出。
- 按顺序对声明排序,排在后的生出。
一个坑
好吧,先来个例子: .test p span{color:red}; 特殊行为: 0, 1, 2, 0。
这次终于好不容易发挥了我一次研究生的钻研精神,我就想了,这底层估摸是按位来实现的吧?这样就只需1个数字就可以表示了。
有了猜测就要去论证,如何论证? 发挥我无耻的结论导向证明的精神,假设浏览器用1个数字按位表示特殊性,那么每一类别的特殊性肯定都是有上限的,正常情况下应该不会太大,于是有了下面的代码来证明:
基本思路:
给一个id为test的div元素添加样式规则,同时给这个元素添加一定数量的class,再将这些class结合给出另一个规则,如果到达一定数量的class规则覆盖了id规则,那么就证实了我的猜想。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Selector Demo</title>
<meta name =" copyright " content =" http://www.hualai.net.cn " />
<style>
#test {
color: red;
}
</style>
</head>
<body>
<div id="test">
这是一个div,id为test
</div>
类添加次数:
<input type="text" id="count" />
<input type="button" id="add" value="添加" />
<script>
document.getElementById('add').onclick = function() {
var t = document.getElementById('test');
var count = Number(document.getElementById('count').value);
var cls = '';
var css = '';
//加它个count个类,同时拼接CSS字符串
for (var i = 0; i < count; ++i) {
cls += 't' + i + ' ';
css += '.t' + i;
}
css += '{color: blue;}'
t.className = cls;
//插入规则
loadStyleString(css);
};
//插入一条css新规则
var loadStyleString = function(css) {
var style = document.createElement('style');
style.type = "text/css";
try {
style.appendChild(document.createTextNode(css));
} catch(e) {//IE
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
</script>
</body>
</html>
在输入框中输入要添加的类次数,JS代码会按照次数给div元素添加对应次数的类,同时会插入一条对应的规则,在代码中,id规则为#test{color:red},而类规则为{color:blue},所以如果结论正确,那么div的字体颜色会变为蓝色。
通过本屌丝推测性的不懈努力的测试,发现255是个分水岭,超过255次时,也就是2的8次方,二进制11111111,在chrome下div的文字颜色变成了蓝色,也就是添加的类为256次时,特殊性变成了1,0,0,0,与ID属性特殊性持平,由于规则在后,故而胜出。
为了保持完整性,以下在各大浏览器进行了测试:
FF13, chrome22, IE9(包括在其环境下的IE7/8模式),safira5 下,256个类带来的特殊性都等于1个id的特殊性,然而在opera12,IE9下的怪异模式以及IETester下的IE6/7中,均不会超过id的特殊性,推测为分别用数字保存,而不是用一个数字按位存储。
分享到:
相关推荐
下面是前端开发中经常使用的 30 个 CSS3 选择器,包括通用元素选择器、ID 选择器、类选择器、标签选择器、伪类选择器、毗邻元素选择器、子元素选择器、属性选择器等。 1. 通用元素选择器 * 通用元素选择器*是选择...
在"css-diner"这个练习中,你可以深入理解并掌握各种CSS选择器的用法,从而提升你的前端开发技能。以下是一些关于CSS选择器的重要知识点: 1. **基础选择器**:这些是最简单的选择器,包括标签选择器(如`<p>`)、...
"基于CSS选择器的Web信息抽取研究与实现" 本文研究并提出了一种基于CSS选择器的Web信息抽取方法,该方法在MDR算法的基础上,结合了CSS的相关特性,有更广泛的适用性。并结合较新的MVVM设计模式,以低耦合的方式实现...
在Web前端开发中,CSS(层叠样式表)是用于控制网页元素呈现方式的重要语言。本教程将聚焦于CSS的基础选择器,这是学习CSS的第一步,对于构建美观、响应式的网页至关重要。通过理解并熟练运用这些选择器,开发者能够...
1. **CSS选择器**:CSS的选择器是定位网页元素的基础工具,包括标签选择器、类选择器、ID选择器、属性选择器等。理解不同选择器的工作原理和优先级是CSS初学者的必修课。 2. **层叠与继承**:CSS的核心特性之一是...
4、css 选择器有哪些,权重是什么样的 5、CSS3动画知道吗,实现过哪些css3动画 6、html页面渲染方式和流程 阅读建议:此资源覆盖了前端技术栈中Html+css全部知识点,知识点较多,所以在背题的过程要结合这些内容一...
【标题】中的“尚硅谷前端入门html+css零基础教程”指的是一个由尚硅谷教育机构提供的,面向初学者的前端开发课程,主要涵盖了HTML(超文本标记语言)和CSS(层叠样式表)的基础知识。这个教程是为那些对前端开发...
57前端开发基础视频-复合选择器之标签指定式选择器.avi 58前端开发基础视频-复合选择器之后代选择器.avi 59前端开发基础视频-复合选择器之并集选择器.avi 60前端开发基础视频-复合选择器之子元素选择器.avi 61...
5. **性能优化**:合理利用CSS选择器的权重,避免使用通配符选择器(`*`)和过多的后代选择器,减少计算量。同时,可以使用CSS Sprite技术合并图片,减少HTTP请求。 6. **代码整洁**:遵循一定的代码格式,如缩进、...
5. **CSS3**:CSS3不仅扩展了CSS2的许多功能,还引入了新的选择器、边框和背景效果、过渡和动画、多列布局等。设计作品中,CSS3可能用于创建复杂的边框和阴影效果,制作平滑的过渡和动画,以及实现灵活的多列网格...
2. CSS选择器: CSS选择器用于定位HTML或XML文档中的元素。基本选择器包括:类型选择器(如`div`)、类选择器(如`.class`)、ID选择器(如`#id`)和标签选择器(如`*`)。更高级的选择器有属性选择器、伪类和伪...
同时,阿里巴巴前端开发规范还强调了每个选择器及属性独占一行的重要性。 阿里巴巴前端开发规范是一份非常重要的规范,涵盖了前端开发中的多个方面。遵循该规范可以提高前端开发的质量和统一性,提高开发效率和维护...
* 选择器:CSS 选择器应该使用 class 选择器,而不是 id 选择器 阿里前端开发规范是一个非常严格的开发规范,它涵盖了前端开发的各个方面,旨在提高开发效率、代码质量和团队协作。遵循该规范,可以帮助开发者编写...
1. **选择器**:CSS选择器用于匹配HTML或XML元素,如标签选择器、类选择器、ID选择器等。了解如何有效地组合选择器以实现精确的样式控制是基础。 2. **盒模型**:理解CSS盒模型是布局设计的关键。它包括内容、内...
同时,手册还规定了选择器的使用规范,例如,应该使用类选择器而不是ID 选择器。 4. 前端代码规范: 阿里web前端开发手册还规定了前端代码的编写规范。例如,在编写JavaScript 代码时,应该使用严格的编程规约,...
CSS选择器是CSS(层叠样式表)中用于选取...- **FreeCodeCamp**:FreeCodeCamp的前端开发课程中也有CSS选择器的教学部分。 #### 3. **编程书籍** - **《CSS: The Definitive Guide》**:作者Eric A. Meyer,这本书详细
HTML5和CSS3是现代网页开发的两大核心技术,它们为创建动态、响应式且具有丰富交互性的用户界面提供了强大的工具。...通过下载和研究这个示例,你可以深入了解这些技术的实际应用,提升你的前端开发技能。
在Web前端开发中,CSS(层叠样式表)是至关重要的组成部分,它负责网页的布局和样式设计。在这个“头歌教学实践平台”的课程中,我们聚焦于CSS的基础知识,帮助初学者掌握这一核心技术。 首先,我们需要理解CSS的...
- **`class`**:定义了元素的类名,可用于CSS选择器来指定样式。 - **`contenteditable`**:定义元素是否允许用户编辑其内容,这对于创建可编辑的文档非常有用。 - **`contextmenu`**:定义了元素的上下文菜单,当...
在前端开发中,颜色选择器是一种常见的用户交互组件,它允许用户通过图形界面选取颜色,广泛应用于各种设计工具、编辑器或网站配置等场景。"前端颜色选择器"这一主题通常涉及JavaScript库,特别是jQuery插件,它们为...