3.4css样式表之各选择器

最新推荐文章于 2024-07-09 22:33:51 发布

不戴眼镜的眼镜男

最新推荐文章于 2024-07-09 22:33:51 发布

阅读量337

点赞数

分类专栏：前端文章标签： css样式表之各选择器

本文链接：https://blog.csdn.net/BossHAO/article/details/100994962

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

3.4css样式表之各选择器

描述：CSS常用的选择器
1.标签选择器
格式：标签名称{css样式代码;}
例如：设置行高 tr{heigth:100px}
特点：其一作用范围比较大凡是该网页对应的标签，都会对css样式代码生效
2.id选择器
格式： #id名字{css样式代码;}
特点：2.1 id的名字必须是整个网页的唯一性名字 (不允许有重复的名字)
2.2 表示范围较小，只针对id名字所在的标签，css样式才会生效。
例如：对表格的某一行的某一个列进行设置背景颜色，可以考虑使用id选择器。
3.类选择器
格式: .类名称{css样式代码;}
特点： 3.1 表示范围 <= 标签选择器 >= id选择器
例如：如果对应的标签(例如td),都写一个class属性，而且名字相同，相当于是标签选择器的范围
标签选择器 td{css样式代码;}
在某些情况下，只针对某一些td标签进行css样式更改
4.后代选择器
格式：标签名/id选择器/类选择器子标签的名字{css样式代码;}
特点： 4.1 作用范围，有可选性
5.伪类选择器
格式: 标签/选择器的名字 a标签:事件名字{css样式代码;}
例如: #nav a:hover{color:red; text-decoration:underline}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS常用的选择器</title>
		<style type="text/css">
			/*1.标签选择器*/
			tr{
				height: 100px;
			}
			a{
				color: #999999;
				text-decoration: none;
			}
			/*2.id选择器*/
			#t1{
				background:green;
			}
			/*3.类选择器*/
			.t3{
				text-align: center;
			}
			.t4{
				background: red;
			}
			/*4.后代选择器*/
			ul > span{
				color: green;
			}
			/*5.伪类选择器*/
			a:hover{
				color: red;
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<table border="1px">
			<tr>
				<td class="t2" width="150px">1</td>
				<td class="t2" width="150px">2</td>
				<td class="t2"width="150px">3</td>
			</tr>
			<tr>
				<td  class="t2">4</td>
				<td  class="t2" id="t1">5</td>
				<td  class="t2">6</td>
			</tr>
			<tr>
				<td  class="t3">7</td>
				<td  class="t3">8</td>
				<td  class="t3">9</td>
			</tr>
			<tr>
				<td  class="t2">10</td>
				<td  class="t2">11</td>
				<td  class="t4">12</td>
			</tr>
		</table>
		<hr/>
		<ul>
			<li>
				<span>你现在的努力，是为了将来有更多的选择!</span>
			</li>
			<span>经济基础，决定上层建筑！</span>
		</ul>
		<a href="#">百度一下</a>
	</body>
</html>

不戴眼镜的眼镜男

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
3.4css样式表之各选择器

3.4css样式表之各选择器描述：CSS常用的选择器1.标签选择器格式：标签名称{css样式代码;}例如：设置行高 tr{heigth:100px}特点：其一作用范围比较大凡是该网页对应的标签，都会对css样式代码生效2.id选择器格式： #id名字{css样式代码;}特点：2.1 id的名字必须是整个网页的唯一性名字 (不允许有重复的名字)2.2 ...
复制链接

扫一扫

专栏目录