一.属性选择器

  • [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. 初识阿里开源诊断工具Arthas

    上个月,阿里开源了一个名为Arthas的监控工具.恰逢近期自己在写多线程处理业务,由此想到了一个问题. 如果在本机开发调试,IDE可以看到当前的活动线程,例如IntelliJ IDEA,线程是运行还是 ...

  2. 微信小店调用api代码示例

    刚开始调用微信小店api的时候,可能大家会遇到问题.系统总是提示system error,归根结底还是发送的参数不正确. 下面给出几个调用例子: 例子写得不全. <?php function c ...

  3. 【Oracle 12c】CUUG OCP认证071考试原题解析(29)

    29.choose the best answer Evaluate the following query: SQL> SELECT promo_name || q'{'s start dat ...

  4. “全栈2019”Java异常第二十章:自定义异常详解

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

  5. CTF中常见的 PHP 弱类型漏洞总结

    作者:ZERO    所属团队:Arctic Shell 参考资料: http://archimesan.me/2017/12/21/php%E5%BC%B1%E7%B1%BB%E5%9E%8B%E6 ...

  6. 【经典漏洞案例】NSA黑客工具包——Windows 0day验证实验

    还记得今年4月中旬,Shadow Brokers(影子经纪人)黑客组织发布出一份震惊世界的机密文档,其中包含了多个Windows 远程漏洞利用工具,此工具集覆盖大量的Windows服务 器,可以被任何 ...

  7. C++基础知识-派生类、调用顺序、访问等级、函数遮蔽

    一.派生类的概念 类之间有一种层次关系,有父亲类,有孩子类. 车这个类,当成父类(也叫基类.超类),派生出卡车.轿车,他们属于孩子类(子类.派生类) 继承:有父亲类,有孩子类,构成了层次关系.继承这种 ...

  8. 实现函数 ToLowerCase()

    /** * 实现函数 ToLowerCase(),该函数接收一个字符串参数 str, 并将该字符串中的大写字母转换成小写字母,之后返回新的字符串. * 输入: "Hello" * ...

  9. day2: python3.5学习——逻辑判断

    1. 简单的用户名和密码输入 username = "Helen"password = "123abc" _username = input("use ...

  10. UITableView 头部效果/放大/移动跟随效果

    [self.tableView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOp ...