CSS 之 选择器
时间:2022-04-22
本文章向大家介绍CSS 之 选择器,主要内容包括选择器、高级选择器、样式层叠、样式特殊性、样式的继承、样式的引用、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
选择器
类型选择器
也叫做 元素选择器
和简单选择器
,可以根据元素标签指定样式。
p {
color:red;
}
类选择器
一般用于某些同类型的样式。
.xxxClass{
}
<div class="xxxClass"></div>
ID选择器
为特殊的元素,指定类型
#xxxId{
}
<div id="xxxId"></div>
后代选择器
在某个选择器后,选择指定规则的后代,为其指定样式
div p {
}
伪类选择器
为某些特殊的元素,在某些条件时,指定样式。 比如,链接的link和visited ; 以及其他元素的hover,focus,active等。
a:link, a:visited {}
a:hover, a:focus, a:active {}
通用选择器
类似通配符的作用,比如所有可用元素添加样式。
*{}
高级选择器
子选择器
后代选择器是选择所有的后代,子选择器则可以选择元素的直接后代,即子元素。
#nav>li{}
相邻选择器
#nav + p {}
属性选择器
比如为tooltip添加样式
acronym[title]{}
样式层叠
由于选择同一个元素可以通过不同的方法,比如元素的后代、或者类、或者ID,那么就可能造成样式的重叠。因此可以使用!important
,增加样式的优先级。
样式特殊性
再说到样式的重叠的另一种情况,如果不同的方式都指定了样式,到底会优先使用哪一种呢? 这就需要了解特殊性了,从上到下 依次为:
style=""
#xxx{}
.class{}
body div{}
div{}
即,元素上的style会优先、其次是使用ID选择器、然后是类选择器、后代选择器、最后是类型选择器
样式的继承
样式是可以继承的,比如给body增加样式,那么页面中body内的所有元素都会应用这个样式。
样式的引用
样式的引用由两种方式,一种是通过链接link,另一种则是style的导入的方式:
<!-- <link rel="stylesheet" type="text/css" href="test.css"> -->
<style type="text/css">
/*slow*/
@import url("test.css");
</style>
相比较来说,link的方式要更快一些。
另外,还是推荐把CSS都放在同一个文件中。因为浏览器加载样式文件,是受浏览器的限制的,有的浏览器只支持同时下载3个文件、有的支持8个... 如果由三个文件,而浏览器只能同时下载2个文件,那么第三个就必须要等到前两个下载完后,才能加载。 因此,放在一个文件中会更快的加载。
如果把所有的CSS都放在一个文件,又可能导致文件过于庞大,不易维护。因此有以下几个建议:
- 完善注释信息
- 对样式进行分组,并写入相应的注释,可以加快定位
- 发布时,可以考虑对文件进行压缩,比如删除注释、删除空白、压缩。目前很多的浏览器都支持从压缩包中下载文件,这样可以有效的减少文件体积。
暂时也就整理这么多吧!后续再补充....
- The each() function is deprecated报错的解决方法
- 书接上文:薛定谔的猫是如何诞生的?
- docker源码分析(3)---镜像(1)
- k8s源码分析-----kubelet(8)pod管理
- 大会 | DiracNets:无需跳层连接的ResNet
- golang时间戳格式化与解析
- golang-net/http源码分析之http server
- 白话面向智能体编程(Agent Oriented Programmig, AOP)之四
- 用fpm来做rpm打包
- Nginx配置文件nginx.conf详解
- 这是一位师兄的算法学习之路
- Windows下JavaWeb环境的安装笔记
- 深度解析:持续交付将如何拯救IT运维?
- 1分钟彻底理解C语言指针的概念
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Java&Android获取当前日期、时间、星期几、获取指定格式的日期时间、时间戳工具类包含使用示例
- Android TV 开发之 TV视频播放器
- Android MediaPlayer 音乐播放器扫描 本地音乐、上一曲、下一曲切歌、播放本地音乐
- 1小时真正掌握正则表达式
- Android Studio 安装配置教程 - Windows(详细版)
- Android 天气APP(八)城市切换 之 自定义弹窗与使用
- Android 接入udesk SDK实现IM
- Android 天气APP(十二)空气质量、UI优化调整
- Python+selenium 自动化-调用dom节点的click()监听事件,强力操作节点!穿透元素进行点击,节点被遮挡不可点击解决方法
- pkl是什么类型的文件?怎么来打开它?
- Python 技术篇-如何查看文本用什么类型的编码,文本编码查看方法
- Elasticsearch:设置 Elastic 账户安全
- Git存管代码,实例演示
- Git 技术篇-GitHub绑定本地Git,实例演示。实现代码云寄存
- Android 天气APP(十三)仿微信弹窗(右上角加号点击弹窗效果)、自定义背景图片、UI优化调整