博客中css样式的正确设置
一、简介
博客园的文章是支持html代码和css样式的,即使是markdown写作。当某个标签需要特制样式时,我们可以自定义样式来覆盖掉原本的样式。
二、css样式优先级
参考至>>菜鸟教程<<
其中最重要的有两点。
①
内联样式 > ID 选择器(#) > 类选择器( . ) = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
还有
内联样式 > 内部样式 > 外部样式
内联样式即写在标签中的style属性;内部样式即写在html文件其它位置的<style>
标签;外部样式即<link>
标签远程加载的样式。相同优先级有冲突的话,靠后的生效。
但是很容易发现即使是内联样式,也不生效的情况,那是因为
②
当一个标签同时被多个选择符选中,我们便需要确定这些选择符的优先级。我们有如下规则:
计算选择符中 ID 选择器的个数(a),计算选择符中类选择器、属性选择器以及伪类选择器的个数之和(b),计算选择符中标签选择器和伪元素选择器的个数之和(c)。按 a、b、c 的顺序依次比较大小,大的则优先级高,相等则比较下一个。若最后两个的选择符中 a、b、c 都相等,则按照"就近原则"来判断。
即样式前面的选择器多的优先级高
一般来说我们自己的标签写一个id,用上父级标签的id和自己的id就有足够高的优先级了
如
#topics #no-box-shadow-img{
box-shadow:none;
}
ヽ( ⌒ω⌒)人(=‥= )ノ
博客中css样式的正确设置的更多相关文章
- 如何将word中的图片和文字导入自己的博客中
目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...
- 怎样将word中的图片插入到CSDN博客中
目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...
- 借用Snippet插件美化博客中的代码
书写博客,难免要贴出代码.然而直接贴出代码,则不美观.于是,应运而生出现了很多代码美化的插件.其中比较有名的是Syntax Highlighting插件. 笔者在网上翻阅的时候发现了Snippet ...
- [技术博客]iview组件样式踩坑记录
[技术博客]iview组件样式踩坑记录 iview官方文档. 在本次项目开发中,前端项目主要使用vue框架+iview组件构建,其中iview组件在使用过程中遇到了许多官方文档中没有明确说明或是很难注 ...
- 在hexo静态博客中利用d3-cloud来展现标签云
效果: http://lucyhao.com/tags/ hexo自带的tag cloud的标签展现不太美观,想能够展现出“云”效果的标签.在网上找到了d3-cloud这个项目,github地址:ht ...
- 在个人博客中优雅的使用Gitalk评论插件
在上一篇博客<程序员如何从0到1搭建自己的技术博客>中,我们了解了如何快速的从0到1搭建一个个人博客. 其实细心的你会发现,该博客用到了一个评论插件,这个插件就是Gitalk. 如果想要在 ...
- 关于将sublime中的代码高亮导出到博客中
第一步:打开sublime编辑器,用快捷键ctrl+shift+p调出control panel,在出现的输入框中输入install,按回车键 第二步:然后输入插件名称sublimehighlight ...
- VUE中CSS样式穿透
VUE中CSS样式穿透 1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将 ...
- 如何在hexo博客中在线阅读pdf
前言 有一些资料或者笔记是pdf版本的,如果想要放在博客中进行阅读,那么就得将其转换为markdown格式或者html格式.但是这样转换后,其原pdf的格式就会混乱了,排版将会变得很困难,不过一山更比 ...
随机推荐
- [MIT6.006] 18. Speeding up Dijkstra 加速Dijkstra算法
在之前的课我们讲过了Dijkstra算法,先回顾下,如下图: 那么如果加速DIjkstra算法寻找最短路径呢?这节课上讲师讲了两种方法:双向搜索(Bi-Directional Search)和目标方向 ...
- PyQt5信号与槽关联的两种方式
目录 通过QtDesigner 手动关联的方式 通过QtDesigner 单击菜单栏切换到信号槽编辑模式 单击控件并拖动鼠标到信号的接收对象上,一般为对话框自己,松开鼠标弹出信号和槽选择框 选中cli ...
- spring cloud 入门系列
springcloud入门总结转发自:https://www.cnblogs.com/sam-uncle/p/9340390.html 最近看到微服务很火,也是未来的趋势, 所以就去学习下,在dubb ...
- 算法题目:北邮python 3-C 排队前进
一道python作业的题目,比较有意思,题目如下: 题目描述 有 n 个人排队向一个方向前进,他们前进的速度并不一定相同. 最开始即 t=0 时,每个人的位置并不相同.可以把他们放在数轴上,设他们前进 ...
- Linux(centos6.8)配置Tomcat环境
1.下载Linux版的Tomcat包 (1)通过官方下载 tomcat官方:https://tomcat.apache.org/download-80.cgi (2)通过分享下载 如网盘分享等途径 2 ...
- SpringIOC基础知识总结
目录 1.BeanFactory和ApplicationContext的区别: 2.实例化bean的三种方式: ⽅式⼀:使⽤⽆参构造函数 ⽅式⼆:使⽤静态⽅法创建 ⽅式三:使⽤实例化⽅法创建 3.Be ...
- kali 系列学习06 - 攻击之密码破解
参考书 <kali linux渗透测试技术详解> 清华大学出版社 2015 杨波 一.medusa使用 原理:并行登陆破解 1.只输入单个命令,是查看帮助 root@kali:/tool ...
- php 数据转储Excel文件
1.下载PHPExcel文件 下载地址:https://www.php.cn/xiazai/leiku/1491 2.在php写入以下代码,执行即可 $arr = Db::name('user')-& ...
- git设置个人信息
git config --global user.name "username" 设置下自己提交的用户名 git config --global user.email " ...
- 怎么用CDR来批量导出图片
我们通过CorelDRAW上方菜单栏"布局"中的"插入页面"可以创建多个页面,同时编辑,适合比如书籍排版,杂志排版等等这些需要进行多页面编辑的工作. 图1:CD ...