一.属性选择器

  • [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. python--变量,常量,用户交互

    1.变量 概念:把程序运行过程中产生的中间值保存在内存,方便后面使用 命名规范: 1.字母,数字,下划线组成 2.不能用数字开头,且不能用纯数字 3.不能用python关键字 4.不要用中文 5.要有 ...

  2. “全栈2019”Java多线程第十七章:同步锁详解

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

  3. POJ 2069 模拟退火算法

    Super Star Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6422   Accepted: 1591   Spec ...

  4. sublime package control失败

    https://blog.csdn.net/jyfu2_12/article/details/86667132 安装时的错误提示如下: Error installing Package Control ...

  5. NEST - How can i do multiple nested aggregation?

    question: How can I do multiple nested aggregation? I have tried something like this: Aggregations(x ...

  6. linux互传文件nc命令

    使用nc命令可以很快的在两台主机传递文件,且不需要在同一网段,只要设置好端口即可. 一.安装(CentOS下) yum install -y nc  (需要root权限,可以用加上sudo) 二.使用 ...

  7. Java_多线程2_线程池

    线程池(pool): 线程池的作用: 1.节省资源,减少线程的数量和创建销毁线程的开销2.合理的管理线程的分配 线程池的创建: 1.newCachedThreadPool //优点:很灵活,弹性的线程 ...

  8. Tomcat 基础优化

    作者:北京运维 本文档是身边一些朋友.技术大佬之前分享的一些笔记,记录了 Tomcat 优化方法,笔记较多而且比较杂乱,经过整理.分类我个人觉得大致可以从以下几个方面优化 Tomcat: Tomcat ...

  9. 【EF数据库链接报错】“The underlying provider failed on open”

    EF在操作数据库时要反复链接.断开数据库,如果连接字符串是windows 服务验证,而不是用的用户名和密码,那么尝试访问数据库的用户是NT AUTHORITY\NETWORK SERVICE.权限不够 ...

  10. git已经删除了远程分支,本地仍然能看到

    1.使用 git branch -a 命令可以查看所有本地分支和远程分支,发现很多在远程仓库已经删除的分支在本地依然可以看到. 2.使用命令 git remote show origin,可以查看re ...