「水坑」如何正确的自定义 CSS 样式

吐槽/反馈/建议:我的咸鱼心  爱发电-@wdssmq

索引

「水坑」系列教程索引

「水坑」如何正确的自定义 CSS 样式 「当前」

DevTools

在浏览器中,Ctrl + Shift + iF12 都可以打开「开发者工具」,常说的是「控制台」也指的是这里;

查看元素

除使用快捷外,也可以在网页内「右键」→「检查/查看元素」打开,具体浏览器选项名会有差异;「图 1」

此种方式打开时,会自动在控制台的「元素」选项卡内定位到右键操作时鼠标所指向的元素;「图 2」

001.png

图 1 ↑

002.png

图 2 ↑

同时右边会显示相应元素的「样式」信息;「图 3」

点击某一条样式后边的蓝色链接(*.css),会跳转到具体的样式定义查看,可以得到具体所在的行号等信息「- 如果没有压缩的话 -」;

在「图 3」区域所作的修改会实时反应在页面中,达到所需效果后可以复制到真实文件中实现样式更新;

然而除非你是该样式的实际维护者,并不推荐这么做。

比如对于 Z-Blog 主题,如果主题自身未提供自定义功能,推荐使用:添加自定义 CSS 样式 - Z-Blog 应用中心

追加的样式会覆盖已有定义,主题升级也不会被重置;

003.png

图 3 ↑

「样式类」和「语义类」

虽然现在才说,CSS 的知识终究需要你自己学习「CSS 教程:https://www.w3school.com.cn/css/index.asp

本次的需求是自定义调整「图 2」中链接的字号;

然而直接影响到该元素的样式定义如下:

a.a-color, .a-color a {
    color: #000;
}
.is-px-12 {
    font-size: 14px;
}
.has-text-centered {
    text-align: center !important;
}

个人定义为「样式类」,具体怎么理解和划分只能靠经验补足吧.jpg

简单说上边几个样式定义,如果修改或覆盖的话,极大概率会影响到其他使用了该样式的元素;

所以需要从目标元素开始,由内向外选取一个有足够「语义」的元素——

p:并没有额外类名所以跳过;——

「图 4」div.media-content.media-content本身是前端框架组件中的定义,有一定的「语义」,然而其他地方也有可能使用该组件和结构;——

「图 5」div.media.slide-info.media同样是前端组件,但是.slide-info,英文单词「slide」在网页前端语境下通常就是指「幻灯片」,虽然也有存在多处幻灯片的情况,然而相对容易直接观察求证,另外也可以通过组合多级选择器尽量避免非预期的影响;

004.png

图 4 ↑

005.png

图 5 ↑

最终结果就是:

.slide-info .media-content a {
  /* 可自行确定字号或其他样式定义 */
  font-size: 15px;
}

其他

「图 3」所示区域内,点击右上的「+」号按钮,可以触发针对「选中元素」的「新建样式规则」,示例:

.media.slide-info {
}

↑ 会自动拼接全部类名作为选择器,可能需要根据实际情况调整;

另「:hov」「.cls」两个按钮我竟然才注意到,会是非常有用的功能,一直都不知道这里有快捷入口;

003.png

图 3 ↑


爱发电

本文标题:《「水坑」如何正确的自定义 CSS 样式》作者:沉冰浮水
原文链接:https://www.wdssmq.com/post/20190705015.html
特别注明外均为原创,转载请注明。

分享到微信

扫描二维码

可在微信查看或分享至朋友圈。

相关文章

Suitear Suitear 发布于 2010-10-28 23:24:33  
#cmt2561
这世界,狗也折腾~
回复
有意思么 有意思么 发布于 2010-10-28 19:47:50  
#cmt2560
这年头连狗狗都会跑酷了~
回复
小托 小托 发布于 2010-10-28 14:53:20  
#cmt2559
前排。哈哈 不错。
回复
沉冰浮水 沉冰浮水 发布于 2010-10-28 13:50:37  
https://www.wdssmq.com
爬树翻墙什么的对狗狗来说难度应该很大吧。。
----------
冬天到了,好冷。。。
回复
雅岚 雅岚 发布于 2010-10-28 13:25:37  
#cmt2557
[F]Smile[/F]这个。。狗狗应该很拿手罢。。。或许该说拿脚[F]Haha[/F]
回复
发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

网站分类

  • 订阅本站的 RSS 2.0 新闻聚合

搜索

本周旧文

搬家也告一段落,虽然搬过来的东西还得归置,新衣柜虽说已经散俩月味儿了,但还是不想放衣服进去。

要不我每年汇总整理一次??碎雨集_沉冰浮水_第1页

所以,不带这条的话,2024 年目前只发了 13 条嘟????

VSCode 内 git 操作卡住的时候没办法主动取消一直是个痛点,一般都是推送或拉取,今天连提交都卡了。。

又一个夏天过去了,所以今年也没买防水鞋套;然后天凉了,为了应对踢被子买了睡袋,不知道 1.2 米会不会略窄。。

《五至七时的克莱奥》,2018 年 6 月加入列表,21 年 11 月底发现 B 站上线了这部,直到前几天才看完,还是分两次看的。。接下来有五项是 2019 年的,都是电影 —— 略长的待办列表。。

有用程序自动抓取自己带 tag 的嘟,然后按年备份后从线上删除;刚发现去年的数据有备份但是没删线上??和本地数据对比后发现线上的还少一条,Why??

本质上,每个人需要的是「让自己面临的问题得到解决」的能力。。

这又涉及到直接能力和间接能力,,缺乏直接能力很正常,视情况可以通过学习来掌握直接能力,或者「请」有直接能力的人来帮自己解决。。

缺乏间接能力的情况是真没救,尤其是对「这是**我自己**面临的问题」这一前提没有明确认知的人。。

其实,在认知意义上,焦虑时我知道这种情绪对应「焦虑」这个文法词汇,此外还有「压抑」「悲伤」等等,然而「抑郁」其实是个我认知体系外的词,虽然经常一些情绪感受我找不到对应的语言词汇来表述,却也只能将其实表述为「找不到对应的语言词汇来表述」的某些感受。。

所以,我所面对的问题又可以明确向哪里寻求帮助呢?

爱发电支持者

最新留言

友情链接