一.属性选择器

  • [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. deepin jdk 安装

    一.安装JDK环境 1 .卸载系统自带的Openjdk(可能不需要) 先用检测是否安装了openjdk dpkg -l | grep openjdk 如果安装了, 使用下面命令卸载. sudo apt ...

  2. leetcode 56 合并区间 JAVA

    题目: 给出一个区间的集合,请合并所有重叠的区间. 示例 1: 输入: [[1,3],[2,6],[8,10],[15,18]] 输出: [[1,6],[8,10],[15,18]] 解释: 区间 [ ...

  3. 安装 luajit && 给 luajit 安装 cjson

    安装 luajit 步骤: 从官网 http://luajit.org/download.html下载  LuaJIT-2.0.5.tar.gz 解压 tar -xzf LuaJIT-2.0.5.ta ...

  4. LOJ#2070. 「SDOI2016」平凡的骰子(计算几何)

    题面 传送门 做一道题学一堆东西不管什么时候都是美好的体验呢-- 前置芝士 混合积 对于三个三维向量\(a,b,c\),定义它们的混合积为\((a\times b)\cdot c\),其中$\time ...

  5. Vue中引入jquery方法

    vue-cli webpack 引入jquery   今天费了一下午的劲,终于在vue-cli 生成的工程中引入了jquery,记录一下.(模板用的webpack) 首先在package.json里的 ...

  6. html个人简历

    https://gitee.com/aijiawei3344/codes/g8piyjc3kb7nav4whqd2r79 <!DOCTYPE html> <html> < ...

  7. Android 4.4 KitKat终于支持录屏(Screen Recording)了!

    本文介绍了Android 4.4 KitKat系统新增加的录屏功能以及录屏方法,和限制因素.如果App由于版权方面的原因,不想被记录屏幕录像的话,APP只需要在相应的SurfaceView请求“Sur ...

  8. LINQ入门教程之各种标准查询操作符(二)

    续上篇LINQ入门教程之各种标准查询操作符(一) LINQ入门教程之各种标准查询操作符(二) 7.  聚合操作符 8.  集合操作符 9.  生成操作符 #region 生成操作符 即从现有序列的值中 ...

  9. android4.0以上访问网络不能在主线程中进行以及在线程中操作UI的解决方法

    MONO 调用一个线程操作UI 然后报Only the original thread that created a view hierarchy can touch its views.错误 goo ...

  10. 我也介绍下sizeof与strlen的区别

    本节我也介绍下sizeof与strlen的区别,很简单,就几条: 1. sizeof是C++中的一个关键字,而strlen是C语言中的一个函数:2. sizeof求的是系统分配的内存总量,而strle ...