文档章节

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

bosscheng
 bosscheng
发布于 2015/04/12 10:04
字数 431
阅读 7
收藏 0
点赞 0
评论 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标示特定页面。


继承





© 著作权归作者所有

共有 人打赏支持
bosscheng
粉丝 78
博文 211
码字总数 91232
作品 0
南京
前端工程师
【CSS3初探之Media Queries】终于完成了的CSS3,我们来个终章总结!

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

范大脚脚 ⋅ 2017/12/14 ⋅ 0

Modernizr:HTML5和CSS3的开发利器

随着HTML5和CSS3的飞速发展,越来越多语义化的标签和炫酷的特性被应用到web应用开发中来,各大浏览器厂商纷纷开始支持这些新特性,web开发人员也都兴趣十足地试用这些新特性开发出更绚丽有趣...

BryanYang ⋅ 2014/02/24 ⋅ 0

Modernizr.js,~让css兼容性跟历史说再见!(上篇)

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

做h5的小韩 ⋅ 2016/07/29 ⋅ 0

大家好,我给大家介绍一下,这是CSS伪元素:before与:after

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

GavinHsueh ⋅ 2017/10/23 ⋅ 0

CSS入门指南-1:工作原理

这是CSS设计指南的读书笔记,用于加深学习效果。 最近想做一个小程序,前端是必修课,那就从css开始吧。 css 工作原理 每个html元素都有一组样式属性,可以通过css来设定。当html元素的同一个...

goodspeed ⋅ 2017/07/19 ⋅ 0

Less-学习前的准备工作

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

透笔度 ⋅ 2015/10/16 ⋅ 0

BootStrap学习从现在开始

前言   原文链接 http://aehyok.com/Blog/Detail/6.html   当下最流行的前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢。本文总结了Bootstrap之所以广泛流传...

aehyok ⋅ 2013/10/21 ⋅ 0

CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式

  最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧。之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能...

雲霏霏 ⋅ 2015/04/01 ⋅ 0

bootstrap今天的学习心得

今天花了一个下午加晚上的时间研究了bootstrap,收获还是很多,首先是进入官方网站http://twitter.github.io/bootstrap/。也有中文的网站,由于个人英文不好,所以就是登录的中文网站http://...

Noin ⋅ 2013/04/21 ⋅ 4

学习前端开发,一段心路历程,这个世界根本没有速成的方法

在已经成功的为大家讲解了很多篇有关前端开发的技术文章之后,想跟每一位前端开发人员谈一谈学习前端开发的一些心得。本篇文章我就来给大家说一说我在学习前端开发过程中的一些经验,我把它们...

大数据大佬 ⋅ 06/08 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Jenkins实践3 之脚本

#!/bin/sh# export PROJ_PATH=项目路径# export TOMCAT_PATH=tomcat路径killTomcat(){pid=`ps -ef | grep tomcat | grep java|awk '{print $2}'`echo "tom...

晨猫 ⋅ 今天 ⋅ 0

Spring Bean的生命周期

前言 Spring Bean 的生命周期在整个 Spring 中占有很重要的位置,掌握这些可以加深对 Spring 的理解。 首先看下生命周期图: 再谈生命周期之前有一点需要先明确: Spring 只帮我们管理单例模...

素雷 ⋅ 今天 ⋅ 0

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部