Web前端基础CSS初识学习笔记（7) 善用选择器之超详细大合集

站起一棵树

于 2020-07-10 11:41:18 发布

阅读量265

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/Fightingdddd/article/details/107247093

版权

选择器：使界面更整洁

标签选择器
类选择器
多类名选择器
ID选择器
- ID选择器和类选择器的区别
通配符选择器
链接伪类选择器
结构伪类选择器（CSS3）
目标伪类选择器
CSS复合选择器

标签选择器

在这里插入图片描述

类选择器

在这里插入图片描述

示例（sublime环境）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.orange{
              /*声明类样式*/
			color: orange;
		}
		.bule{
   
			color: blue;
		}
	</style>
</head>
<body>
	<div class="orange ">鸣人</div>
	<div class="bule ">佐助</div>
	<div>卡卡西</div>
</body>
</html>

多类名选择器

在这里插入图片描述
多类名选择器示例（sublime环境）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.font20{
   
			font-size: 20px;
		}
		.font14 {
   
			font-size: 14px;
		}
		.pink {
   
			color: pink;
		}
	&l

最低0.47元/天解锁文章

站起一棵树

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Web前端基础CSS初识学习笔记（7) 善用选择器之超详细大合集

选择器：使界面更整洁标签选择器类选择器多类名选择器ID选择器ID选择器和类选择器的区别通配符选择器链接伪类选择器结构伪类选择器（CSS3）目标伪类选择器标签选择器类选择器示例（sublime环境）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .orange{
复制链接

扫一扫

专栏目录