深入理解 CSS 的 :before 和 :after 选择器（制作select美化插件）

原文链接：http://www.cnblogs.com/LY-leo/p/5765598.html

对于 :before 和 :after 选择器，大家并不陌生，但是很少有人会主动去用它们。先解释下它们的定义和用法：

:before 选择器在被选元素的内容前面插入内容，:after 选择器在被选元素的内容后面插入内容，都会使用 content 属性来指定要插入的内容。

有时候，项目中或多或少需要一些箭头，如果用图片来做，感觉就有点 low 了，而上面这两个选择器是最好的选择。效果如下：

html 代码如下：

<div class="test"></div>

css 代码如下：

.test {
    position: relative;
    width: 120px;
    height: 40px;
    border: 1px solid #d2d2d2;
    border-radius: 3px;
}
.test:after {
    position: absolute;
    right: 15px;
    top: 18px;
    width: 0;
    height: 0;
    content: "";
    border-width: 6px 6px 0 6px;     /*border-width: 6px 6px 6px 6px;*/
    border-style: solid;
    border-color: #fff transparent;    /*red transparent transparent transparent;*/
    -webkit-transition: all .25s;
       -moz-transition: all .25s;
        -ms-transition: all .25s;
         -o-transition: all .25s;
            transition: all .25s;
}

.test:before {
    position: absolute;
    right: 13px;
    top: 18px;
    width: 0;
    height: 0;
    content: "";
    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: #d36969 transparent;
    -webkit-transition: transform .25s;
       -moz-transition: transform .25s;
        -ms-transition: transform .25s;
         -o-transition: transform .25s;
            transition: transform .25s;
}
.test.active:after{
    top: 20px;
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
}
.test.active:before{
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
}

通过 :before 和 :after 两个伪元素，设置 content 为空，宽高为零，边框和颜色，生成两个等边三角形，一个是红色的三角，其边长稍大，一个是白色的三角。会有人问为什么白色三角是通过 :after 生成的，因为 :after 生成的白色三角才能覆盖在 :before 生成的红色三角，而形成一个箭头(一定要设置好定位的 top 值，使两个三角的底边重合)。

js 代码如下：

$(‘.test‘).on(‘click‘,function(){
      $(this).toggleClass(‘active‘);
})

点击的时候箭头会旋转180度，效果如下：

分析：

加z-index: 10前后：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.test {
				position: relative;
				width: 120px;
				height: 40px;
				border: 1px solid red;
				border-radius: 3px;
			}

			.test:after {
				position: absolute;
				right: 15px;
				top: 18px;
				width: 0;
				height: 0;
				content: "";
				border-width: 6px 6px 6px 6px;
				border-style: solid;
				border-color: red transparent transparent transparent;
				transition: all .25s;
			}

			.test:before {
				position: absolute;
				right: 13px;
				top: 18px;
				width: 0;
				height: 0;
				content: "";
				border-width: 8px 8px 8px 8px;
				border-style: solid;
				border-color: green transparent;
				transition: transform .25s;
				/*z-index: 10;*/
			}
		</style>
	</head>

	<body>
		<div class="test">aaaaaa</div>
	</body>

</html>

　　修改1：

.test:before {
				position: absolute;
				right: 13px;
				top: 18px;
				width: 0;
				height: 0;
				content: "";
				border-width: 8px 8px 8px 8px;
				border-style: solid;
				border-color: green transparent transparent transparent;
				transition: transform .25s;
				/*z-index: 10;*/
			}

　　修改后的样式：

	.test:after {
				position: absolute;
				right: 15px;
				top: 18px;
				width: 0;
				height: 0;
				content: "";
				border-width: 6px 6px 6px 6px;
				border-style: solid;
				border-color: white transparent transparent transparent;
				transition: all .25s;
			}

			.test:before {
				position: absolute;
				right: 13px;
				top: 18px;
				width: 0;
				height: 0;
				content: "";
				border-width: 8px 8px 8px 8px;
				border-style: solid;
				border-color: green transparent transparent transparent;
				transition: transform .25s;
				/*z-index: 10;*/
			}

　　

