网易首页 > 网易号 > 正文 申请入驻

SS有哪些基本选择器?它们的权重是如何表示的?

0
分享至

CSS基本选择器有类选择器、属性选择器和ID选择器。

CSS选择器的权重预示着CSS选择器样式渲染的先后顺序,元素样式渲染时,权重高的选择器样式会覆盖权重低的选择器样式。

通常将权重分为4个等级,可用0.0.0.0来表示这4个等级。

!important关键字优先级最高。

注意:!importont井非选择器,而是针对选择器内的单一样式设置的。当然,不同选择器内应用 !important的权重也是不一样的,例如,在id选择器内的!important关键字权重要高于类选择器内的 !important关键字权重,即下面所说的选择器权重组合。

内联样式(非元素器)的优先级可看成1.0.0.0。

ID选择器的优先级为0.1.0.0。

类属性选择器、属性选择器、伪类的优先级为0.0.1.0。

元素选择器、伪元素选择器的优先级为0.0.0.1。

通配符选择器对特殊性没有任何贡献值。

当把选择器组合使用的时候,相应的层级权重也会递增,例如# id .class的权重为0.1.1.0。

总结:

id选择器#id
#firstname 选择 id=“firstname” 的所有元素。
类选择器.class
.intro 选择
通配符* * 选择所有元素
标签选择器element
p 选择所有 p元素。
并级选择器element,element
div,p 选择所有 div 元素和所有 p 元素。
父子级element element
div p 选择 div元素内部的所有 p元素。
直接子级element>element
div>p 选择父元素为 div 元素的所有 p 元素。
相邻兄弟选择器element+element
div+p 选择紧接在 div 元素之后的所有 p 元素。
属性选择器[attribute]
[target] 选择带有 target 属性所有元素。
属性值选择器[attribute=value]
[target=_blank] 选择 target="_blank" 的所有元素。

css3新增常用选择器

:first-of-type
p:first-of-type 选择属于其父元素的首个 p 元素的每个 p 元素。
:last-of-type
p:last-of-type 选择属于其父元素的最后 p 元素的每个 p 元素。
:only-of-type
p:only-of-type 选择属于其父元素唯一的 p 元素的每个 p 元素。
:only-child
p:only-child 选择属于其父元素的唯一子元素的每个 p 元素。
:nth-child(n)
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 p 元素。
:nth-last-child(n)
p:nth-last-child(2) 同上,从最后一个子元素开始计数。
:nth-of-type(n)
p:nth-of-type(2) 选择属于其父元素第二个 p 元素的每个 p 元素。
:nth-last-of-type(n)
p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。
:first-child
p:first-child 选择属于父元素的第一个子元素的每个 p 元素。
:last-child
p:last-child 选择属于其父元素最后一个子元素每个 p 元素。

特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

相关推荐
热点推荐
92分钟绝杀,2-1大冷门,倒数第2逆转北京国安,一夜逃离降级区

92分钟绝杀,2-1大冷门,倒数第2逆转北京国安,一夜逃离降级区

侧身凌空斩
2024-06-15 22:07:12
遭逆转送温暖!国安球迷冲官博评论区,怒斥主帅苏亚雷斯

遭逆转送温暖!国安球迷冲官博评论区,怒斥主帅苏亚雷斯

直播吧
2024-06-15 22:46:20
女生主动起来会有多主动?网友:已四十,在星巴克打排位被要微信

女生主动起来会有多主动?网友:已四十,在星巴克打排位被要微信

奇特短尾矮袋鼠
2024-06-14 12:29:40
南京市市管领导干部任前公示通告

南京市市管领导干部任前公示通告

鲁中晨报
2024-06-15 21:35:07
国家大基金重点投资了这9家半导体企业,都是低位低估值优质资产

国家大基金重点投资了这9家半导体企业,都是低位低估值优质资产

小蜜情感说
2024-06-15 06:02:04
森林北前夫照片曝光,谁能想到是他啊?

森林北前夫照片曝光,谁能想到是他啊?

银河卧谈会
2024-06-13 15:08:19
儿媳照顾50岁农村公公,酒后公公行夫妻之事,公公:儿媳经验丰富

儿媳照顾50岁农村公公,酒后公公行夫妻之事,公公:儿媳经验丰富

