一.属性选择器

  • [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. iOS 的各种识别码

    在iOS系统中,获取设备唯一标识的方法有很多: 1. x UDID (Unique Device Identifier,已过期) 2. x OPEN UDID (已过期) 3. 广告标示符(IDFA- ...

  2. java学习笔记—实现一个类MyInputStream(28)

    1 实现一个类MyInputStream读取文件,且不能抛出异常 public class TestDemo { public static void main(String[] args) thro ...

  3. zTree第一章,纯静态

    zTree v3.5 Demo 演示 http://www.treejs.cn/v3/demo.php#_101 ------------------------------------------- ...

  4. bzoj 2244 [SDOI2011]拦截导弹(dp+CDQ+树状数组)

    传送门 题解 看了半天完全没发现这东西和CDQ有什么关系…… 先把原序列翻转,求起来方便 然后把每一个位置表示成$(a,b,c)$其中$a$表示位置,$b$表示高度,$c$表示速度,求有多少个位置$a ...

  5. [Objective-C语言教程]指针(15)

    Objective-C中的指针简单易学.使用指针可以更轻松地执行某些Objective-C编程任务,并且在不使用指针的情况下无法执行其他任务(如动态内存分配). 所以有必要学习指向成为一个完美的Obj ...

  6. 架构师养成记--23.sigar使用实例

    作用是检测机器的硬件环境 注意在jdk的bin目录下加上sigar的lib目录中的文件 import java.net.InetAddress; import java.net.UnknownHost ...

  7. 对 ArrayList 进行分页.

    /** * 测试分页 */ @Test public void testPage() { int bulkSize = 2; List<Integer> dataList = new Ar ...

  8. python学习,day3:函数式编程,带参数

    # coding=utf-8 # Author: RyAn Bi def test(x,y,z): print(x) print(y) print(z) test(y=2,z =3,x=1) #形参与 ...

  9. 状态机模式中的Task与对象池

    Task 抽象带来Task 首先,假设我们有这么一段逻辑:收到一个参数,先校验格式是否正确,再提取相关的参数出来,执行我们的事务,然后构建结果并返回.伪代码如下: /** * 一个engine类 ** ...

  10. c#正则表达式--环视

    网上有一篇文章写的很好.请参见      正则表达式之环视 .现将自己的理解记录下来. 环视(lookaround)可以理解为限定条件.即字符串中,某个字符左边或右边能出现什么,不能出现什么.只是一个 ...