制作美化select 插件：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul li {
				list-style: none;
			}

			.test {
				position: relative;
				float: left;
				width: 120px;
				height: 40px;
				padding-left: 11px;
				font-size: 15px;
				line-height: 40px;
				cursor: pointer;
				border: 1px solid red;
				border-radius: 3px;
				margin: 0px 20px;
				outline: none;
			}

			.test:before {
				position: absolute;
				right: 13px;
				top: 18px;
				width: 0;
				height: 0;
				content: "";
				border-width: 8px 8px 0 8px;
				border-style: solid;
				border-color: red transparent;
				-webkit-transition: transform .25s;
				-moz-transition: transform .25s;
				-ms-transition: transform .25s;
				-o-transition: transform .25s;
				transition: transform .25s;
			}

			.test:after {
				position: absolute;
				right: 15px;
				top: 18px;
				width: 0;
				height: 0;
				content: "";
				border-width: 6px 6px 0 6px;
				border-style: solid;
				border-color: #fff transparent;
				-webkit-transition: all .25s;
				-moz-transition: all .25s;
				-ms-transition: all .25s;
				-o-transition: all .25s;
				transition: all .25s;
			}

			.test.active:before {
				-webkit-transform: rotate(180deg);
				-moz-transform: rotate(180deg);
				-ms-transform: rotate(180deg);
				-o-transform: rotate(180deg);
				transform: rotate(180deg);
			}

			.test.active:after {
				top: 20px;
				-webkit-transform: rotate(180deg);
				-moz-transform: rotate(180deg);
				-ms-transform: rotate(180deg);
				-o-transform: rotate(180deg);
				transform: rotate(180deg);
			}

			.test .dropdown {
				position: absolute;
				right: 0;
				left: 0;
				display: none;
				padding: 0;
				border-radius: inherit;
				border: 1px solid #d2d2d2;
				box-shadow: 2px 2px 5px rgba(0, 0, 0, .4);
			}

			.test.active .dropdown {
				display: block;
			}

			.test .dropdown:before {
				position: absolute;
				right: 13px;
				bottom: 100%;
				width: 0;
				height: 0;
				content: "";
				border-width: 0 8px 8px 8px;
				border-style: solid;
				border-color: #d2d2d2 transparent;
			}

			.test .dropdown:after {
				position: absolute;
				right: 15px;
				bottom: 100%;
				width: 0;
				height: 0;
				content: "";
				border-width: 0 6px 6px 6px;
				border-style: solid;
				border-color: #fff transparent;
			}

			.test .dropdown li {
				float: left;
				width: 129px;
				font-size: 14px;
				-webkit-transition: all .3s ease-out;
				-moz-transition: all .3s ease-out;
				-ms-transition: all .3s ease-out;
				-o-transition: all .3s ease-out;
				transition: all .3s ease-out;
				text-align: center;
			}

			.test .dropdown li:first-of-type {
				border-radius: 3px 3px 0 0;
			}

			.test .dropdown li:last-of-type {
				border-radius: 0 0 3px 3px;
			}

			.test .dropdown li:hover {
				color: #fff;
				background: red;
			}
		</style>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
		$(function(){

			function DropDown(el) {
				this.dd = el;
				this.span = this.dd.children(‘span‘);
				this.li = this.dd.find(‘ul.dropdown li‘);
				this.val = ‘‘;
			}
			DropDown.prototype.initEvents = function() {
				var obj = this;
				obj.dd.on(‘click‘, function(event) {
					$(this).toggleClass(‘active‘).siblings().removeClass(‘active‘);
					event.stopPropagation();
				});
				obj.li.on(‘click‘, function() {
					var opt = $(this);
					obj.val = opt.html();
					if(obj.span.html() == obj.val) return;
					obj.span.html(obj.val);
					$(document).click(function() {
						$(‘.test‘).removeClass(‘active‘);
					});
				})
			}
			var test1 = new DropDown($(‘#type‘));
			var test2 = new DropDown($(‘#kind‘));
			test1.initEvents();
			test2.initEvents();
			})
		</script>
	</head>

	<body>
		<div id="type" class="test">
			<span>投资种类</span>
			<ul class="dropdown">
				<li>期货</li>
				<li>股票</li>
				<li>期权</li>
			</ul>
		</div>
		<div id="kind" class="test">
			<span>投资类型</span>
			<ul class="dropdown">
				<li>趋势</li>
				<li>震荡</li>
				<li>套利</li>
				<li>选股</li>
				<li>择时</li>
			</ul>
		</div>
	</body>

</html>

　　

时间： 2024-12-11 04:54:43

深入理解 CSS 的 :before 和 :after 选择器（制作select美化插件）的相关文章

理解CSS中的三种选择器&gt;+~

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

理解CSS

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

理解css属性的继承和覆盖

首先,我们梳理一下哪些属性会被继承 文本 color 颜色,a元素除外 direction 方向 font 字体 font-family 字体系列 font-style 字体风格 font-size 字体大小 font-weight 字体粗细 letter-spacing 字母间距 line-height 行高 text-align 对齐方式 text-indent 首行缩进量 text-transform 大小写修改 visibility 可见性 white-space 指定如何处理表格 wo

深入理解CSS中的层叠上下文和层叠顺序(转)

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

理解CSS盒子模型

什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式.那么内容就是盒子里装的东西:而填充就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料:边框就是盒子本身了:至于边界则说明盒子摆放的时候的不能全部堆在一起,要留一定

深入理解CSS中的margin

1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准之中,jquery中有相对应的方法 margin与可视尺寸 1.1使用那个与没有设定width/height的普通block水平元素 2.2只适用于水平方向尺寸 <body style="background-color:#1a2b3c"> <div style=&quo

深入理解CSS中的层叠上下文和层叠顺序

零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时候,显然,是不可能做到完全等同的,先后顺序,身份差异就显现出来了.例如,杰克和罗斯,只能一人浮在木板上,此时,出现了冲突,结果大家都知道的.那对于CSS世界中的元素而言,所谓的“冲突”指什

深入理解CSS盒子模型

前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverflow上求助.ifaou在帮助我解决我问题的同时,还推荐我阅读一篇有关CSS盒子模型的文章<The CSS Box Model>,阅读之后受益匪浅,才知道自己对盒子模型知识还是如此欠缺.恰逢学期末,项目验收后暂时告一段落,有空闲的时间.于是想把这篇文章翻译出来,一方面再给自己一点挑战和锻炼,另一方面也给大家参考,让更多的人受益. 这篇文章适合初级web设计朋友,让你对盒子模型有更近一步的理解.但是在阅读这篇文

[2016-01-16][CSS][定义样式表(样式选择器)]

Class 定义:.classname{ 属性:属性值;} 使用:<p class = "classname"></p> ID 定义: #IDNUM{ 属性:属性值; } 使用:<p id = "IDNUM"></p> 组合选择器 定义:标记1,标记2...标记n{属性:属性值;} 使用:直接正常使用上面存在标记即可 伪选择器 calss的使用 ID的使用 组合选择器h1 h2 h3 伪选择器 1 2 3 4 5 6