css的顺序有可能使得样式无法实现,就像border它们一样!!!

在设置样式,突然弄到需要隐藏边框某一部分的时候,发现居然无法隐藏某一条边框,左思右想终无果,然后我又重新写一遍这一部分的css,当然不是照抄,结果前后一对比,发现了问题所在!!!

本以为写了border-left:none,就可以让左边框消失了,但结果却没有,花了撸主好多时间呢!在这里也不得不感叹,基础和经验同样重要!!!

结果是这样:

修改之后发现是border-left:none写在了border的前面,试想取消边框的时候,边框都还没有定义,又怎么去取消呢?

结果是这样的:

所以在这里也提醒大家,注重细节,注重基础!!!!

时间: 02-09

css的顺序有可能使得样式无法实现,就像border它们一样!!!的相关文章

标准化css属性顺序

前言 对于css文件而言,选择器的写法有它的讲究,如—— 1> 不要用ID选择器 2> 不要用通配符*选择器 3> 选择器的层级 ...... 对于属性值的写法也有他的讲究,如—— 1> 复合属性,如font.background.margin.padding等 2> 颜色.单位.hack.css3属性等 ...... 大家往往忽略一点,便是属性的书写顺序. 来自http://mdo.github.io/code-guide/,它所提倡的css属性顺序如下—— 1> P

css选择器顺序的小技巧

在线演示 本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个国外优秀单页,我在recode的时候做的,看源码他应该是用的js,我这里改成了css做,正好可以演示一下css选择器的顺序技巧. 首先是li标签的样式,这里就不说了,主要说一下hover的操作. 显示ul的hover,让所有的li标签缩短宽度. ....... 原文来自:css选择器顺序的小技巧

CSS书写顺序

CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spacing, color- text-align等) 4.背景(background, border等) 5.其他(animation, transition等) CSS书写规范 使用CSS缩写属性 CSS有些属性是可以缩写的,比

css书写顺序和常用命名推荐

写代码的时候有一个好的规范和顺序能够帮你节省很多时间.下文将推荐相关CSS书写顺序和规范的一些方法.这个文档将会整理进前端规范文档中,如果你有更好的意见,不妨留言告知我们. CSS书写顺序 该代码来自于互联网,最初好像是Mozilla的网站上. 1. Display & Flow(显示与流) 2. Positioning(位置) 3. Dimensions(尺寸) 4. Padding, Borders,Margins,Outline(填充.边界.边缘.轮廓) 5. Typographic St

css知多少(3)——样式来源与层叠规则

上一节<css知多少(2)--学习css的思路>有几个人留言表示思路很好.继续期待,而且收到了9个赞,我还是比较欣慰的.没看过的朋友建议先去看看上一节. 这一节就开始实践上一节的思路! 1. "层叠"的概念 CSS--层叠样式表,其中的"层叠"是什么意思呢?层叠就是浏览器对多个样式来源进行叠加,最终确定结果的过程.举一个简单的例子: 上图中有两个样式来源,第一个是引用的css1.css,第二个是自己在style中编写的样式."层叠"是

css九种的DIV边框样式

原文:css九种的IV边框样式 源代码下载:http://www.zuidaima.com/share/1550463334894592.htm

CSS3实战开发:使用CSS过滤效果来改变图片样式

</pre><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; font-size: 14px; line-height: 25.1875px;">   我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见

Mirror app HTML样式CSS之DIV遮罩背景层样式

设置背景图片后,如果背景图片颜色太亮,则建议放个div遮罩背景层-目前Google 放出的css中div遮罩层的样式: 1 /* Overlay gradient to allow text to be read over the image. */ 2 3 /* For cards with two lines of text (excluding footer) 4 * ex: hybrid templates & those needing more bottom readability

css层叠顺序

css层叠规则及各个选择器的特殊性. 1.有!important的规则的权重要高于没有的,有!important的规则优先级最高. 2.按特殊性对规则进行排序,各个选择器的特殊性为: 内联样式(即在html中声明的css)的特殊性为:1000 ID选择器的特殊性为:100 类属性值(class).伪类(:not).属性选择器([id=""])的特殊性为:10 各个元素和伪元素(:first-letter,first-line,before,after) 特殊性为:1 通配选择器(*)的