了解HTML CSS选择器操作和特性
子选择器
在CSS样式表中, 有时候我们需要为一个选择器进行再次的选择, 比如要为某段落标签下的<span>标签进行样式设定(<span>标签必须为段落标签下的第一代子元素, 意思即中间不包含别的标签嵌套), 这个时候就要使用子选择器.
代码示例:
p>span{
font-size:20px;
}
" > "就称之为子选择器, 它的作用就是将标签选择器下的第一代子元素的<span>标签中的文本样式设置为字号20px, 但是这种显然不是很灵活, 只能选择子一代的标签元素, 如果我需要选择多代子标签, 就需要很麻烦的依次修改.
包含选择器
明白了子选择器, 包含选择器也就好理解了, 它用于选择指定标签元素下的后辈元素, 可以越级指定, 而不是非要直接后代元素.
两种选择器具体使用视情况而定, 并不是包含选择器更加方便就全部使用, 就如同程序开发中使用更多的常量会是程序更加健壮, 选择器也是这样, 选择合适的时机选择不同的选择器.
分组选择符
假如有一个样式, 你想同时给多个标签, 你可以给他们修改相同的类, id, 但是这样非常笨重, 而且ID选择器只可以设置一次, 所以这时候需要使用分组选择符, 通过符号" , "(没有双引号), 可以让多个选择器同时使用相同的样式.
代码示例
p, span{
font-size:20px;
}
伪类选择符
这个如果说用的非常多是这样, 说用的非常少, 也不为过, 主要是浏览器兼容性是个很大的问题, 万恶的IE((╯‵□′)╯︵┻━┻), 所以给大家简单介绍一个比较常用的, 也是你每天打开网页都会遇到的, 也不用担心浏览器兼容性的样式.
a:hover{
color:red;
}
这句话通过上面的学习应该很好理解, 也就是<a>标签, 修改颜色, 而hover的意思就是, 当鼠标滑过的时候, a:hover属于标签的某种状态, 所以称之为伪类选择符.
有个叫通用选择器的东西, 这个我没仔细说, 就是选择器部分什么也不写, 用一个*代替, 它会默认选择所有的标签, 实际作用并不是很大.
css的几个特性
继承
这个继承可不是面向对象中的封装继承多态的继承, 在我理解应该是标签及其子标签的共性, 在面向对象语言中子类会完全继承父类的开放接口和成员变量, 而在HTML中是对父类标签做样式修改后, 一部分规则会传递给子标签(并不是所有的规则都可以的). 比如color等属性. 更加详细的规则, 大家就自行百度啦, 毕竟学习也是一个在探寻的过程, 常见的可以继承的属性比如字号, 颜色等文字类属性, 不可继承的比如加边框等.
权值
这个不需要大家理解, 虽然有较为详细的数值, 但是其实也就是个优先级的问题, 简单来说就是标签选择器 < 类选择器 < ID选择器(权值的大小也是如此), 也就是说ID选择器的优先级最高, 当设置规则是是可以通过选择器覆盖的, 但是这个要在同等类型的css样式表里, 也就是说内联式就和内联式比, 外部式就和外部式比. 继承的权值非常低, 也就不过多介绍了.
重要性
有的时候, 我们需要为一个属性设置为最高权值, 保证在后面也不会被修改, 这个时候在属性后面写上!important即可. 这样的属性就会是最高权值, 也就是最高优先级.
代码示例:
架设标签<p class = "wang">
样式表代码
p{
color:red!important;
}
p.class{
color:green;
}
虽然代码中css样式表中后来修改的颜色为绿色, 而且p.class是类选择器, 权值高于p标签选择器, 但是因为color属性已经被设置为最高权值了, 那么颜色还会是红色, 如果为后面的color:green;也加上!important, 那么颜色会变为绿色, 因为权值是附和相加原则的, 所以实际效果要先看权值, 再看层叠覆盖(也就是最后的css样式表), 如果权值相同才看层叠覆盖.
转载于:https://www.cnblogs.com/JianweiWang/p/5186646.html
了解HTML CSS选择器操作和特性相关推荐
- 运用CSS选择器、CSS文本相关样式及高级特性实现如图所示的宣传页面
运用CSS选择器.CSS文本相关样式及高级特性实现如图所示的宣传页面 首先新建文件夹,给它命名为宣传页面 提前下载好图片,并放至文件夹内 然后开始建立网页结构 使用<div>盒子模型,&l ...
- 玩转CSS选择器(一) 之 使用方法介绍
前言 前几天整理了CSS一些技术关键字,但是因为自己的知识过于单薄,觉得考虑的不充分有欠缺,随后便在sf.gg提出了这个问题<关于CSS核心技术关键字都有哪些?>,也是为了让厉害的人一起参 ...
- css-07--1. HTML5 的新特性2. CSS 3 的新特性
文章目录 1. HTML5 的新特性 1.1 HTML5 新增的语义化标签 1.2 HTML5 新增的多媒体标签 1. 视频 2. 音频 3. 多媒体标签总结 1.3 HTML5 新增的 input ...
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...
- CSS学习笔记(一) CSS基础+CSS3新特性
思维导图 文章目录 思维导图 1. CSS 简介 2. CSS 引入方式 2.1 行内样式表 2.2 内部样式表 2.3 外部样式表 2.4 CSS 引入方式总结 3. CSS 选择器 3.1 CSS ...
- 【css】h5cs3新特性
新特性 1. CSS3有哪些新特性?答:- [ ] > 1. CSS3实现圆角(border-radius),阴影(box-shadow),> 2. 对文字加特效(text-shadow. ...
- 调研CSS选择器在浏览器中的支持情况
网上有很多这样的信息,很多的图表对各个浏览器进行比较,关于特性的支持,其实有些不全面,本文就日常常见的一些css选择器进行一个总结(本文在标准模式下). 1)关于:active,:link,:hove ...
- css选择器顺序的小技巧
在线演示 本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个 ...
- 2 - 前端基础--CSS 选择器
引入css方式(重点掌握) 1.行内样式 <div> <p style="color: green">我是一个段落</p></div> ...
- jQuery css()选择器使用说明
css选择器只是jquery中的一个功能罢了,下面我来给各位朋友详细介绍jQuery css()选择器使用方法与说明详解,有需要了解学习的同学可参考. CSS操作有一个重要的方法:CSS() CSS( ...
最新文章
- 服务器登录中心,为数据中心配置登陆服务器来进行远程访问
- python获取路径下所有图片:
- 开发工具 | git、github使用场景总结
- Web socket广播
- 在AWS中设置Cassandra集群
- 论文浅尝 - ACL2022 | 面向推理阅读理解的神经符号方法
- 全球最大的多晶硅制造商保利协鑫去年营收220亿元 售电业务表现抢眼
- zzuliOJ 1894: 985的方格难题 【dp】
- springboot + mybatis +easyUI整合案例
- 使用商业模式的九大模块去分析京东的商业模式_【荐读】商业模式新生代
- 计算机网络怎样连手机软件,玩够了手机投屏?了解一下手机如何直接连智能电视...
- 公司邮箱怎么申请注册?电子邮箱注册教程来了
- 智力答题源码php,php儿童智力测评系统
- Typora入门教学
- RoboCup GameController安装方法
- 用Python校验下载文件的完整性(md5),游戏之类的大型文件
- Microsoft Office for Mac最新版本安装教程,亲测可用
- 文字格斗游戏2.0(随机数值)
- 号称下一代监控系统,到底有多牛逼!
- 选择某种Map集合保存学号从1到15的学员的学号(键)和姓名(值)