CSS学习之第二章《选择符与结构》(4)

本文介绍了CSS的相关知识,包括上下文选择符,其由多个以空格分隔的选择符组成,可用于设置特定元素后代的样式;还提到继承机制,允许样式应用于元素及其后代;此外,阐述了特殊性,即不同规则的相对权重,并给出了相应示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

结构

上下文选择符:

格式:H1 EM{color:gray;}

在一个上下文选择符里,规则的选择符方是由两个或更多个以空格符分隔的选择符组成的。每个空格可以翻译成“在....中发现的”、“是...的一部分”、或者“它是...的后代”,但是前提是按从后至前的顺序读选择符。H1 EM可以译作“任何EM元素,它是H1元素的后代”(如果坚持要从前往后读,可以译作“任何H1包含的EM元素”)。

当然也不仅限于两个选择符,如:UL OL UL EM{color:gray},任何无序列表下的有序列表下的无序列表内的强调文本将以灰色显示。

例:一个文档左边为蓝色背景,右边为白色背景,左右各有一系列链接,但链接颜色不能设为背景色,用上下文选择符刚可以这样:

TD.sidebar{background:blue;}

TD,main-page{background:white;}

TD.sidebar A:link{color:white;}

TD,main-page A:link{color:blue;}


继承

继承是一种机制,它允许样式不仅应用于某个特定的元素,而且应用于其后代。

例:H1{color:gray;}

<H1>Meerkat<EM>Central</Em></H1>

特殊性

特殊性(specificity)描述了不同规则的相对权重。

例:.grape{color:purple;}

h1{color:red;}

<H1 CLASS="grape">Meerkat <EM>Central</EM></H1>

上例中将显示.grape的效果。

特殊性注释列表:

 H1{color: red;} /*specificity=1 */
 P EM{color:purple;} /*specificity=2*/
 .grape{color:purple;} /*specificity=10*/
 P.bright{color:yellow;} /*specificity=11*/
 P.bright  EM.dark{color:brown;} /*specificity=22*/
 #id888{color:blue;} /*specificity=100*/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值