css选择器太长失效了

html-css018

css选择器太长失效了,第1张

答:css失效的原因如下

一、div 标签未关闭

这是版面设计失效的最常见原因之一。当我们了解到这是多少精致的版块设计失效的罪魁祸首时,总会大吃一惊。开启的div标签是最普遍的版块设计失误之一,也是最难诊断的失误之一。验证程序有时会指向错误的开启div标签,诊断时就像大海捞针一样麻烦。

二、不当的DOCTYPE声明

不声明DOCTYPE,或者在文件开始错误声明DOCTYPE,也是一个常见错误。根据一般经验,Strict DOCTYPE是大家追求的最高级验证。Strict validation表明你的网页能够在所有浏览器上都得到最佳展示。

三、结尾斜线

如果你的网站不能验证,很有可能是在代码的某个地方漏写了结尾斜线。我们很容易忽略结尾斜线之类的东西,特别是在image标签等元素中。

在严格的DOCTYPE中这是无效的。要在img标签结尾处加上“/”以解决此问题。

四、JavaScript

如果已经声明Strict DOCTYPE,就需要在JavaScript中覆盖CDATA标签。验证程序的这一方面难倒了很多程序员,因为网站倾向于为广告和追踪脚本使用嵌入的 JavaScript。

五、不良嵌套

嵌套就是元素里又包括元素,我们容易混淆嵌套元素的顺序。例如在div标签前启动strong标签,但又先关闭div标签。这可能不会改变版块布局,但却会使你的版块设计失效。

如果仍无法发现,建议用“开发者模式”/“调试模式”(F12打开)查看对应元素继承了哪些属性,是不是其他的样式覆盖了自己设置的样式。

1、尽量避免行内样式和页面内嵌样式

2、减少CSS文件引用数量,生产环境压缩CSS文件。

3、初始化样式只对用到的标签,避免使用*{}。

4、避免对同一元素和类名多次重复定义某些属性,css代码能简写的尽量简写。

5、放弃对老旧浏览器支持,少写hack。

CSS优化包括很多方面,写CSS很简单很容易,但是要想写出精炼的CSS代码还是有很多技巧的。随便讲一下,不对的地方多多指正:

1、避免过度约束

// 糟糕

ul#nav{..}

// 好的

#nav{..}

2、后代选择符最烂

// 烂透了

html div tr td {..}

3、避免链式(交集)选择符

// 糟糕

.menu.left.icon {..}

// 好的

.menu-left-icon {..}

4、使用复合(紧凑)语法

// 糟糕

.someclass {

 padding-top: 20px

 padding-bottom: 20px

 padding-left: 10px

 padding-right: 10px

 background: #000

 background-image: url(../imgs/carrot.png)

 background-position: bottom

 background-repeat: repeat-x

}

// 好的

.someclass {

 padding: 20px 10px 20px 10px

 background: #000 url(../imgs/carrot.png) repeat-x bottom

}

5、避免不必要的命名空间

// 糟糕

.someclass table tr.otherclass td.somerule {..}

//好的

.someclass .otherclass td.somerule {..}

6、避免不必要的重复

.someclass {

 color: red

 background: blue

 font-size: 15px

}

.otherclass {

 color: red

 background: blue

 font-size: 15px

}

// 好的

.someclass, .otherclass {

 color: red

 background: blue

 font-size: 15px

}

7、最好使用表示语义的名字。一个好的CSS类名应描述它是什么而不是它像什么。

8、避免 !importants,其实你应该也可以使用其他优质的选择器。

9、尽可能精简规则,你可以进一步合并不同类里的重复的规则。

好吧,我就总结这9点吧,如果还有好的规则,请贴上来~~~