当前位置: 首页 > article >正文

CSS的多种选择器

全局选择器

可以与任何元素匹配,优先级最低,一般做样式初始话,用通配符*来表示。

*{
    font-size: 20px;
}

元素选择器

HTML文档中的元素有许多个,元素选择器选择的是页面上所有这种类型的标签,所以经常用来描述共性,无法描述某一个元素的个性。

注意:所有标签都可以时元素选择器。

p{
    font-size: 20px;
}

h1{
    font-size: 40px;
}

类选择器

规定用圆点.来定义,针对你项要更改样式的标签使用,需要在标签上添加class属性。

<h3  class="one-h3">标题</h3>
.one-h3{
    font-size: 50px;
}

 注意:类选择器可以被多种标签使用,类名不能以数字开头,同一个标签可以使用多个选择器,需要用空格隔开。

ID选择器

针对某个特定的标签来使用,只能使用一次,CSS中ID选择器用#加id名来表示。

 <h3 id="one-h3">标题</h3>
#one-h3{
    font-size: 50px;
}

注意:id是唯一的,id不能以数字开头

合并选择器

合并选择器的作用是提取共同的样式,减少代码重复。

 <h3 class="one-h3">标题</h3>
   <h2 class="tow-h2">标题2</h2>

 

.one-h3,.tow-h2{
    font-size: 40px;
}

选择器的优先级 

行内样式>ID选择器>类选择器>元素选择器

 


http://www.kler.cn/news/317768.html

相关文章:

  • 牛客小白月赛101
  • 如何检测电脑有无恶意软件并处理掉?
  • SQL_HAVING小例子
  • [Spring]Spring MVC 请求和响应及用到的注解
  • 文本驱动的3D人体动作生成
  • Postman导出报告
  • Linux复习--网络基础(OSI七层、TCP三次握手与四次挥手、子网掩码计算)
  • Docker学习笔记(四)单主机网络
  • 【Elasticsearch】-实现向量相似检索
  • Spring MVC 基本配置步骤 总结
  • Kafka 3.0.0集群部署教程
  • 【Proteus单片机仿真】基于51单片机的循迹小车避障+气体传感器和温度传感器系统
  • conda环境下module ‘numba.types‘ has no attribute ‘Macro‘问题解决
  • 【Qt】控件样式案例
  • 后端开发刷题 | 最小的K个数(优先队列)
  • Github上开源了一款AI虚拟试衣,看看效果
  • 20240924软考架构-------软考191-195答案解析
  • iOS 18 正式上線,但 Apple Intelligence 還要再等一下
  • 完结马哥教育SRE课程--服务篇
  • 02【Matlab系统辨识】白噪声
  • 【论文阅读】Act3D: 3D Feature Field Transformers for Multi-Task Robotic Manipulation
  • CSS 复合选择器简单学习
  • 128页4W字精品文档 | 某智慧能源集团数字化管理平台项目建议书
  • python:django项目知识点02——搭建简易授权码核销系统
  • Llama 3.1 技术研究报告-3
  • Superset 使用指南之优化数据可视化性能与扩展
  • SpringBoot整合InfluxDB(实战)
  • 视频美颜SDK核心功能解析:打造高效直播美颜工具方案详解
  • 力扣6 N字形变换
  • Python 方法传参详解