博客中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的格式就会混乱了,排版将会变得很困难,不过一山更比 ...
随机推荐
- python_面向对象_组合
组合: 一个类的对象是另外一个类对象的属性 # 组合 # 一个类的对象是另一个类对象的属性 # 什么时候使用组合:当两个类之间的关系是 :什么有什么的关系 : 班级有学生 学生有班级 班级有课程 图书 ...
- 4. Spark在集群上运行
*以下内容由<Spark快速大数据分析>整理所得. 读书笔记的第四部分是讲的是Spark在集群上运行的知识点. 一.Spark应用组件介绍 二.Spark在集群运行过程 三.Spark配置 ...
- 这个Map你肯定不知道,毕竟存在感确实太低了。
这是why哥的第 75 篇原创文章 从Dubbo的优雅停机说起 好吧,其实本文并不是讲 Dubbo 的优雅停机的. 只是我在 Dubbo 停机方法 DubboShutdownHook 类中,看到了这样 ...
- 目录方式扩展swap分区大小
1.查看swap大小:free -m (-k|m|g) --以k|m|g为单位用去尾法显示大小 [root@lbg tmp]# free -m total used ...
- 如何统计Ceph的RBD真实使用容量
前言 ceph的rbd一直有个问题就是无法清楚的知道这个分配的空间里面到底使用了多少,这个在Jewel里面提供了一个新的接口去查询,对于老版本来说可能同样有这个需求,本篇将详细介绍如何解决这个问题 查 ...
- mdtest测试工具
软件介绍 mdstest是软件的元数据操作基准测试工具,用来模拟对文件或者目录的open.stat.close操作,然后报告性能 下载软件压缩包: yum install openmpi openmp ...
- git连接gitlab下载项目代码
1.安装git 2.鼠标右键git bash here 3.命令行界面输入生成公钥命令 ssh-keygen -t rsa -C'gitlab用户名' 然后一直按enter键下一步生成公钥即可' 4. ...
- 解决NUC972使用800*480屏幕时,tslib触摸屏校准时,坐标不对称问题
1.ADC_CONF寄存器中的ADCSAMPCNT的值,设置计数器值以延长ADC起始信号周期以获得更多采样精确转换的时间 2.内核驱动配置好触摸屏ADC的驱动后,调整autoconfig.h中的CON ...
- CSS属性(字体与文本属性)
1.字体属性 (1)font-family 把要对这个网站要设置的字体都写上,如果这个浏览器支持第一个字体,则会用,如果不支持则会尝试第二个,如果设置的字体系统都不支持则会使用系统默认的字体作为网站的 ...
- Java解释单链表中的头插法以及尾插法
单链表属于数据结构中的一种基本结构,是一种线性结构,在此使用Java对其中的头插法以及尾插法进行解释. 首先定义好链表中的节点类: 其中,data代表节点所存放的数据,next代表指向下一节点 对于单 ...