原文链接:http://www.cnblogs.com/LY-leo/p/5765598.html 对于 :before 和 :after 选择器,大家并不陌生,但是很少有人会主动去用它们.先解释下它们的定义和用法: :before 选择器在被选元素的内容前面插入内容,:after 选择器在被选元素的内容后面插入内容,都会使用 content 属性来指定要插入的内容. 有时候,项目中或多或少需要一些箭头,如果用图片来做,感觉就有点 low 了,而上面这两个选择器是最好的选择.效果如下: html…

1. p~ul p和ul有相同的父元素,选择出p元素之后的所有ul元素,其中,p和ul不一定是紧随,但是必须有相同的父元素 E+F            相邻兄弟选择器.选择匹配F的元素,且该元素位于所匹配元素E的后面相邻的位置 E>F 子包含选择器.F为子元素,E为F的父元素 之前很少用到这三种选择器,不过适当使用,真的方便不少... 估计理解为~  就是兄弟咯,且是有父亲的. > 这个最好理解,父亲的年龄总是大于孩子的,自然就是子包含选择器. + 相邻兄弟选择器,自然,要两个兄弟(元素)才…

写在前面的话:对于web开发,html完成网页的structure,css完成网页的presentation,js完成网页的behavior,今天就来说一说css,通过理解一些css的基础概念,能够更好的实现一些我们想要的功能. ====正文开始===== 当通过各个html标签完成网页的结构(structure),接下来就需要使用css完成网页的展示(presentation).展示实现的功能无非就是设置各个html标签的大小.样式,各个html标签在网页中如何摆放等功能,因此可以总结为如下几…

主要摘自网络开发者. 从最基本的层次来看,CSS是由两块内容组合而成的: 属性(Property):一些人类可理解的标识符,这些标识符指出你想修改哪一些样式,例如:字体,宽度,背景颜色等. 属性值(Value):每个指定的属性都需要给定一个值,这个值表示你想把那些样式特征修改成什么样,例如,你想把字体,宽度或背景颜色改成什么. 与值配对的属性被称为CSS声明,CSS声明会被放置在一个CSS声明块中.最后,CSS声明块与选择器相结合形成一个CSS规则集(或CSS规则). CSS 声明 给 CSS…

03-CSS样式表和选择器 #本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几种扩展选择器:后代选择器.交集选择器.并集选择器 CSS样式优先级 #前言 #CSS 概述 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. css的最…

如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里,官方的定义写得有点难以理解,我就大概的讲一下,我个人的理解: 首先它是什么? 看了很多文章后,包括官方的解释,我个人将他理解如下: 它是css2提出来的,它是一个具有规定的渲染.定位等规则的块级元素(或者说成一个环境):大家都知道,盒子box,一个布局中,可以同时存在很多盒子boxes,而盒子只是容器而已,…

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时…

深入理解CSS溢出overflow http://www.cnblogs.com/xiaohuochai/p/5289653.html overflow:hidden真的失效了吗 http://www.aliued.cn/2012/12/30/overflowhidden%E7%9C%9F%E7%9A%84%E5%A4%B1%E6%95%88%E4%BA%86%E5%90%97.html…

很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来实现相同效果罢了. HTML: <div id="box"> <p>pppppppp</p> <span></span> </div> CSS: div,p{ margin:0; padding:0; } #box{…

深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及那些“坑”.这篇博文主要分为以下几个部分: margin--基础知识 margin--在同级元素(非父子关系)之间应用 margin--在父元素和子元素之间应用(重点) margin--margin值的单位为%时的几种情况 第一部分:margin--基础知识 要介绍margin的基础知识,我们不可回…