CSS样式与选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_24432127/article/details/88936496

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			/* 标签选择器 
				设置所有标签的样式
			*/
			p
			{
				border: 1px solid #8A2BE2;
			}
			/*ID选择器
			  设置指定ID 的元素样式
			 */
			
			#div1
			{
				background-color: antiquewhite;
			}
			
			/*Class选择器（类选择器） 
			  设置指定Class的样式
			 */
			.cls
			{
				border: 1px solid #FF0000;
				background-color: teal;
				color: coral;
			}
			.cls1
			{
				font: 50px 宋体;
			}
			
			----------------------------------
			
			/* 选择器的优先级
				Css样式中 优先级 ID > Class > 标签
				在同等优先级下， 最后定义的样式为准
				（行内样式表优先级 > 内部样式表 = 外部样式表）
				但是可以使用!important设置优先级为最高
				
			 */
			div
			{
				background-color: red ;
			}
			
			.cls2
			{
				background-color: blue;
			}
			
			#div2
			{
				background-color: green;
			}
			
			/* 组合选择器 */
			
			h1, h2, h3, h4, h5
			{
				color: coral;
			}
			
			
			/* 
			   标签+类选择器
			   同样的class样式作用与不同的标签中的样式相异
			 */
			p.cls3
			{
				color:green
			}
			
			span.cls3
			{
				color: red;
			}
			
			/*层次选择器 
			  div 下 所有的P元素设置样式
			 */
			div p 
			{
				background-color: gold;
			}
			
		</style>
		
	</head>
	<body>
		<div>
			我是一个层
		</div>
		<div id="div1">
			我是一个层
		</div>
		<p>
			我是一个段
		</p>
		
		<input type="button" name="" id="" value="按钮" class="cls cls1" />
		<input type="text" name="" id="" value="eeeee" />
		<textarea rows="" cols="" class="cls">
			Content
		</textarea>
		<table border="1">
			<tr>
				<td>
					aaa
				</td>
				<td>
					aaa
				</td>
			</tr>
			<tr>
				<td>
					aaa
				</td>
				<td>
					aaa
				</td>
			</tr>
		</table>
		
		
		<div class="cls2" id="div2">
			Hello world
		</div>
		
		<h1>标题一</h1>
		<h2>标题一</h2>
		<h3>标题一</h3>
		<h4>标题一</h4>
		<h5>标题一</h5>
		
		<p class="cls3">
			P标签
		</p>
		<span class="cls3">
			Span标签
		</span>
		
		
		<div>
			<p>
				p标签
			</p>
		</div>
	</body>
</html>

<!-- 
 
 
 
 -->

Html基本Css选择器