伪元素选择器

最新推荐文章于 2023-03-20 18:27:54 发布

ゅ空城旧梦

最新推荐文章于 2023-03-20 18:27:54 发布

阅读量1.5k

点赞数 1

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/dawn_36/article/details/94968373

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

伪元素选择器

伪元素选择器并不是针对真正的元素使用的选择器,伪元素选择器只针对CSS中已有的伪元素起作用。

CSS提供的伪元素选择器有如下几个:

１、 :first-letter :该选择器对应的CSS样式对指定对象内的第一个字符起作用。
２、:first-line : 该选择器对应的CSS样式对指定对象内的第一行起作用。
３、:before : 该选择器与内容的属性结合使用，用于在指定对象内部的前端插入内容。
4、:after : 该选择器与内容的属性结合使用，用于在指定对象内部的尾端添加内容。
下面先看：first-letter微元素选择器的用法。：first-letter选择器仅对块元素（例如：<div…/>、<p…/>、<section…/>）起作用。如果想对行内元素（如：<span…/>）使用该属性，必须先设定对象的heihjt、width属性，或者设定position属性为absolute，或者设定display属性为block。通过该选择器配合font-size、float属性可制作首字下沉效果。
代码如下：

<head>
	<style type="text/css">
		span{
			display:block;
			}
			/* span元素里第一个字母加粗、变红*/
			span:first-letter{
				color:#f00;
				font-size:20pt;
			}
			/* p元素里第一个字母加粗、变蓝 */
			p：first-letter{
				color：#00f;
				font-size:40pt;
				font-weight:bold;
			}
	</style>
</head>

效果如图：

:first-line选择器同样只对块元素起作用。如果要对行内元素使用该属性，必须先设定对象的height、width属性，或者设定position属性absolute，或者设定display属性为block。
:first-line伪元素选择器始终对第一行内容发挥作用，而不管这里的第一行是通过 br />元素控制换行，还是页面内容超过容器宽度所导致的换行。
:before、:after两个伪元素选择器需要与内容相关的属性结合使用，因此这里先介绍内容相关的属性。

CSS 3新增伪类选择器

结构性伪类选择器指定是根据HTML元素之间的结构关键进行筛选的伪类选择器。结构性伪类选择器有如下几种：
Selector:root:匹配文档的根元素。在HTML文档中，根元素永远是<html…/>元素。
Selector:first-child:匹配符合Selector选择器，而且必须是其父元素的第一个子元素的第一个子节点的元素。
Selector:last-child:匹配符合Selector选择器，而且必须是其父元素的最后一个子元素的第一个子节点的元素。
Selector:nth-child:匹配符合Selector选择器，而且必须是其父元素的第n个子元素的第一个子节点的元素。
Selector:nth-last-child:匹配符合Selector选择器，而且必须是其父元素的倒数第n个子元素的第一个子节点的元素。
Selector:nth-child（odd/even）:匹配符合Selector选择器，而且必须是其父元素的第奇数个/偶数个子节点的元素。
Selector:nth-last-child（odd/even）:匹配符合Selector选择器，而且必须是其父元素的倒数第奇数个/偶数个子节点的元素。

<head>
	<style type="text/css">
		li:nth-chiid(odd){
		margin:10px;
		border:2px dotted black;
		}
		li:nth-child(even){
		padding:4px;
		border:1px solid black;
		}
	</style>
</head>

效果如图：
奇数节点偶数节点

UI元素状态伪类选择器

UI元素状态伪类选择器主要用于根据UI元素的状态进行筛选。UI元素状态伪类选择器有如下几个：
Selector:line 匹配Selector选择器且未被访问前的元素（通常只能是超链接）。
Selector:hover: 匹配Selector选择器且处于鼠标悬停状态的元素。
Selector:focus:匹配Selector选择器且得到焦点的元素。
代码如下：

<head>
	<style type="text/css">
		td{
		border:1px soild black;
		padding:4px;
		}
		/*为处于鼠标悬停状态的表格行定义CSS样式*/
		tr:hover{
			background-color: #aaa;
		}
		/*为处于激活状态的input元素定义CSS样式*/
		input:action{
			background-color:blue;
		}
		/*为得到焦点的任意元素定义CSS样式*/
		:fous{
			text-decoration:underline
		}
		
	</style>
</head>

随机改变页面的背景色

改变页面的背景色是非常简单的事情，只要生成一个随机的6位数，并将该值赋给body元素的backgroundColor CSS属性即可。
代码如下：

<head>
		<meta http-equiv="Content-Type" content="textml;charset=utf-8"/>
		<script type='text/javascript'>
		function changeBg()
		{
			var  bgColor="" ;
			/*循环6次，生成一个随机的六位数*/
			for (var i = 0 ; i < 6; i++ ) 
			{
				bgColor += "" + Math.round( Math.random()*9);
			}
			/*将随机生成的背景颜色值赋给页面的背景色*/
			document.body.style.backgroundColor= "#" + bgColor;
		}
		/*为页面的单击事件绑定事件处理函数*/
		document.onclick = changeBg;
		</script>
	</head>

动态增加立体效果

立体效果是一种很简单的CSS效果，其原理是通过为其增加４个边框实现，其中左、上边框的颜色稍浅，而下、右边框的颜色稍深。
下面将这种立体效果定义成一个整体的CSS样式效果，然后通过鼠标点击事件触发。
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<script type="text/javascript">
		function chg()
		{
			document.getElementById("up").className="solid";
		}
		
		</script>
		<style type="text/css">
			.solid{
				width:160px;
				padding:6px;
				text-align:center;
				border-right:#222 4px solid;
				border-top:#ddd 4px solid;
				border-left:#ddd 4px solid;
				border-bottom:#222 4px solid;
				background-color:#ccc
			}
			
		</style>
	</head>
	<body>
		<input type="button" onclick = "chg()" value="增加立体效果" />
		<div id="up">立体效果</div>
	</body>
</html>

触发前效果图：
未触发
出发后效果图：
触发后

ゅ空城旧梦

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
伪元素选择器

伪元素选择器伪元素选择器并不是针对真正的元素使用的选择器,伪元素选择器只针对CSS中已有的伪元素起作用.CSS提供的伪元素选择器有如下几个:１\ :first-letter :该选择器对应的CSS样式对指定对象内的第一个字符起作用．２\ :first-line : 该选择器对应的CSS样式对指定对象内的第一行起作用．３\ :before :...
复制链接

扫一扫