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知多少(3)——样式来源与层叠规则

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

css层叠顺序

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

CSS 基本概念(Basic CSS Concepts)三、解决样式冲突

三.解决样式冲突(Resolving Style Conflicts) 在创建一个样式表的过程中,很可能有许多不同的规则将适用于同一个元素.例如,如果一个规则适用于所有的段落元素,另一个规则适用于具有一个具有紧急值的类属性的所有元素,那么应该使用哪一个规则? 当它发生时,这两个规则将适用.如果不同的规则包含处理不同属性的声明,那么就没有冲突,样式都是“组合在一起”的.但是,如果有不同的规则试图为同一个属性设置值的声明,那么有机制决定哪些样式将被使用. 举例说明,假设有以下三个规则: div#as

CSS选择符优先级引起的样式失效

选择符优先级带来的样式失效: 由于CSS选择符优先级可能引起某些样式失效,这个问题初学者可能会碰上,但是往往并不容易发现. 代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落

深入理解脚本化CSS系列第五篇——动态样式

前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦.但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比如动态样式就相对较复杂 所谓动态样式,是指在页面加载时并不存在,在页面加载完成后动态添加到页面的样式 动态样式包括两种情况:一种是通过<link>元素插入外部样式表,另一种是通过<style>元素插入内部样式.下面将详细介绍这两种情况 外部样式 /*style.css里面的内容*/ .

【css2、css3】css改变select选择框的样式

效果: 代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Document</title> 6 <style type="text/css"> 7 /* 去掉默认样式,设置新的样式 */ 8 .select-style{ 9 position:

CSS元素、边框、背景样式

一.元素样式 1.width控制元素宽度 2.height控制元素宽度 3.padding控制元素内边距 内容与边框之间的距离 4.margin控制元素外边距 元素边框与其他元素边框之间的距离,如果两元素都设置了margin属性,浏览器只   对较大值有效. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></

解读CSS的背景(background)样式

background-color: 可以为所有的元素设置背景色,这个属性接受任意合法的颜色值,如果希望背景色从元素文本向外少有延伸,只需增加一些内边距(padding). 注意:background-color 不能继承,其默认值是 transparent.transparent 有“透明”之意.也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见.事实上,所有背景属性都不能继承. background-image: background-image 属性的默认

css学习之-对链接应用样式

1.简单的链接样式 对链接应用样式最容易的方式是使用锚类型选择器,但是锚类型选择器也不总是理想的,因为它既可以作为内部引用,又可以作为外部链接. 锚的伪类选择器,:link,:visited,:hover,:focus,:active 大多数人最初使用锚选择器做的第一件事是去掉链接的下划线,text-decoration:none,添加下划线,text-decoration:underline 2.简单的链接修饰 a.使用边框创建不太影响美观的下划线 b.使用图像创建链接下划线 3.为已访问链接