CSS3高级特性

马肤
这是懒羊羊

温馨提示:这篇文章已超过672天没有更新,请注意相关的内容是否还可用!

前言

前段时间域名转移备案导致长期没有更新文章,然后前两天出去跨个年又阳了,休息了两天。希望各位小伙伴保护好自己哈

CSS3高级特性 第1张


正文

复合选择器

1.标签指定式选择器

标签指定式选择器又称交集选择器,由两个选择器构成,其中第一个为标记选择器,第二个为class选择器或id选择器,两个选择器之间不能有空格。

2.后代选择器

后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后边,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代。

3.并集选择器

并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器都可以并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同,就可以利用并集选择器来实现。


层叠性和继承性


1.层叠性

层叠性指多种CSS样式的叠加。

2.继承性

CSS 的继承特性指的是应用在一个标签上的那些 CSS 属性被传到其子标签上。看下面的 HTML 结构:

<div>
    <p></p></div>

如果 <div> 有个属性 color: red,则这个属性将被 <p> 继承,即 <p> 也拥有属性 color: red

由上可见,当网页比较复杂, HTML 结构嵌套较深时,一个标签的样式将深受其祖先标签样式的影响。影响的规则是:

CSS 优先规则1: 最近的祖先样式比其他祖先样式优先级高

例1:

<!-- 类名为 son 的 div 的 color 为 blue --><div style="color: red">
    <div style="color: blue">
        <div class="son"></div>
    </div></div>

如果我们把一个标签从祖先那里继承来的而自身没有的属性叫做"祖先样式",那么"直接样式"就是一个标签直接拥有的属性。又有如下规则:

CSS 优先规则2:"直接样式"比"祖先样式"优先级高。

例2:

<!-- 类名为 son 的 div 的 color 为 blue --><div style="color: red">
    <div class="son" style="color: blue"></div></div>

继承性指书写CSS样式表时,子标记会继承父标记的某种样式。

注:并不是所有CSS属性都可以继承,如

边框属性,外边距属性,内边距属性,背景记属性,定位属性,布局属性,元素宽高属性


优先级

其中,标记选择器具有权重1,类选择器具有权重10,id选择器具有100.

特殊情况:

1.继承式的权重为0

2.行内样式优先

3.权重相同时,遵循就近原则

4.CSS定义了一个 !important命令,该命令被赋予最大的优先级

优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器



文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复:表情:
评论列表 (暂无评论,331人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码