文档章节

css学习心得-为样式找到应用目标

bosscheng
 bosscheng
发布于 2015/04/12 10:04
字数 431
阅读 9
收藏 0
css

常用选择器

# 类型选择器 

# 后代选择器

伪类

:link :visited 链接伪类 ,只能用于锚元素

:hover :active :focus 动态伪类,可以应用于任何元素

ps: ie6 忽略掉 :focus伪类。ie7任何元素都支持:hover,但是会忽略掉:active 和 :focus

通用选择器

*

高级选择器

子选择器和相邻同胞选择器

区别所有后代和直系后代(子元素)

#nv>li{

}

兼容性:ie7+ ,但是针对于这样的写法,如果在ie7中,html中存在注释的话,就会出现问题。

在ie6中,可以通过通用选择器模拟子选择器的效果。

做法:

// 先在所有后代应用你希望子元素具有的样式。
#nav li{
    background:url(pig.jpg) no-repeat left top;
    padding-left:20px
}
// 通过通用选择器覆盖子元素的后代上的样式。
#nav li *{
 background-img:none;
 padding-left:0;
}

相邻 元素(同一个父级下某个元素之后的元素)(只是一个元素

h2 + p{
  
}

PS: 同子元素选择器一样,如果html之间存在注释的话,也会存在问题的。

属性选择器

a[title]{

}
// 根据某个属性是否存在对元素应用样式
a[title]:hover{
   cursor:pointer;
}
// 可以根据属性值应用样式
a[rel="nofollow"]{
  
}

ps: ie6 不支持该写法

// ie6 的样式效果
#header{

}
// 其他样式
[id="header"]{
}


层叠和特殊性

可以通过!important

层叠采用以下重要度次序

  1. 标有!important 的用户样式

  2. 标有!important的作者样式

  3. 作者样式

  4. 用户样式

  5. 浏览器/用户代理应用的样式


使用类标示页面类型,使用id标示特定页面。


继承





© 著作权归作者所有

共有 人打赏支持
下一篇: npm 参数
bosscheng
粉丝 80
博文 303
码字总数 95443
作品 0
南京
前端工程师
私信 提问
【CSS3初探之Media Queries】终于完成了的CSS3,我们来个终章总结!

前言 无论如何,学到这里,我可以自豪的告诉自己,我HTML5与CSS3学完了,不管我现在还记得住多少,我确确实实将他们学完了,还做了不少demo。 回想几个月前,我一直在纠结自己应该学习HTML5...

范大脚脚
2017/12/14
0
0
8 个帮助你编写可维护、精简化前端代码的 CSS 策略

写基本的 CSS 和 HTML 是入门 Web 开发首先需要学习的事情之一。然而我遇到的很多程序显然没有真正的花时间去考虑前端开发的长期性和可维护性。 我认为这主要是因为很多开发者在组织他们的 ...

oschina
2017/12/26
1K
1
Modernizr.js,~让css兼容性跟历史说再见!(上篇)

什么是Modernizr? Modernizr是一个开源的JS库,它使得那些基于访客浏览器的不同(指对新标准支持性的差异)而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和C...

做h5的小韩
2016/07/29
22
0
大家好,我给大家介绍一下,这是CSS伪元素:before与:after

之前对于CSS伪元素的应用并不多,最近在用一款建站系统为客户做企业门户网站时,发现网页HTML代码中经常出现::before和::after。后经查资料才了解,这都是CSS的为元素。CSS 伪元素用于向某些...

GavinHsueh
2017/10/23
0
0
Less-学习前的准备工作

学习less,我们肯定要有相应的环境,我们预览网址 http://www.1024i.com/demo/less/ 提供了2种方法,我们采用服务端用法,不过只是用前半部分,就是把写好的less文件转为css文件,html引用的...

透笔度
2015/10/16
87
0

没有更多内容

加载失败,请刷新页面

加载更多

js垃圾回收机制和引起内存泄漏的操作

JS的垃圾回收机制了解吗? Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。 JS中最常见的垃圾回收方式是标记清除。 工作原理:是当变量进入环境时,将这个变量标记为“...

Jack088
23分钟前
2
0
大数据教程(10.1)倒排索引建立

前面博主介绍了sql中join功能的大数据实现,本节将继续为小伙伴们分享倒排索引的建立。 一、需求 在很多项目中,我们需要对我们的文档建立索引(如:论坛帖子);我们需要记录某个词在各个文...

em_aaron
40分钟前
2
0
"errcode": 41001, "errmsg": "access_token missing hint: [w.ILza05728877!]"

Postman获取微信小程序码的时候报错, errcode: 41001, errmsg: access_token missing hint 查看小程序开发api指南,原来access_token是直接当作parameter的(写在url之后),scene参数一定要...

两广总督bogang
40分钟前
7
0
MYSQL索引

索引的作用 索引类似书籍目录,查找数据,先查找目录,定位页码 性能影响 索引能大大减少查询数据时需要扫描的数据量,提高查询速度, 避免排序和使用临时表 将随机I/O变顺序I/O 降低写速度,占用磁...

关元
58分钟前
7
0
撬动世界的支点——《引爆点》读书笔记2900字优秀范文

撬动世界的支点——《引爆点》读书笔记2900字优秀范文: 作者:挽弓如月。因为加入火种协会的读书活动,最近我连续阅读了两本论述流行的大作,格拉德威尔的《引爆点》和乔纳伯杰的《疯传》。...

原创小博客
今天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部