有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题。
查找一些教材中(w3schools等),只说css的顺序是“元素上的style” >“文件头上的style元素” >“外部样式文件”,但对于样式文件中的多个相同样式的优先级怎样排列,没有详细说明。经过测试和继续搜索,得知优先级如下排列:
1. 样式表的元素选择器选择越精确,则其中的样式优先级越高:
id选择器指定的样式 >类选择器指定的样式 >元素类型选择器指定的样式所以上例中,#navigator的样式优先级大于.current_block的优先级,及时.current_block是最新添加的,也不起作用。
2. 对于相同类型选择器制定的样式,在样式表文件中,越靠后的优先级越高
注意,这里是样式表文件中越靠后的优先级越高,而不是在元素class出现的顺序。比如.class2 在样式表中出现在.class1之后:
.class1 { color: black}.class2 { color: red }
.class1 {color: black}
.class2 {color: red}
而某个元素指定class时采用 class="class2 class1"这种方式指定,此时虽然class1在元素中指定时排在class2的后面,但因为在样式表文件中class1处于class2前面,此时仍然是class2的优先级更高,color的属性为red,而非black。
3. 如果要让某个样式的优先级变高,可以使用!important来指定:
.class1 {color: black !important}.class2{color: red}
是的;因为各个浏览器都自带默认样式,而且默认样式还不一样。这样在写css的时候,你会发现,很难兼容所有浏览器。
有些浏览器自带padding值margin值。
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
margin: 0
padding: 0
}
/** 设置默认字体 **/
body,
button, input, select, textarea /* for ie */ {
font: 14px/1.5 tahoma, \5b8b\4f53, sans-serif
}
h1, h2, h3, h4, h5, h6 { font-size: 100% font-weight: normal}
address, cite, dfn, em, var { font-style: normal } /* 将斜体扶正 */
code, kbd, pre, samp { font-family: courier new, courier, monospace } /* 统一等宽字体 */
small { font-size: 12px } /* 小于 12px 的中文很难阅读, 让 small 正常化 */
/** 重置列表元素 **/
ul, ol { list-style: none }
/** 重置文本格式元素 **/
a { text-decoration: none }
a:hover { text-decoration: underline }
sup { vertical-align: text-top } /* 重置, 减少对行高的影响 */
sub { vertical-align: text-bottom }
/** 重置表单元素 **/
legend { color: #000 } /* for ie6 */
fieldset, img { border: 0 } /* img 搭车:让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100% } /* 使得表单元素在 ie 下能继承字体大小 */
/* 注:optgroup 无法扶正 */
/** 重置表格元素 **/
table { border-collapse: collapse border-spacing: 0 }
/* 重置 HTML5 元素 */
article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section,
summary, time, mark, audio, video {
display: block
margin: 0
padding: 0
}
mark { background: #ff0 }
理念:
1. reset 的目的不是清除浏览器的默认样式, 这仅是部分工作. 清除和重置是紧密不可分的.
2. reset 的目的不是让默认样式在所有浏览器下一致, 而是减少默认样式有可能带来的问题.
3. reset 期望提供一套普适通用的基础样式. 但没有银弹, 推荐根据具体需求, 裁剪和修改后再使用.