【CSS】3-css伪类选择器

JeffHan^_^

已于 2022-07-27 08:56:57 修改

阅读量224

点赞数

分类专栏： CSS教程文章标签： css 前端 html

于 2022-07-27 08:39:16 首次发布

本文链接：https://blog.csdn.net/Jeffhan_java/article/details/125993064

版权

CSS教程专栏收录该内容

12 篇文章 0 订阅

订阅专栏

3-css伪类选择器

1.定义：

css伪类：用于添加一些选择器的特殊效果

2.常用伪类

1.超链接伪类：
    :link 超链接未点击
    :hover 鼠标悬停时
    :active 鼠标点击未松开时
    :visited 超链接已点击完成
    
2.其他伪类
    :first-child        指定元素的父元素的第一个标签
    :last_child         指定元素的父元素中的最后一个元素
    :nth-child(序号)    指定元素的父元素中的指定序号的元素
    odd:奇数行 even:偶数行
    :fist-of-type       指定元素的父元素中的第一个指定类型元素
    :last-of-type       指定元素的父元素的最后一个指定类型元素
    :nth-of-type        指定元素的父元素中的指定序号的指定类型元素
    :not(选择器)        排除括号内选择器选中的元素
    
    :first-letter       第一个字符
    :fist-line          第一行文本
    
    :before             在选定内容之前追加
    :after              在选定内容之后追加
    
    :focus              表单控件获取焦点时
    :checked            单选框和复选框选中时
    :in-range           在表单控件要求的范围内
    :disabled           当表单控件不可用时
    :read-only          当表单控件只读时

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css伪类</title>
		<style type="text/css">
			#clickMe,ul {
				font-size: 30px;
			}
			
			/* 超链接伪类 */
			#clickMe:link {
				color: yellow;
			}
			#clickMe:hover {
				color: green;
				font-size: 50px;
			}
			#clickMe:active {
				color: red;
				font-size: 40px;
			}
			#clickMe:visited {
				color: pink;
			}
			
			/* 其他伪类 */
			li:first-child {
				color: green;
			}
			
			li:last-child {
				color: yellow;
			}
			
			li:nth-child(3) {
				color: pink;
			}
			
			/* 隔行变色 */
/* 			tr:nth-child(odd) {
				color: green;
			} */
			tr:nth-child(2n-1) {
				color: green;
			}
/* 			tr:nth-child(even) {
				color: red;
			} */
			tr:nth-child(2n) {
				color: red;
			}
			tr:first-child {
				color: black;
			}
			
/* 			p:first-child {
				color: yellow;
			} */
/* 			p:nth-child(2) {
				color: yellow;
			} */
			div p:first-of-type {
				color: yellow;
			}
			
			#div3 p:not(#div3-p4) {
				color: green;
			}
			
			
			#p1:first-letter {
				font-size: 30px;
			}
			
			#p1:first-line {
				color: yellow;
			}
			
			
			#p2:before {
				content: "王子玉说：";
			}
			#p2:after {
				content: "!";
			}
			
			input:focus {
				background-color: green;
			}
			input:checked {
				width: 50px;
				height: 50px;
			}
			
			#age:focus {
				background-color: red;
			}
			#age:in-range {
				background-color: green;
			}
			
			input:disabled {
				background-color: lightgray;
			}
			
		</style>
	</head>
	<body>
		
		<!-- 超链接伪类 -->
		<a id="clickMe" href="#">点我，点我，点我</a>
		
		<!-- 其他伪类 -->
		<ul>
			<li>子项1</li>
			<li>子项2</li>
			<li>子项3</li>
			<li>子项4</li>
			<li>子项5</li>
			<li>子项6</li>
		</ul>
		
		<ul>
			<li>子项1</li>
			<li>子项2</li>
			<li>子项3</li>
			<li>子项4</li>
			<li>子项5</li>
			<li>子项6</li>
		</ul>
		
		<hr >
		
		<table border="1px" cellspacing="0" cellpadding="10px">
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>成绩</th>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>30</td>
			</tr>
			<tr>
				<td>2</td>
				<td>张三1</td>
				<td>80</td>
			</tr>
			<tr>
				<td>3</td>
				<td>张三2</td>
				<td>90</td>
			</tr>
			<tr>
				<td>4</td>
				<td>张三3</td>
				<td>40</td>
			</tr>
			<tr>
				<td>5</td>
				<td>张三4</td>
				<td>40</td>
			</tr>
			<tr>
				<td>6</td>
				<td>张三5</td>
				<td>40</td>
			</tr>
		</table>
		
		<hr >
		
		<div id="div1">
			<h3>这是标题</h3>
			<p>这是段落1</p>
			<p>这是段落2</p>
			<p>这是段落3</p>
		</div>
		<div id="div2">
			<h3>这是标题</h3>
			<h4>这是副标题</h4>
			<p>这是段落1</p>
			<p>这是段落2</p>
			<p>这是段落3</p>
		</div>
		
		<hr >
		
		<div id="div3">
			<p>这是段落1</p>
			<p>这是段落2</p>
			<p>这是段落3</p>
			<p id="div3-p4">这是段落4</p>
			<p>这是段落5</p>
		</div>
		
		<hr >
		<p id="p1">　　有人安于某种生活，有人不能。因此能安于自已目前处境的不妨就如此生活下去，不能的只好努力另找出路。你无法断言哪里才是成功的，也无法肯定当自已到达了某一点之后，会不会快乐。有些人永远不会感到满足，他的快乐只建立在不断地追求与争取的过程之中，因此，他的目标不断地向远处推移。这种人的快乐可能少，但成就可能大。</p>
		
		<hr >
		<p id="p2">hello world</p>
		
		<hr >
		<input type="text" id="input1" />
		<input type="text" id="input2" />
		<input type="text" id="input3" />
		<input type="text" id="input4" />
		
		<hr >
		性别：<input type="radio" name="sex" value="1" />男
			<input type="radio" name="sex" value="0" />女
		<br>
		爱好：<input type="checkbox" name="hobby" value="money" />金钱
			<input type="checkbox" name="hobby" value="girl" />女人
		<br>
		数字框：<input type="number" min="10" max="20" id="age"/>
		<br>
		<input type="text" disabled="disabled"/>
		
	</body>
</html>