css3样式选择器

水深无声 2021-11-04 23:22 391阅读 0赞

/* 通过标签名直接查找 找到整个html中所有的h1标签 */
    			h1{ 
    				color: #00FFFF;
    			}
    			/* 通过class值查找标签 */
    			.content{ 
    				text-indent: 2em;
    			}
    			.red{ 
    				color: blue;
    			}
    			/* 通过id查找标签 #id值 */
    			#author{ 
    				font-size:13px;
    				color: red;
    				
    			}
    			/* 通过父子选择器进行查找 > 父子关系 */
    			div>p{ 
    				color: #FF0000;
    				
    			}
    			#date>strong{ 
    				font-size: 30px;
    				color: black;
    			}
    			/*后代选择器 父级标签 子孙标签 */
    			div strong{ 
    				font-size: 25px;
    				color:beige;
    				
    			}
    			/* 属性选择器 拥有某个属性的标签 */
    			*[class]{ 
    				color: darkmagenta;
    			}
    			/* 属性选择器 指定属性值 */
    			p[class="content"]{ 
    				color: brown;
    			}
    			input[name="password"]{ 
    				border-color:forestgreen;
    			}

2.css 伪类选择器

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>css伪类选择器</title>
    		<style>
    			#a1{ 
    				text-decoration: none;
    				color:black;
    				
    			}
    			/* 当元素处于某种状态时，能触发的一些样式 */
    			/* 当鼠标经过标签内，触发 */
    			#a1:hover{ 
    				color:#008000;
    				
    			}
    			/* 聚焦 当元素获得焦点时，触发 一个网页中只能有一个元素处于聚焦转态 */
    			#a1:focus{ 
    				color:blue;
    			}
    			/* visited 当a标签被点击之后 已经被访问过*/
    			#a1:visited{ 
    				color:orange;
    				
    			}
    			/* active 鼠标按下去的时候 */
    			#a1:active{ 
    				color: palevioletred;
    			}
    			/* before 添加前缀 */
    			/* 某些特殊符号，可能会污染真实内容，这些特殊符号可以用前缀或后缀的方式添加 */
    			#a1:before{ 
    				content:'?';
    				color: #ADD8E6;
    				font-size: 30px;
    				}
    				
    			#a1:after{ 
    					content:'!';
    					color: #000000;
    					font-size:30px;
    				}
    				
    			p{ 
    				color:#0000FF;
    				font-size: 20px;
    				
    			}
    			/* first-letter 元素中的第一个文字 */
    			p:first-letter{ 
    				color: red;
    				font-size:35px;
    				
    			}
    			/* first-line 第一行 */
    			p:first-line{ 
    				color: #008000;
    			}
    			
    			input:focus{ 
    				border:none;
    				border: 2px red solid;
    				box-shadow: 0 0 10px #008000;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<a id="a1" href="http://www.baidu.com">百度一下</a>
    		
    		<p>将您在浏览器中输入的内容发送给 Google，以便提供更智能的拼写检查功能将您在浏览器中输入的内容发送给 Google，以便提供更智能的拼写检查功能将您在浏览器中输入的内容发送给 Google，以便提供更智能的拼写检查功能将您在浏览器中输入的内容发送给 Google，以便提供更智能的拼写检查功能将您在浏览器中输入的内容发送给 Google，以便提供更智能的拼写检查功能将您在浏览器中输入的内容发送给 Google，以便提供更智能的拼写检查功能将您在浏览器中输入的内容发送给 Google，以便提供更智能的拼写检查功能将您在浏览器中输入的内容发送给 Google，以便提供更智能的拼写检查功能将您在浏览器中输入的内容发送给 Google，以便提供更智能的拼写检查功能将您在浏览器中输入的内容发送给 Google，以便提供更智能的拼写检查功能</p>
    		<input type="password" placeholder="请输入银行卡密码" />
    	</body>
    </html>