CSS属性选择器和部分伪类
p[name]{background:red;} 只使用属性名
p[name=ghr]{background:red;} 指定属性名,并指定了该属性的属性值
p[name~=old]{background:red;}此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词
p[name^=g]{background:pink;}属性值是以g开头的
p[name$=M]{background:#CC0;}属性值是以M结尾的
p[name*=d]{background:#C3C;}属值中包含了value
p[name|=b]{background:#C3C;}属性值是value或者以“value-”开头的值(比如说zh-cn)
含type的是类型型,值限制类型
不含type是结构型,限制位置和类型(自己总结的,有问题欢迎指出)
p:nth-child(2) 找p标签父级下的第二个子元素且是p标签
p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
p:nth-child(2n){background:red}
E:nth-last-child(n) 表示E父元素中的第n个字节点,且类型为E从后向前计算 结构型
p:nth-of-type(2) 找p父级下的第二个p元素 类型型
E:nth-of-type(n) 表示E父元素中的第n个E类型字节点
E:nth-last-of-type(n)表示E父元素中的第n个类型为E的子节点,从后向前计算
E:empty 表示E元素中没有子节点。注意:子节点包含文本节点
p:first-child 表示p父元素中的第一个子节点且是p
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个节点类型是E的
E:last-of-type 表示E父元素中的最后一个节点类型是E的
E:only-child表示E元素中只有一个子节点。注意:子节点不包含文本节点
E:only-of-type 表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:子节点不包含文本节点
选择器伪类:
E:target 表示当前的URL片段的元素类型,这个元素必须是E
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时
E::before 生成内容在E元素前
CSS属性选择器和部分伪类的更多相关文章
- CSS3新增(选择器{属性选择器,结构伪类选择器,伪元素选择器})
1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ] 选择具有 att 属性的 E 元素 例如:input [ value ...
- CSS 属性选择器的深入挖掘
CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...
- HTML&CSS基础-子元素的伪类选择器
HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...
- js进阶 10-10 可见伪类选择器和内容伪类选择器的作用
js进阶 10-10 可见伪类选择器和内容伪类选择器的作用 一.总结 一句话总结:分组来描述.内容伪类选择器就是 四个 包含.可见的伪类选择器就是可见和不可见.查找功能,也就是内容伪类选择器非常 ...
- 使用这些 CSS 属性选择器来提高前端开发效率
属性选择器非常神奇.它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题.但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用.在本文中,我们将讨论它们是如何运行的,并 ...
- CSS的选择器分为两大类
CSS的选择器分为两大类:基本选择题和扩展选择器. 基本选择器: 标签选择器:针对一类标签 ID选择器:针对某一个特定的标签使用 类选择器:针对你想要的所有标签使用 通用选择器(通配符):针对所有的标 ...
- IE7浏览器下CSS属性选择器二三事
一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...
- CSS:CSS 属性 选择器
ylbtech-CSS:CSS 属性 选择器 1.返回顶部 1. CSS 属性 选择器 具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id. 注意:IE7和IE8需 ...
- CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别
CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别 总结: "value 是完整单词" 类型的比较符号: ~=, |= "拼接字符串" 类型的比较 ...
随机推荐
- db2 merge update
DB2 Merge 语句的作用非常强大,它可以将一个表中的数据合并到另一个表中,在合并的同时可以进行插入.删除.更新等操作.我们还是先来看个简单的例子吧,假设你定义了一个雇员表(employe),一个 ...
- elastic-job详解(一):数据分片
数据分片的目的在于把一个任务分散到不同的机器上运行,既可以解决单机计算能力上限的问题,也能降低部分任务失败对整体系统的影响.elastic-job并不直接提供数据处理的功能,框架只会将分片项分配至各个 ...
- all to do list
要做的任务: 1. docker 学习 2. python docker应用 3. python 异步爬虫 4. python 词云 5. Java根据代码自动生成接口文档(Swagger) > ...
- pygame-KidsCanCode系列jumpy-part1-如何组织复杂游戏的代码
武侠小说中,高手过招讲究起手式,所谓"行家一伸手,便知有没有".程序开发.软件架构中,也是类似的道理,当业务逻辑越来越复杂,代码越来越多时,一个好的项目结构,从目录命名.模块分层这 ...
- .NET开源Protobuf-net组件葵花手册
一.前言 我们都知道 protobuf是由Google开发的一款与平台无关,语言无关,可扩展的序列化结构数据格式,可用做数据存储格式, 通信协议 ! 在前面<.NET开源Protobuf-net ...
- Kworkerd恶意挖矿分析
转自:https://www.360zhijia.com/anquan/417114.html 0x01 快速特征排查 TOP显示CPU占用高,但是没有高占用的进程 存在与未知服务器13531端口建立 ...
- PHP性能分析——xhprof(window 安装xhporf)
1 下载xhprof的php扩展 因为官方的xhprof不支持php7,所以采用tideways版本的xhprof 下载地址:windows版tideways_xhprof 将windows版的dll ...
- Windows两个网卡配置路由规则 同时访问内网和外网
电脑上有两个网卡,一个有线一个无线,有线连局域网,无线连外网,虽然两个网都连着,但还是会出现访问不通的情况. 这就要求我们自己来配置路由规则,让内网的访问走内网的网卡,外网的访问走外网的网卡. 一.查 ...
- Eclipse和MyEclipse使用技巧--解决MyEclipse中的js报错的小方法
今天,下了个模版,但是导进去的时候发现js会报错.看了下其他都没有错误.而有一个js报错误,请原谅我有点红色强迫症,不能留一点红色 . 错误如下:Syntax error on token " ...
- Android Studio打包过程和应用安装过程
三个部分,检查项目和读取基本配置,Gradle Build,Apk Install和LaunchActivity. 应用安装到手机,会复制APK安装包到data/app目录下,解压并扫描安装包,把de ...