css的选择器

标签选择器

格式如下:标签名{属性:属性值;}都是英文格式下的符号。

复制代码
<style type="text/css">
	div {font-size: 50px;}
</style>

类选择器

格式如下:.类名{属性:属性值;}都是英文格式下的符号。

复制代码
<style type="text/css">
	.class_name {font-size: 50px;}
</style>

id选择器

格式如下:#id名{属性:属性值;}都是英文格式下的符号。id属性必须是唯一的,建议使用英文命名,字符下划线数字组成(但不能数字开头)

复制代码
<style type="text/css">
	#id_name {font-size: 50px;}
</style>

伪类选择器

格式如下:元素状态:{属性:属性值;} 根据元素的状态、位置或结构特征来应用样式,:hover(鼠标悬停)、:active(元素被激活)、:focus(元素获得焦点)和 :visited(已访问的链接)

例如p标签在鼠标移入时显示的样式:

复制代码
<style type="text/css">
	p:hover{color: royalblue;}
</style>

共同选择器

格式如下:,:{属性:属性值;} 多个类或者多个标签等使用同一个样式,使用逗号隔开

复制代码
<style type="text/css">
	p,div{color: royalblue;}
</style>

后代选择器

格式如下:选择器名 选择器名 :{属性:属性值;} 多个选择器使用空格隔开,他的后代元素使用这个选择器

复制代码
<style type="text/css">
	p div{color: royalblue;}
</style>
相关推荐
happymaker06261 天前
web前端学习日记——DAY02(CSS样式表的使用)
前端·css·学习
数据服务生1 天前
五子棋-html版本
前端·html
IT_陈寒1 天前
SpringBoot项目启动速度提升300%?这5个隐藏配置太关键了!
前端·人工智能·后端
小碗细面1 天前
5 分钟上手 Claude 自定义 Subagents
前端·人工智能·ai编程
漫随流水1 天前
HTML和CSS和JavaScript的区别
javascript·css·html
小J听不清1 天前
CSS 浮动(float)全解析:布局 / 文字环绕 / 清除浮动
前端·javascript·css·html·css3
wuhen_n1 天前
生产环境极致优化:拆包、图片压缩、Gzip/Brotli 完全指南
前端·javascript·vue.js
用户69371750013841 天前
315曝光AI搜索问题:GEO技术靠内容投喂操控答案,新型营销操作全揭秘
android·前端·人工智能
周星星日记1 天前
pnpm为什么成为"最先进的管理包工具"
前端
多厘1 天前
使用 opencode 和灵感写一个 mac App (实操版)
前端·github