博客中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的格式就会混乱了,排版将会变得很困难,不过一山更比 ...
随机推荐
- javascript中什么是函数
函数的定义 在javascript中函数是一段可以被执行或调用任意次数的JavasScript代码,在数据类型中属于"function".函数也拥有属性和方法,因此函数也是对象. ...
- selenium之 定位以及切换frame(iframe)(转)
frame标签有frameset.frame.iframe三种,frameset跟其他普通标签没有区别,不会影响到正常的定位,而frame与iframe对selenium定位而言是一样的,seleni ...
- struts2中数据的传输
1.传统的写多个request接受参数方法. 2.struts2中的多个setter方法,getter方法 3.利用实体bean,让strut2 实例bean,少写setter方法,getter方法, ...
- 每日理解(一) Spring框架
每日理解 SpringIOC 控制反转 在Java SE中通过new来创建对象.而在Spring中通过容器来控制对象. 所谓的控制包括:对象的创建.初始化.以及销毁.我们有之前的主动控制对象,变为了S ...
- matlab 第五章单元数组、字符串作业
1.创建 2×2 单元数组,第 1.2 个元素为字符串,第三个元素为整型变量,第四个元素为双精度(double)类型,并将其用图形表示. A=cell(2,2); A(1,1)={'mat'}; A( ...
- pikachs 渗透测试2-XSS漏洞及利用
一.概述 XSS(跨站脚本)概述 Cross-Site Scripting 简称为"CSS",为避免与前端叠成样式表的缩写"CSS"冲突,故又称XSS.一般XS ...
- 3dmax利用静止静态对象功能,制作精准击碎效果
一般情况下,当我们在3D建模中使用RayFire破碎插件来制作一些精准击碎效果时,需要将物体的击中部分定义为休眠对象,将其他未击中的部分定义为静态对象,以实现击中部分出现碎片的效果.但这种方式必须精准 ...
- MathType中如何实现上下两行公式“=”号对齐
作为功能强大的数学公式编辑器,MathType可以轻松输入各种复杂的公式和符号,与 Office 文档完美结合,显示效果超好,比 Office 自带的公式编辑器要强大很多,可以为办公文档.网页.桌面出 ...
- zabbix地图显示全国延迟
Zabbix 地图显示全国延迟 1. 效果图 2. 实现方法 将地图.png上传到zabbix为背景,上传红绿点.png为图标.然后新建主机关联模板为ICMP Ping,新建一个拓扑图调用地图为背 ...
- 禅道 基于原lnmp 搭建
禅道下载地址:https://www.zentao.net/download/zentaopms12.3.3-80243.html '' [root@5ig6m dev]# wget https:// ...