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

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.

相关推荐
热点推荐
“中国乳神”王李丹妮,一夜爆红后,如今呢?

“中国乳神”王李丹妮,一夜爆红后,如今呢?

HL木子娱乐
2024-06-15 00:50:54
公司组织中学生赴大凉山“支教”7天收费万元,被指为营利和作秀,教育部门严查

公司组织中学生赴大凉山“支教”7天收费万元,被指为营利和作秀,教育部门严查

极目新闻
2024-06-14 21:00:42
瑞士和平峰会前一天,俄总统普京提出和平条件,乌必须撤出四州

瑞士和平峰会前一天,俄总统普京提出和平条件,乌必须撤出四州

山河路口
2024-06-14 21:44:19
巴雷拉:成为队内第一射手让我有些焦虑,那意味着我在变老

巴雷拉:成为队内第一射手让我有些焦虑,那意味着我在变老

懂球帝
2024-06-16 06:02:30
小S在45岁生日当天,大S竟然罕见的露面了!

小S在45岁生日当天,大S竟然罕见的露面了!

青瓜娱评
2024-06-15 14:27:04
14级大风致4辆铁路货车空车车体侧翻,已恢复通车无人伤亡

14级大风致4辆铁路货车空车车体侧翻,已恢复通车无人伤亡

新京报北京知道
2024-06-15 21:50:36
回顾:女子深夜分手情绪崩溃,脱光衣服奔走,想挽留男友回头

回顾:女子深夜分手情绪崩溃,脱光衣服奔走,想挽留男友回头

佑宛故事汇
2024-06-14 17:06:14
淮安文旅、涟水文旅连发多条视频祝贺姜萍,网友:省了几百万广告费

淮安文旅、涟水文旅连发多条视频祝贺姜萍,网友:省了几百万广告费

极目新闻
2024-06-15 19:33:39
是什么正在拖垮国内交通?专家:不仅是车多,还有这些“毒瘤”!

是什么正在拖垮国内交通?专家:不仅是车多,还有这些“毒瘤”!

小鹿姐姐情感说
2024-06-15 07:45:02
黄一鸣再晒女儿视频,嘴巴鼻子超像王健林,衣服起球居住环境曝光

黄一鸣再晒女儿视频,嘴巴鼻子超像王健林,衣服起球居住环境曝光

缘浅娱深
2024-06-14 17:36:56
炸裂!那些震碎你三观的八卦!网友:真的是太劲爆了

炸裂!那些震碎你三观的八卦!网友:真的是太劲爆了

王二哥老搞笑
2024-05-30 12:26:57
当年说出“不是你撞的,干嘛去扶”的法官,18年后,他过得怎样?

当年说出“不是你撞的,干嘛去扶”的法官,18年后,他过得怎样?

高山非凡创作
2024-05-17 09:32:19
大局已定,退休人员看完纷纷坐不住了,早知道早准备!

大局已定,退休人员看完纷纷坐不住了,早知道早准备!

酷小子玩体彩
2024-06-15 15:55:35
唯一在世的一代领导人,曾任政治局常委,如今107岁

唯一在世的一代领导人,曾任政治局常委,如今107岁

深度知局
2024-06-13 17:41:13
眼看来中国的外国游客越来越多,欧美开始有些不淡定了

眼看来中国的外国游客越来越多,欧美开始有些不淡定了

布拉旅游说
2024-06-15 19:17:01
热浪再度来袭!北京发布高温黄色预警信号

热浪再度来袭!北京发布高温黄色预警信号

新华社
2024-06-15 22:24:28
浙大数学教授向姜萍发出诚挚邀请,与招生办唱起了对台戏!

浙大数学教授向姜萍发出诚挚邀请,与招生办唱起了对台戏!

娱乐的宅急便
2024-06-15 19:15:30
2比0!中国34岁老将爆冷,击退1号种子,赛季首进决赛,逼近美网

2比0!中国34岁老将爆冷,击退1号种子,赛季首进决赛,逼近美网

曹老师评球
2024-06-15 16:02:44
美国动手了!历时27个月,美联储释放大信号,中美金融战胜负已分

美国动手了!历时27个月,美联储释放大信号,中美金融战胜负已分

涛涛生活搞笑
2024-06-15 19:00:39
韩雪、何洁、戚薇被称为这届浪姐最讨厌的三个人!!!

韩雪、何洁、戚薇被称为这届浪姐最讨厌的三个人!!!

李保军财经
2024-06-14 22:12:24
2024-06-16 08:44:49
麦田守望客
麦田守望客
90后码农,爱研究瞎折腾,爱文学烂笔头。
528文章数 1194关注度
往期回顾 全部

科技要闻

TikTok开始找退路了?

头条要闻

牛弹琴:梅洛尼和马克龙吵了一架 晚宴上眼神可"杀人"

头条要闻

牛弹琴:梅洛尼和马克龙吵了一架 晚宴上眼神可"杀人"

体育要闻

莱夫利,让困难为我让路

娱乐要闻

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

财经要闻

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

汽车要闻

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

态度原创

房产
旅游
游戏
本地
公开课

房产要闻

万华对面!海口今年首宗超百亩宅地,重磅挂出!

旅游要闻

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

物华弥新:T形到底该怎么调才能跟上时代?这么搞估计才有希望!

本地新闻

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

公开课

近视只是视力差?小心并发症

无障碍浏览 进入关怀版