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>
相关推荐
一天 24h2 分钟前
从单体到分布式:JWT 如何彻底改变 Web 认证系统
前端·分布式
持梦远方3 分钟前
Nginx 静态资源挂载与前端部署实战笔记
linux·前端·笔记·nginx
木斯佳4 分钟前
前端八股文面经大全:腾讯云智前端一面(2026-05-13)·面经深度解析
前端·状态模式
fanzhonghong5 分钟前
javaWeb后端开发之Linux项目部署3和Docker部署1
linux·服务器·前端·docker
拉里呱唧6 分钟前
在线可视化HTML编辑器横评:8款拖拽式工具的实测对比
前端·编辑器·html
lihaozecq9 分钟前
Agent 开发 Todo 机制设计,让 Agent 拥有规划能力
前端·agent·ai编程
lchcy18 分钟前
移动端h5好多兼容性问题啊
前端
KaMeidebaby23 分钟前
卡梅德生物技术快报|多肽库筛选:基于全质粒 PCR 的噬菌体文库构建与小分子表位淘选实战
前端·数据库·其他·百度·新浪微博
m0_5027249526 分钟前
vue3生成pdf
前端·javascript·vue.js·pdf
@不误正业28 分钟前
2026-05-16-多Agent协作框架深度实战-从ReAct到Plan-and-Execute全架构演进
前端·react.js·架构