博客中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的格式就会混乱了,排版将会变得很困难,不过一山更比 ...
随机推荐
- 创建ABP Angular客户端(二)使用模板创建Angular前端
现在我们使用ABP CLI创建Angular客户端. 首先,进入控制台,创建一个空目录,进入这个目录,执行: abp new ZL.Test -u angular 这里我们使用与上一个系列相同的项目名 ...
- WSL2:我在原生的Win10玩转Linux系统
原文地址:梁桂钊的博客 博客地址:http://blog.720ui.com 欢迎关注公众号:「服务端思维」.一群同频者,一起成长,一起精进,打破认知的局限性. WSL2:我在原生的Win10玩转Li ...
- yum 的一些问题总结
1. yum 只删除目标,不删除依赖 rpm -e --nodeps xxx 2.yum remove 出错 报错 Error: Cannot retrieve repository metadata ...
- centos6 安装 terminator
yum install terminator 报错: No package terminator available. 解决: yum install epel-release 报错 Cannot r ...
- rbd-mirror配置指南-单向备份
前言 RBD 的 mirroring 功能将在Jewel中实现的,这个Jewel版本已经发布了很久了,这个功能已经在这个发布的版本中实现了,本来之前写过一篇文章,但是有几个朋友根据文档配置后,发现还是 ...
- 11.java设计模式之享元模式
基本需求: 小型的外包项目,给客户A做一个产品展示网站,客户A的朋友感觉效果不错,也希望做这样的产品展示网站,但是要求都有些不同 每个客户要求发布的方式不一样,A要求以新闻的方式发布,B要求以博客的方 ...
- MediaCodec编码OpenGL速度和清晰度均衡
## 概述 在安卓平台为了实现h264视频编码,我们通常可以使用libx264, ffmpeg等第三方视频编码库,但是如果对编码的速度有一定的要求,要实现实时甚至超实时的高速视频编码,我们并没有太 ...
- div定时放大缩小
<!DOCTYPE html> <html> <head> <style> .anim{ width: 100px; height: 100px; ba ...
- ServerLess之云函数实践-天气API
关注我的个人博客,发掘更多的内容 ServerLess之云函数实践-天气API 前言 云计算是大势所趋 Serverless 架构即"⽆服务器"架构,它是一种全新的架构方式,是云计 ...
- 下载器Folx教程:智能标签怎么用?
Mac专用下载器Folx的智能标签中内置了图片标签,可以自动分类图片文件,但要如何分类GIF图片呢?其实,我们可以在Folx的标签面板创建动图标签,然后再创建标签专属的下载文件夹,来独立存放GIF格式 ...