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>
相关推荐
LJC_Superman24 分钟前
Web与Nginx网站服务
运维·服务器·前端·网络·数据库·nginx·vim
星秋Eliot33 分钟前
Flutter的三棵树
前端·flutter
正义的大古34 分钟前
OpenLayers常用控件 -- 章节六:全屏控件教程
前端·javascript·html·openlayers
lypzcgf1 小时前
Coze源码分析-资源库-删除插件-前端源码-核心组件实现
前端·typescript·前端框架·react·coze·coze插件·智能体平台
m0_571372821 小时前
嵌入式学习——ARM 体系架构1
arm开发·学习
Rhys..2 小时前
python + Flask模块学习 2 接收用户请求并返回json数据
python·学习·flask
草梅友仁2 小时前
草梅 Auth 1.6.0 发布密码强度组件 Twilio 短信支持 | 2025 年第 36 周草梅周报
前端·开源·github
正义的大古3 小时前
OpenLayers常用控件 -- 章节七:测量工具控件教程
前端·javascript·vue.js·openlayers
2501_926227943 小时前
.Net程序员就业现状以及学习路线图(四)
学习·.net
Hashan3 小时前
深入理解:Webpack编译原理
前端·webpack