css 伪类选择器

╰+哭是因爲堅強的太久メ 2021-07-24 20:54 550阅读 0赞

链接伪类选择器
    改变子元素样式，子元素必须写在hover后，前面写父元素标签
    如body:hover div{}  ; 改变body标签内的div样式
    
    	选择器:link
    		超链接未被访问时的样式
    		
    	选择器:visited
    		超链接已被访问时的样式
    		
    	选择器:hover
    		鼠标悬停样式
    			选中上级元素下级元素产生动画
    				上级元素:hover 下级元素选择器(以上级元素为起始点开始选择,不包括上级,非从头)	
    			对伪类产生样式
    			xx:hover::after{...}
    		
    		
    	选择器:active
    		鼠标按下时的样式
    	
    	选择器:focus
    		鼠标聚焦时的样式
    	
    	选择器:target
    		当被超链接点击时
    		子元素设置id,超链接设置href='#id',当点击超链接时该元素触发样式
    		
    结构性伪类选择器
    	选择器:not(选择器)
    		匹配不含有括号内选择器的元素样式,括号内选择器不加引号
    
    	选择器:first-child
    		选择器必须是子元素,匹配父元素的第一个子元素的样式
    		大多数元素都是body的子元素
    		
    	选择器:last-child
    		选择器必须是子元素，匹配父元素的最后一个子元素的样式
    	
    	选择器:only-child
    		选择器必须是子元素，匹配在父元素的子元素中唯一的一个标签
    		
    	选择器:ntn-child(第几个子元素)
    		选择器必须是子元素，匹配父元素中的第几个子元素
    		可以放表达式
    		li:nth-child(2n+1){
    			color:coral;
    		} 匹配奇数个子元素
    		
    	选择器:nth-of-type(第几个子元素)
    		选择器必须是子元素,根据子元素类型匹配其中的序列
    		
    	选择器:empty
    		匹配不包含任何子元素的元素的样式
    		
    	选择器:checked
    		匹配被选中的元素的样式，配合多选框等使用，配合紧邻兄弟选择器，可对被选择的元素的紧邻元素操作
    			input:checked+span{
    				color: red;
    			} 选择后的第一个span标签内容变红色，实现动态效果

代码示例:

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			
    			a:link{ 
    				color:yellow;
    				text-decoration: none;
    			}
    			a:visited{ 
    				color:red;
    			}
    			a:active{ 
    				color:blue;
    			}
    			.common{ 
    				color:aqua;
    			}
    			p:not(.common){ 
    				color:cadetblue;
    			}
    			li:first-child{ 
    				color:chartreuse;
    			}
    			li:last-child{ 
    				color:saddlebrown;
    			}
    			p:only-child{ 
    				color:olivedrab;
    			}
    			
    			p:empty{ 
    				font-weight: bold;
    			}
    			input:checked+span{ 
    				color: red;
    			}
    			li:nth-child(2n+1){ 
    				color:coral;
    			}
    		</style>
    	</head>
    	<body>
    		<a href="">超链接</a>
    		<p>aaaawww</p>
    		<p class="common">啊啊啊啊啊啊啊啊</p>
    		<p>哇啊啊啊啊啊啊啊啊啊啊</p>
    		<p>哈哈哈哈哈哈哈哈哈</p>
    		<input type="button" value="d"/>
    		
    		<p>	<a href="">绘画</a></p>
    		
    		<b >aaaaaann</b>
    		<hr />
    		<ul>
    			<li>哇</li>
    			<li>哈</li>
    			<li>呵</li>
    			<p>唯一</p>
    			<li>哒</li>
    			<li>嘻</li>
    			<li>嘤</li>
    		</ul>
    		<hr />
    		<ul>
    			<li>哇1</li>
    			<li>哈2</li>
    			<li>呵3</li>
    			<li>哒4</li>
    			<li>嘻5</li>
    			<li>嘤6</li>
    		</ul>
    		<hr />
    		男:<input type="radio" checked="checked" />
    		爱好: 	<input type="checkbox" /><span>篮球</span>
    				<input	type="checkbox"/ checked=:"checked"><span>唱跳</span>
    				<input	type="checkbox"/><span>rap</span> 
    	</body>
    </html>