CSS学习(二)选择符
- 元素选择符:以元素名作为选择符(span{ color: red; })
- 群组选择符:将两个选择符用逗号隔开构成群组(span, div{ color: red; })
- 通用选择符:通用选择符(*)将匹配所有元素(*{ color: red; })
- 类选择符:根据类名匹配元素(.类名{ color: red; })
- ID选择符:根据ID值匹配元素(#id{ color: red; })
- 属性选择符
- 简单属性选择符:根据是否有这个属性匹配元素(span[class]{ color: red; })
- 精准属性值选择:匹配属性为特定值的元素(精准字符串匹配)必须完全一致(span[class="urgent warning"]{ color: red; })
- 根据部分属性值选择:以bar为例
- 属性以bar和一个英文破折号开头的,或者bar本身(span[class|="bar"]{ color: red; })
- 其值是包含bar的一组词(span[class~="bar"] { color: red; })
- 其值是包含子串bar(span[class*="bar"] { color: red; })
- 其值以bar开头(span[class^="bar"] { color: red; })
- 其值以bar结尾(span[class$="bar"] { color: red; })
- 后代选择符:选择所有符合条件的后代(span div { color: red; })
- 子代连接符:选择符合条件的子代(span > div { color: red; })
- 紧邻同胞连接符:选择同一个父元素中,紧跟在另一个元素后面的元素(span + div { color: red; })
- 一般同胞连接符:选择一个元素后面同属一个父元素的另一个元素(如例子:所有在span后面的div的color都是red) ( span~div { color: red; })
- 伪类选择符(伪类的效果是把某种幽灵类应用到伪类依附的元素上):
- 结构伪类
- 选择根元素(:root):在html中文档的根元素永远都是html标签,但是在xml中,根元素就千奇百怪了
- 选择空元素(:empty):可以使用empty伪类可以选择没有任何子代的元素,甚至连文本结点都没有(包括文本和空白)注释不算
- 选择唯一子代(:only-child):匹配另一个元素的唯一子元素
- 选择唯一某种子元素(:only-of-type):匹配同胞中唯一的那种元素
- 选择第一个子代(:first-child):匹配一个元素的第一个子代
- 选择最后一个子代(:last-child):匹配一个元素的最后一个子代
- 选择第一个某种子元素(:first-of-type):匹配一个元素的第一个某种子元素
- 选择最后一个某种子元素(:last-of-type):匹配一个元素的最后一个某种子元素
- 选择第n个子代(:nth-child(an+b)):匹配第an+b个子代,a、b是常数,n为1、2、3......
- 选择倒数第n个子代(:nth-last-child(an+b))匹配倒数第an+b个子代,a、b、n同上
- 选择第n个某种子元素(:nth-of-type(an+b))匹配第an+b个某种子元素,a、b、n同上
- 选择倒数第n个某种子元素(:nth-last-of-type(an+b))匹配倒数第an+b个某种子元素,a、b、n同上
- 动态伪类
- 超链接伪类
- :link 匹配具有herf属性的锚点
- :visited 匹配已访问的锚点(鉴于隐私保护,伪类中只有color属性才能生效,其它的都无效)
- 用户操作伪类
- :focus 当前获得输入焦点的元素
- :hover 鼠标指针放置其上的元素
- :active 由用户输入激活的元素
- UI状态伪类
- :enabled 接受输入的元素
- :disabled 不接受输入的元素
- :checked 由用户或文档默认选中的单选框或多选框
- :indeterminate 既未选中也没有未选中的单选按钮或多选按钮
- :default 默认选中的单选按钮、复选框或选项
- :valid 满足有效性语义的输入框
- :invalid 不满足有效性语义的输入框
- :in-range 输入的值在最大值和最小值之间的输入框
- :out-of-range 输入的值不在最小值到最大值之间的输入框
- :required 指代必须输入值的输入框
- :optional 指代无须一定输入值的输入框
- :read-write 可由用户编辑的输入框
- :read-only 不能由用户编辑的输入框
- 超链接伪类
- :target伪类:给锚点(该锚点有id且网页中有url(片段标识符)指向此id)设置样式
- :lang伪类:根据文本使用的语言选择元素
- 结构伪类
CSS学习(二)选择符的更多相关文章
- CSS那些事儿-阅读随笔1(CSS简介与选择符)
最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style ...
- CSS知识点:选择符
一.选择符的种类 1)通配选择符 它用来给页面所有的元素设置样式 *{margin:0;padding:0;}.但是实际当中不建议这么用,页面中用到了哪些样式,就统一设置样式,因为*影响性能.也可以给 ...
- css伪类选择符
1):link/:visited/:hover/:active (爱恨原则 love/hate)2):first-child/:last-child/:only-child/:nth-child(n) ...
- 学习CSS记录:选择符优先级
1.标有!important 关键字声明属性. 2.HTML中的CSS样式属性. 3.作者编辑的CSS文件模式属性. 4.用户设置的样式. 5.浏览器默认的样式. ------------------ ...
- CSS伪对象选择符整理
1.E::selection 2.E::placeholder 1. E::selection 设置对象被选择时的样式. 需要注意的是,::selection只能定义被选择时的background-c ...
- HTML/CSS学习(二)
续...... ============================================================================================ ...
- CSS学习(二)
display : block inline-block inline block此元素将显示为块级元素,此元素前后会带有换行符. inline默认.此元素会被显示为内联元素,元素前后 ...
- html&css学习二
表格&b标签 表格 表格标签主要包含三个标签 <table> <tr> <td>单元格内的文字</td> ... </tr> ... ...
- CSS各属性选择符区别
CSS2.1: ele[attribute] 匹配具有属性attribute的ele元素. ele[attribute = value] 匹配具有属性attribute且值为value的元素. ele ...
- JQuery学习笔记【CSS选择符】--02
Jquery的程序入口: <html> <head> <title></title> <script type="text/javasc ...
随机推荐
- Mysql将其他表中的数据更新到指定表中
update tb set tb.字段= (select 字段 from tb1 where tb.字段1 = tb1.字段1); update role set uid = (select ID ...
- linux 服务器资源 监控工具
工具一:vmstat(服务端) 一.vmstat选项参数解释 -V:显示vmstat版本信息 -n:只在开始时显示一次各字段名称 -a:显示活跃和非活跃内存 -d:显示各个磁盘相关统计信息 -D:显示 ...
- php 扫描url死链接
* 从Packagist上搜索需要的包 https://packagist.org/ * 通过composer下载依赖包 composer require guzzlehttp/guzzle comp ...
- CF605E-Intergalaxy Trips【期望dp】
正题 题目链接:https://www.luogu.com.cn/problem/CF605E 题目大意 给出\(n\)个点的一张完全有向图,每一天\(i\)到\(j\)的路径有\(p_{i,j}\) ...
- Python3入门系列之-----环境搭建
前 言 最近一直在学习Python,想用笔记的方式记录自己踩过的那些坑.俗话说:好记性不如烂笔头. 分享给想学Python的小伙伴.目前本人在学习Python+selenium.接口自动化,有兴趣的 ...
- Dubbo管理平台搭建(duboo-admin-2.5.4)遇到的问题:org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'uriBrokerService': Cannot create inner bean '(inner bean)' of type
1.将dubbo的war包方式tomcat的webapps文件夹下,启动tomcat报错 错误信息如下: ERROR context.ContextLoader - Context initializ ...
- docker 安装 wordpress,通过nginx反向代理,绑定域名,配置https
假设docker已经安装好了,如果没有安装,可以照着 5分钟安装docker教程. 一. 下载镜像 默认下载最新版本,如果想指定对应版本,可以用冒号后加版本,像这样mysql:5.7: docker ...
- pdb的插拔测试
pdb的插拔测试:将pdb从一个cdb中,插拔到另一个cdb中. 源端pdb unplug SQL> select instance_name from v$instance; INSTANCE ...
- linux 测试2
.阅读目录●第一种:cat /dev/null > filename●第二种:: > filename●第三种:> filename●第四种:echo "" &g ...
- UOJ 2021 NOI Day2 部分题解
获奖名单 题目传送门 Solution 不难看出,若我们单个 \(x\) 连 \((0,x),(x,0)\),两个连 \((x,y),(y,x)\) ,除去中间过对称轴的一个两个组,就是找很多个欧拉回 ...