一.属性选择器

  • [att] 匹配所有具有att属性的
  • [att=val] 匹配所有att属性等于“val”的
  • [att~=val] 匹配所有att属性包含“val”或者等于“val”的(val必须是一个完整词)
  • [att|=val] 匹配所有att属性仅仅只等于以val-’ 开头的或等于“val”(比如说zh-cn)
  • [att*=val] 匹配所有att属性 包含’val’的字母 (val可以是字母) 类似模糊查询
  • [att^=val] 匹配所有att属性 ‘val’开头的 (val可以是字母)
  • [att$=val] 匹配所有att属性 ‘val’结束的 (val可以是字母)

二.结构性伪类

    • E:nth-child(n) 表示E父级的所有子元素集合中的,第n个子节点(从前往后数 兄弟同类型标签 不可跨越其他类型标签  按所有标签索引顺序去选择)
    • E:nth-last-child(n) 表示E父级的所有子元素集合中的,第n个子节点,从后向前计算 (从后往前数)
      (需E选择器能选中此元素)
    • E:nth-of-type(n) 表示E元素父级的子元素是E集合,第n个字节点,(兄弟同类型标签 可跨越其他类型标签 按同类型标签索引顺序去选择)
    • E:nth-last-of-type(n) 表示E父级的第n个字节点,从后向前计算 
      (需E选择器能选中此元素,且区分标签类型)
    • E:nth-child(odd) 匹配奇数行 同p:nth-child(2n-1)
    • E:nth-child(even) 匹配偶数行 同p:nth-child(2n)
    • E:empty 表示E元素中没有子节点(不能有空格,回车)。注意:子节点包含文本节点

三.伪类

  • E:target 当a标签获取焦点href=”所对应的 E元素锚点的对象(超链接跳转对象)
  • E:disabled 表示不可点击的表单控件disabled(禁止选中)
  • E:enabled 表示可点击的表单控件
  • E:checked 表示已选中的checkbox或radio (鼠标点击时)
  • E:first-line 表示E元素中的第一行
  • E:first-letter 表示E元素中的第一个字符(首字)
  • E::selection 表示E元素在用户选中文字时
  • E:not(selector) 选择非 selector 选择器的每个元素。
  • E~F 表示E元素后的所有兄弟F元素(~不需要紧挨着  +需要紧挨着 毗邻)

  其他属性 input::placeholder  改变文本框中提示字体样式

  兼容写法input::-webkit-input-placeholder

HTML5--(2)属性选择器+结构性伪类+伪类的更多相关文章

  1. CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)

    使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...

  2. CSS笔记——属性选择器

    1.存在和值(Presence and value)属性选择器这些属性选择器尝试匹配精确的属性值:[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何.[attr=val ...

  3. CSS 选择器之基本选择器 属性选择器 伪类选择器

    CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.classNa ...

  4. 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  5. CSS3每日一练之选择器-结构性伪类选择器

    <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...

  6. css 为元素选择器,css目标状态伪类,结构化选择器,多媒体选择器,清除表默认样式、属性选择器

    伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点 特点 1.默认是 inline 元素 2.必须包含 conten ...

  7. python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  8. Selectivizr-让IE6~8支持CSS3伪类和属性选择器

    一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...

  9. 第91天:CSS3 属性选择器、伪类选择器和伪元素选择器

    一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可:    div[class] 2.E[attr=val] 表示属性值完全等于val:   ...

随机推荐

  1. sharepoint site performance

    分析了您之前提供的在CPU使用率高的时候抓取的w3wp进程的dump,以下是一些发现: 在抓取dump文件的这个时刻,.Net的垃圾回收正在运行,在内存资源紧张时,.Net会自动启动内存垃圾回收机制, ...

  2. c语言第六次作业---结构体&文件

    1.本章学习总结 1.1思维导图 1.2学习体会 这次应该是本学期最后一次博客了,总结一下这个学期的学习,一开始就基础薄弱还一直畏难一直懒惰,不想去解决问题导致后面问题越来越多就觉得学习越来越难,后面 ...

  3. “全栈2019”Java第九十二章:外部类与内部类成员覆盖详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  4. 【bzoj4998】星球联盟(并查集+边双)

    题面 传送门 题解 总算有自己的\(bzoj\)账号啦! 话说这题好像\(Scape\)去年暑假就讲过--然而我到现在才会-- \(LCT\)什么的跑得太慢了而且我也不会,所以这里是一个并查集的做法 ...

  5. spring-mybatis源码追踪

    启用一个扫描类 <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <propert ...

  6. [RHEL] RHEL7.0 下 Postfix + Dovecot 实现邮件发送

    RHEL7.0 下 Postfix + Dovecot 实现邮件发送 一.前言 大家都对邮件服务(mail service)很感兴趣嘛.我在自己 博客站 预言了自己会实战一次,访问量一天到十几(毕竟平 ...

  7. RN 47 中的 JS 线程及 RunLoop

    RCBridge 初始化时声明了一个 CADisplayLink _jsDisplayLink = [CADisplayLink displayLinkWithTarget:self selector ...

  8. the type initializer for 'system.drawingcore.gdiplus' threw an exception

    Centos 7 yum install libgdiplus-devel reboot之后生效 apt install libgdiplus cp /usr/lib/libgdiplus.so ~/ ...

  9. docker微服务部署之:四、安装docker、docker中安装mysql和jdk1.8、手动构建镜像、部署项目

    docker微服务部署之:三,搭建Zuul微服务项目 1.Centos7安装Docker 详见:Centos7安装Docker 2.Docker中安装jdk1.8 详见:使用Docker构建jdk1. ...

  10. 后序线索化二叉树(Java版)

    前面介绍了前序线索化二叉树.中序线索化二叉树,本文将介绍后序线索化二叉树.之所以用单独的一篇文章来分析后序线索化二叉树,是因为后序线索化二叉树比前序.中序要复杂一些:另外在复习线索化二叉树的过程中,大 ...