p[name]{background:red;} 只使用属性名
p[name=ghr]{background:red;} 指定属性名,并指定了该属性的属性值
p[name~=old]{background:red;}此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词
p[name^=g]{background:pink;}属性值是以g开头的
p[name$=M]{background:#CC0;}属性值是以M结尾的
p[name*=d]{background:#C3C;}属值中包含了value
p[name|=b]{background:#C3C;}属性值是value或者以“value-”开头的值(比如说zh-cn)

含type的是类型型,值限制类型
不含type是结构型,限制位置和类型(自己总结的,有问题欢迎指出)
p:nth-child(2) 找p标签父级下的第二个子元素且是p标签
p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
p:nth-child(2n){background:red}
E:nth-last-child(n) 表示E父元素中的第n个字节点,且类型为E从后向前计算  结构型
p:nth-of-type(2) 找p父级下的第二个p元素  类型型
E:nth-of-type(n)  表示E父元素中的第n个E类型字节点
E:nth-last-of-type(n)表示E父元素中的第n个类型为E的子节点,从后向前计算
E:empty 表示E元素中没有子节点。注意:子节点包含文本节点
p:first-child 表示p父元素中的第一个子节点且是p
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个节点类型是E的
E:last-of-type 表示E父元素中的最后一个节点类型是E的
E:only-child表示E元素中只有一个子节点。注意:子节点不包含文本节点
E:only-of-type 表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:子节点不包含文本节点
选择器伪类:
E:target 表示当前的URL片段的元素类型,这个元素必须是E
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时
E::before 生成内容在E元素前

CSS属性选择器和部分伪类的更多相关文章

  1. CSS3新增(选择器{属性选择器,结构伪类选择器,伪元素选择器})

    1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ]   选择具有 att 属性的 E 元素   例如:input [ value ...

  2. CSS 属性选择器的深入挖掘

    CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...

  3. HTML&CSS基础-子元素的伪类选择器

    HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...

  4. js进阶 10-10 可见伪类选择器和内容伪类选择器的作用

    js进阶 10-10  可见伪类选择器和内容伪类选择器的作用 一.总结 一句话总结:分组来描述.内容伪类选择器就是  四个  包含.可见的伪类选择器就是可见和不可见.查找功能,也就是内容伪类选择器非常 ...

  5. 使用这些 CSS 属性选择器来提高前端开发效率

    属性选择器非常神奇.它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题.但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用.在本文中,我们将讨论它们是如何运行的,并 ...

  6. CSS的选择器分为两大类

    CSS的选择器分为两大类:基本选择题和扩展选择器. 基本选择器: 标签选择器:针对一类标签 ID选择器:针对某一个特定的标签使用 类选择器:针对你想要的所有标签使用 通用选择器(通配符):针对所有的标 ...

  7. IE7浏览器下CSS属性选择器二三事

    一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...

  8. CSS:CSS 属性 选择器

    ylbtech-CSS:CSS 属性 选择器 1.返回顶部 1. CSS 属性 选择器 具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id. 注意:IE7和IE8需 ...

  9. CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别

    CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别 总结: "value 是完整单词" 类型的比较符号: ~=, |= "拼接字符串" 类型的比较 ...

随机推荐

  1. Node_初步了解(3)回调,作用域,上下文

    1. //回调:回调是异步编程最基本的方法,node.js需要按顺序执行异步逻辑的时候,一般采用后续传递的方式,将后续逻辑封装在回调函数中,作为起始函数的参数. //具名函数 function lea ...

  2. nodeJs --- web服务器创建

    一.下载nodeJs http://nodejs.cn/download/ 根据自己的情况选择下载 然后在命令行中输入 node -v 看是否安装成功 (下载node时,会把npm包处理工具一起下) ...

  3. 导出使用NPOI

    调用: DataTable table = new DataTable(); #region 创建 datatable table.Columns.Add(new DataColumn("账 ...

  4. 纯 CSS 实现高度与宽度成比例的效果

    http://zihua.li/2013/12/keep-height-relevant-to-width-using-css/

  5. Javascript 字符串(二)常用操作整理

    一.js获取字符串的字节数 这个好使--- function getBytesLength(str) { // 在GBK编码里,除了ASCII字符,其它都占两个字符宽 return str.repla ...

  6. Python3爬虫实例 代理的使用

    现在爬虫越来越难了,一些网站会有相应的反爬虫措施,例如很多网站会检测某一段时间某个IP的访问次数,如果访问频率太快以至于看起来不像正常访客,它可能就会会禁止这个IP的访问. 所以我们需要设置一些代理服 ...

  7. GIT里的一些名词

    origin:他是一个特定远程仓库的别名,他不是一个仓库的属性. head:通常情况下可以将它与当前的分支等同.

  8. ios the request was denied by service delegate for reason unspecified

    报错的情况如下: xcode8(The request was denied by service delegate (SBMainWorkspace) for reason: Unspecified ...

  9. Linux下逻辑地址、线性地址、物理地址详细总结

    Linux下逻辑地址.线性地址.物理地址详细总结 一.逻辑地址转线性地址      机器语言指令中出现的内存地址,都是逻辑地址,需要转换成线性地址,再经过MMU(CPU中的内存管理单元)转换成物理地址 ...

  10. Mathematica绘制曲面交线方法(方法二)

    MeshFunction方式 Show[Graphics3D[{Opacity[0.5], Ball[{0, 0, 0}, 2]}], ParametricPlot3D[{4 + (3 + Cos[v ...