CSS基础：常用的各种选择器

最新推荐文章于 2024-06-12 12:52:53 发布

渣猫略懂

最新推荐文章于 2024-06-12 12:52:53 发布

阅读量69

点赞数

分类专栏：前端基础文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_52854090/article/details/120494485

版权

前端基础专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 通配符选择器:选择所有标签 */
			*{
				font-size: 60px;
			}
			/* 标签选择:选择所有标签 */
			td{
				background-color: aqua;
			}
			/* id选择器:id值在每个页面唯一 */
			#a{
				color: blue;
			}
			/* 类选择器：class值不唯一，可以使用多个相同class */
			.b{
				color: darkorange;
			}
			/* 子代选择器：一个元素下所有该元素，不包含隔代元素 */
			/* 语法：元素1 > 元素2 */
			th>a{
				color: red;
			}
			/* 后代选择器：一个元素下所有该元素，包含隔代元素 */
			/* 语法：元素1 空格 元素2 */
			td a{
				color: fuchsia;
			}
			/* 交集选择器（并列选择器）：同时满足所有条件 */
			/* 语法：标签名.类名   或    标签名#id名*/
			td.d{
				color: brown;
			}
			td#c{
				color: chartreuse;
			}
			/* 并集选择器 */
			#a,#c,.b{
				background-color: darkgreen;
			}
			
		</style>
		
	</head>
	<body>
		<table border="1" width="500" height="500" >
			<tr>
				<th colspan="3">
					<a href="http://www.baidu.com">百度</a>
					<span><a href="http://www.baidu.com">百度</a></span>
				</th>
			</tr>
			<tr>
				<td id="a">111</td>
				<td class="b">222</td>
				<td class="b">333</td>
			</tr>
			<tr>
				<td id="c"><strong>AAA</strong></td>
				<td class="d"><em>BBB</em></td>
				<td><del>CCC</del></td>
			</tr>
			<tr>
				<td colspan="2">
					<a href="http://www.baidu.com">百度</a>
				</td>
				<td >
					<a href="http://www.baidu.com">百度</a>
				</td>
			</tr>
		</table>
	</body>
</html>

渣猫略懂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础：常用的各种选择器

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 通配符选择器:选择所有标签 */ *{ font-size: 60px; } /* 标签选择:选择所有标签 */ td{ background-color: aqua; .
复制链接

扫一扫