魅老八足球
2024-05-13 13:49:37
匈牙利也扛不住了?北约秘书长高调宣布:北约全票通过对乌军援

匈牙利也扛不住了?北约秘书长高调宣布:北约全票通过对乌军援

环球Talk
2024-06-15 23:48:51
罕见省部级高干在中央党报公开表达“不满”:困惑很久,不吐不快

罕见省部级高干在中央党报公开表达“不满”:困惑很久,不吐不快

华人星光
2024-06-07 19:20:09
全球驱逐舰排名前十:日本1艘,韩国第4,中国排名意外,差距悬殊

全球驱逐舰排名前十:日本1艘,韩国第4,中国排名意外,差距悬殊

文雅笔墨
2024-06-15 13:12:47
16岁338天,亚马尔打破欧洲杯历史最年轻出场纪录

16岁338天,亚马尔打破欧洲杯历史最年轻出场纪录

懂球帝
2024-06-15 22:47:15
欧盟将对中国电动汽车开征额外关税 比亚迪减半 特斯拉享“优待”

欧盟将对中国电动汽车开征额外关税 比亚迪减半 特斯拉享“优待”

瑶看新车
2024-06-13 16:44:45
确定加盟,恭喜AC米兰,2000万,达成协议,国米有对手了

确定加盟,恭喜AC米兰,2000万,达成协议,国米有对手了

开心体育站
2024-06-15 23:37:30
河南三门峡市陕州区甘山林场原场长刘正理接受审查调查

河南三门峡市陕州区甘山林场原场长刘正理接受审查调查

鲁中晨报
2024-06-15 10:59:02
苹果Vision Pro国内正式开启预售:美国火爆、中国冷清 3万元高昂定价谁来买单?

苹果Vision Pro国内正式开启预售:美国火爆、中国冷清 3万元高昂定价谁来买单?

每日经济新闻
2024-06-14 11:48:04
妻子陪初恋男友法国游玩,下飞机才通知丈夫,返回后直接愣在机场

妻子陪初恋男友法国游玩,下飞机才通知丈夫,返回后直接愣在机场

局内人
2024-05-15 14:12:33
中国从未封禁比特币挖矿?分析师:境内活动基本恢复 助力实现2060年碳中和

中国从未封禁比特币挖矿?分析师:境内活动基本恢复 助力实现2060年碳中和

FX168链界观察
2024-06-14 17:21:23
妻子为男闺蜜当众泼我一杯酒,1天后她道歉,我直言:晚了

妻子为男闺蜜当众泼我一杯酒,1天后她道歉,我直言:晚了

吉祥情感屋
2024-06-12 11:28:14
老戏骨离世!66岁抗癌失败,演员妻子忙着拍戏,最后一面都没见到

老戏骨离世!66岁抗癌失败,演员妻子忙着拍戏,最后一面都没见到

综艺拼盘汇
2024-06-15 04:27:27
老百姓傻眼了?全国铁饭碗人数加起来都不到一个亿!

老百姓傻眼了?全国铁饭碗人数加起来都不到一个亿!

娱乐洞察点点
2024-06-15 16:37:29
2024-06-16 02:14:44
麦田守望客
麦田守望客
90后码农,爱研究瞎折腾,爱文学烂笔头。
528文章数 1194关注度
往期回顾 全部

科技要闻

TikTok开始找退路了?

头条要闻

563支AI队伍和姜萍考同一份试卷:最高34分 都没进决赛

头条要闻

563支AI队伍和姜萍考同一份试卷:最高34分 都没进决赛

体育要闻

莱夫利,让困难为我让路

娱乐要闻

江宏杰秀儿女刺青,不怕刺激福原爱?

财经要闻

新情况!高层对人民币的态度180°转弯

汽车要闻

东风奕派eπ008售21.66万元 冰箱彩电都配齐

态度原创

家居
手机
艺术
旅游
本地

家居要闻

空谷来音 朴素留白的侘寂之美

手机要闻

小米澎湃OS再次公布进展通报:多项问题优化中,且全是内置应用!

艺术要闻

穿越时空的艺术:《马可·波罗》AI沉浸影片探索人类文明

旅游要闻

如何文艺消夏?乌镇10大活动开启古镇消夏节

本地新闻

粽情一夏|海河龙舟赛,竟然成了外国人的大party!

无障碍浏览 进入关怀版