CSS学习1

CSS

前言

CSS:层叠样式表

样式规则:选择器 {属性:值;属性:值;}

一、类选择器

类选择器:".名字 {属性:值}"

多类名选择器:html选择器中的class可以放多个值,多个类名没有先后顺序。空格隔开即可。

注意:名字最好用英文字字母表示,可以加-

html 复制代码
<html>
	<head>
		<title>类选择器</title>
		<style>
		.c-red {
			color: red;
			}
		</style>
	</head>
	<body>
		<span class="c-red">G</span>
		<span>G</span>
		<span>G</span>
		<span>G</span>
	</body>
</html>

二、id选择器

id选择器:"#名字 {属性:值}"

与类选择器的区别:类选择器可以重复使用,id选择器类似身份证,只能用一次。

html 复制代码
<html>
	<head>
		<title>id选择器</title>
		<style>
		.c-red {
			color: red
			}
		#c-p {
			color: pink
			}
		</style>
	</head>
	<body>
		<span class="c-red">G</span>
		<span id="c-p">G</span>
		<span>G</span>
		<span>G</span>
	</body>
</html>

三、通配符选择器

通配符选择器:"* {属性:值}"

四、伪类选择器

1. 链接伪类选择器

作用:给链接添加特殊效果

:link 未访问链接

:visited 已访问链接

:hover 鼠标移动到链接上

:active 选定的链接(点击别松开)

注意:写的时候顺序不要颠倒,lovehate

html 复制代码
<html>
	<head>
		<title>链接伪类选择器</title>
		<style>
		a:link { /*未访问的状态*/
			font-size: 16px;
			color: red;
			font-weight: 700;
			}
		a:visited { /*已访问的状态*/
			font-size: 16px;
			color: green;
			font-weight: 700;
			}
		a:hover { /*鼠标移动上去*/
			font-size: 16px;
			color: orange;
			font-weight: 700;
			}
		a:active { /*选定的状态*/
			font-size: 16px;
			color: pink;
			font-weight: 700;
			}
		a {/*标签选择器,设置所有a*/
			font-size: 16px;
			color: gray;
			font-weight: 700;
			}
		</style>
	</head>
	<body>
		<div><a href="#">秒杀</a></div>
	</body>
</html>

2. 结构(位置)伪类选择器

:first-child

:last-child

:nth-child(odd) 从前往后,odd可以选择所有奇数,even(2n)选偶数,n选所有的(从0开始)

:nth-last-child 从后往前

html 复制代码
<html>
	<head>
		<title>位置伪类选择器</title>
		<style>
		li:first-child { /*第一个*/
			color: red;
			}
		li:last-child { /*最后一个*/
			color: red;
			}
		li:nth-child(4) { 
			color: red;
			}
		li:nth-last-child {
			color: deeppink;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>第一个孩子</li>
			<li>第二个孩子</li>
			<li>第三个孩子</li>
			<li>第四个孩子</li>
			<li>第五个孩子</li>
		</ul>
	</body>
</html>

3. 目标伪类选择器

:target 可用于选取当前活动的目标元素

html 复制代码
<html>
	<head>
		<title>document</title>
		<style>
		:target {
			color: red;
			}
		</style>
	</head>
	<body>
		<h2>目录</h2>
		<hr/>
		1.早年经历<br/>
		<a href="#movie">2.演艺经历</a><br/>
		3.个人生活<br/>
		4.主要作品<br/>
		<hr/>
		<h3>早年经历</h3>
		<h3 id="movie">演艺经历</h3>
		<h3>个人生活</h3>
		<h3>主要作品</h3>
	</body>
</html>
相关推荐
张张张3122 分钟前
4.2学习总结 Java:list系列集合
java·学习
SuperW17 分钟前
linux课程学习二——缓存
学习
庸俗今天不摸鱼18 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下25 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox36 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞39 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行39 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_5937581040 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周43 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js