CSS ------- 标签选择器_td使用css选择器-CSDN博客

本文链接：https://blog.csdn.net/qq_42412646/article/details/102617219

css可以进行大范围的格式定义，以防止代码冗余

instance：

<html>
	<head>
		<title>css标签选择器</title>
		<meta charset="UTF-8"/>
		
		<style type="text/css">
			*{
				color: blue;
/*				background: blue;*/
			}
			.classtype{
				background: black;
				color: black;
			}
			hr{
				border: 3px;
				height: 30px;
				width: 300px;
				color: purple;
				background: brown;
			}
			hr,.classtype{
				color: gold;
				/*background: gold;*/
			}
			#p,a{
				color: cyan;
			}
			ul{
				color: yellow;
			}
			#litype{
				color: green;
			}
			input[type=text]{
				background: red;
			}
		</style>
		<!--<style type="text/css">
			hr{
				height: 30px;
				width: 300px;
				color: aqua;
				background: brown;
			}
		</style>-->
	</head>
	<body>
		<table border="1px" cellpadding="7px" cellspacing="0px" class="classtype">
			<tr>
				<td>hard</td>
				<td>very</td>
			</tr>
			<tr>
				<td>heavy</td>
				<td>tired</td>
			</tr>
			<tr>
				<td>not</td>
				<td>but</td>
			</tr>
		</table>
		<p>
			<a href="">test1</a>
		</p>
		<p>
			<a href="">test2</a>
		</p>
		<hr />
		<ul>
			<li><a href="" id="litype">lin1</a></li>
			<li><a href="">lin2</a></li>
			<li><a href="">lin3</a></li>
		</ul>
		<hr />
		<input type="text" name="" id="" value="" /><br />
		<input type="password" name="" id="" value="" />
	</body>
</html>

基本选择器：

标签选择器：标签{样式1，样式2}

作用：会定义当前标签下的样式

id选择器：#标签id属性值{样式1，样式2，用id进行应用}

作用：给某个指定的标签添加指定样式

类选择器：.类选择器名（自己定义，在格式中用class进行引用）

作用：给不同的标签添加相同的样式

全部选择器：*{样式1，样式2}

作用：设置HTML的标签，确定网页的全部格式：

组合选择器：选择器1，选择器2{样式1，样式2}

作用：设置几个不同的选择器中的相同的属性；

子标签选择器：#选择器，子属性（子标签选择器）{样式1，样式2}