HTML5常用选择器

最新推荐文章于 2021-06-04 03:38:29 发布

煎饼果儿

最新推荐文章于 2021-06-04 03:38:29 发布

阅读量210

点赞数

本文链接：https://blog.csdn.net/weixin_44975452/article/details/103227534

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用选择器</title>
		<style>
			input:focus{
				background: aliceblue;
			}
			
			p::selection{
				background: cadetblue;
			}
			p:before[title=p]{
				content:"选自P大的《山河表里》";
				color:lightblue;
				
			}
			
			P[title=hello]{
				background-color: #ADD8E6;
			}
			
		</style>
		
	</head>
	<body>
		<!--
			元素选择器
				选中指定元素，设置样式
				元素名称{}
				
			id选择器（id全页面唯一）
				通过元素id属性值选择唯一元素
				#id属性值{}
			
			类选择器
				class属性
					和id属性类似，
					可重复,
					相同class属性值为一组，
					一个元素可有多个class属性值，多个值之间用空格隔开&nbsp;
				语法为：
					.class属性值{}
			
			选择器分组/并集选择器（同时选中多个选择器对应元素）
				语法：
					选择器1，选择器2.选择器3，选择器N{}
					
			通配选择器（页面所有元素）
				语法：
					*{}
			
			复合选择器/交际选择器(同时满足多个选择器的元素)
				语法：
					选择器1选择器2选择器N{}
					
			后代元素选择器（选中指定元素的指定后代元素）
				元素关系
					父元素
					子元素
					祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
					后代元素：直接或间接被祖先元素包含的元素，父元素也是祖先元素
					兄弟元素：共同父元素
				语法：
					祖先元素 后代元素{}
					
			子元素选择器（指定父元素的子元素）（IE6以后不支持）
				语法：
					父元素>子元素
					
			ps:兼容性，开发者工具，测试兼容性软件，IEtester
			   选择器游戏联系（餐厅盘子）
			   
			   
			伪类选择器（表示元素特殊状态）
				a:link{}   普通连接
					
				a:visited{}  访问过
					ps:通过历史记录确定用户是否访问，涉及隐私只能设置颜色
					
				:hover{}   鼠标移入(IE6不支持对a以外设置hover和active)
					a,p,
				:active{}   被激活（长按）
					a,p,
				
				:focus{}   获取焦点
				
				::selection{}   为p标签中选中文字设置样式
					ps:火狐浏览器专属为::-moz-selection
			
			伪元素选择器（表示元素中特殊位置)
				:first-letter{}    第一个字符
				
				:first-line{}     第一行
				
				:before{}     元素最前方（标签开始）
					ps:结合content，通过content可以向before或after的位置添加一些内容
				
				:after{}     元素最后边
					
			属性选择器
				作用：根据元素中的属性或属性值来选取指定元素
				语法：
					
						[属性名]选取含有指定属性的元素
						[属性名="属性"] 选取含有指定属性值的元素
						[属性值^="属性值"] 选取属性值以指定内容开头的元素
						[属性值$="属性值"] 选取属性值以指定内容结尾的元素
						[属性值*="属性值"] 选取属性值以指定内容包含的元素
						[属性值~="属性值"] 
						[属性值|="属性值"] 
					
					title属性（任何标签可用指定）：鼠标移入时，值作为文字提示显示
						
						
			子元素选择器（伪类）
				:first-child   第一个子元素(所有子元素中)
				:last-child    最后一个子元素
				:nth-child(参数)     任意位置子元素
					even（偶数）
					odd（奇数）       隔行变色
				:first-of-type       当前类型子元素中第一个
				:last-of-type        当前类型子元素中最后个
				:nth-of-type         当前类型子元素中任意一个
				
			兄弟元素选择器
				一个元素后 紧挨着 的指定元素
					前一个 + 后一个
				训中元素后边的所有兄弟元素
					前一个 ~ 后一个
					
			否定伪类（从已选定元素去除某种元素）
				:not() 
			
		-->
		
		<!--
			继承，在CSS样式中，祖先元素样式会被后代元素继承，可设置基本样式。
			
			不会继承：
				背景相关样式
				边框相关样式
				定位相关样式
		-->
		
		<!--
		
		-->
		<p title="p">
			褚桓就是无法说服自己相信：这一切都是真的，不是他自己的臆想，也不是什么东西强加给他的幻觉。
			
			    连续数日，褚桓整宿整宿的都是在装睡，夜深人静的时候看着南山，他会忍不住偷偷伸手碰一下，不过碰完他又觉得多此一举。
			
			    如果他看见的、听见的都是假的，那按照这个逻辑，碰到的也未必就是真实的。
			
			    他无数次努力试图说服自己，他是脚踏实地的活在真实世界里的，但是找不到证据。
			
			    世界上再也没有任何东西能够取信于他，他的神智仿佛始终还陷在孤独无尽的黑暗里，在世界尽头的那一颗种子前，身处人群也好，闹市也好，都是孤身一人。
			
			    就像是个失重的人，双脚无论如何也踩不到实地。
			
			    褚桓忽然意识到，只要他活着一天，就无法确定自己是活在真实里，还是活在虚幻里，这样看来，似乎只有一了百了地吹灯拔蜡，才算殊途同归。
			
			    这念头一闪，褚桓微微有些空洞的眼神就仿佛清明了一点，他决定不再这样半死不活地耗下去了。

		
		</p>
		
		<p title="汪曾祺">他乡的咸鸭蛋，我实在瞧不上</p>
		<p title="hello">他乡的咸鸭蛋，我实在瞧不上</p>
		<p title="helhh">他乡的咸鸭蛋，我实在瞧不上</p>
		<p title="奈斯">他乡的咸鸭蛋，我实在瞧不上</p>
		<p title="GOOD">他乡的咸鸭蛋，我实在瞧不上</p>
		
		<input type="text" name="" id="" value="" />
		
		
		
	</body>
</html>

煎饼果儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5常用选择器

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>常用选择器</title> <style> input:focus{ background: aliceblue; } p::selection{...
复制链接

扫一扫