我们不必事无巨细地给每一个元素都加上声明,对于某些值,子元素会继承父元素的值。CSS世界的诞生就是为图文信息展示服务的,所以CSS中的继承理念很符合我们的直觉。大部分属性如边框、边距、填充等盒子的样式不能继承,而文字相关的如字体、颜色等属性就可以继承。可继承的属性以下列出:交互样式相关属性:visibility、cursor文字排版相关属性:letter-spacing、word-spacin...
特殊性(Specificity),又称作:优先级、特异性,即浏览器对应用到同一个元素的同种声明的重视程度。选择器的特殊性由选择器的组成确定。特殊性质表述为4个数字组成的统一的部分,如:[0,0,0,0]。比较特殊性值表时,同索引左侧位数较大者特殊性高,如[1,0,0,0]大于[0,99,0,0]重要性声明的特殊性总是胜过非重要性声明(!important力压群雄)对于行内样式,特殊性...
伪类和伪元素在选择器中用一个冒号还是两个冒号连接?它们有什么区别呢?...这里提到了伪类和伪元素,分享一下我的理解思路,我觉得还是蛮好使的:伪类表示元素的一种状态,如激活状态(:active)。同一个元素,多个状态之间可以并存,如激活悬浮状态(:active:hover)。为什么:hover、:focus等和用户操作相关的状态也是伪类呢?因为用户操作导致元素状态改变。伪元素表示通过选取DO...
:nth-child、:nth-last-child、:nth-of-type:enabled、:disabled、:checked:empty:target:focus:is、:not:link、:visited、:hover、:active::first-letter、::first-line::after、::before::selection
CSS中有哪些常用的选择器呢?ID选择器(#Container)类选择器(.Container)标签选择器(span)相邻兄弟选择器(br+br)同胞选择器(br~br)子元素选择器(.Article>p)后代选择器(.Articlep)通配符选择器(*)属性选择器([abc^="def"])伪类选择器(p:nth-child())
元素会依据其Display类型参与布局。主要取决于两种特征:内在盒子和外在盒子。内在盒子通常也称作“容器盒子”,和外在盒子相比,前者描述了元素跟其后代之间的行为,而后者描述了元素与其父元素和兄弟元素之间的行为。Display:block的盒子由外在块级盒子和内在块级容器盒子组成Display:inline-block的盒子由外在内联盒子和内在块级容器盒子组成Display:inl...
除了如img、input、iframe等元素,大多数元素都是非替换元素。替换元素的内容区域会被替换为其指向的外部对象。比如,如果img元素不带src属性的话,它不指向任何内容,在文档中没有意义,也就不是替换元素;如果img的src链接了外部图片,那么它的内容区域将被图片替换,此时就是替换元素。
类似div、ul、p、h1这些都是块级元素。一般来说,块级元素会生成一个默认填满父容器的内容区域。其后的兄弟元素将会被“换行显示”;内联元素会在一个文本行中生成元素框,它不会打断这行文本。内联元素常也译为“行内级元素”,在一些文章中,也被称为“行内元素”。
元素是用来组织文档结构的基础,比如p、span等。每个元素都会对文档的表现起一定作用,每个元素都会在浏览器中以矩形盒子的形式出现。尽管不能直接查看页面上的盒子的外边界,但你可以打开控制台,输入这行代码,给页面上所有的元素设置边框样式,一览其排列:$$('*').map(x=>x.style.border='1pxsolid')复制代码
我曾因在掘金某篇文章评论区看到有位老哥因为看不懂文章中讲述的概念而觉得“(文章)写的乱七八糟,不清不楚”,觉得很是心酸。对知识的深入了解不能抛开概念不谈,这和对概念的理解或是编码实操的能力是不同的。它们相互补充的,对学习也有所帮助。不要因为看了代码就不敲代码了,也不要因为能敲代码就不去了解概念了。这里提一些比较重要的CSS技术名词(或概念),做个开头吧。规则&规则集规则,由属性和值组成的声明、...