CSS个性化表格，选择器的问题

最新推荐文章于 2024-03-21 19:37:10 发布

原创最新推荐文章于 2024-03-21 19:37:10 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

Web前端开发专栏收录该内容

8 篇文章

订阅专栏

本文介绍了CSS中选择器的使用，包括类选择器、id选择器和id+类选择器。强调了id选择器的优先级高于类选择器，并通过一个实例展示了如何用CSS定制表格的样式，提供了HTML和CSS的完整代码示例。

1.知识点

2.实例

1.知识点

CSS选择器，类选择器，id选择器，id+类选择器。

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

优先级，id>类

2.实例

实现效果

完整代码

HTML代码

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
		<link href="css/00-test.css" type="text/css" rel="stylesheet" />
	<!-- 	<style>
			caption{caption-side:bottom;}

		</style> -->
	</head>

	<body>
		<table id="customers">
			<caption>Table 1.1 Customers</caption>
			<tr>
				<th>Company</th>
				<th>Contact</th>
				<th>Country</th>
			</tr>
			<tr>
				<td>Alfreds Futterkiste</td>
				<td>Maria Anders</td>
				<td>Germany</td>
			</tr>
			<tr class="alt">
				<td>Berglunds snabbköp</td>
				<td>Christina Berglund</td>
				<td>Sweden</td>
			</tr>
			</tr>
		</table>
	</body>
</html>

CSS代码

@charset "utf-8";
/* CSS Document */
#customers caption {caption-side:bottom;}

#customers
{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	width:100%;
	border-collapse:collapse;
}
#customers td, #customers th 
{
	font-size:1em;
	border:1px solid #98bf21;
	padding:3px 7px 2px 7px;
}
#customers th 
{
	font-size:1.1em;
	text-align:left;
	padding-top:5px;
	padding-bottom:4px;
	background-color:#A7C942;
	color:#ffffff;
}
#customers tr.alt td 
{
	color:#000000;
	background-color:#EAF2D3;
}