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. Sublime_正则查找替换

    在sublime编辑器中使用正则表达式对内容进行查找和替换: (1)Find——Replace... (2)出现下图界面 注意:点击左边第一个按钮,开启正则表达式功能. (3) (4)点击Replac ...

  2. keystone 安装随笔

    keystone 代码库 git clone https://git.openstack.org/openstack/keystone.git cd keystone keystone配置文件 etc ...

  3. 【并查集】Connectivity @ABC049&amp;ARC065/upcexam6492

    Connectivity 时间限制: 1 Sec  内存限制: 128 MB 题目描述 There are N cities. There are also K roads and L railway ...

  4. jQuery 学习(1)——认识jQuery

    1.下载 下载地址:http://jquery.com/download/ jquery-3.2.1.js——用于开发和学习(229K) jquery-3.2.1.min.js——用于项目和产品(31 ...

  5. javaScript系列 [01]-javaScript函数基础

    [01]-javaScript函数基础 1.1 函数的创建和结构 函数的定义:函数是JavaScript的基础模块单元,包含一组语句,用于代码复用.信息隐蔽和组合调用. 函数的创建:在javaScri ...

  6. Eclipse (indigo) 中安装jdk包并执行Maven

    为安装Eclipsejdk. windows->preferences->java->install jre->add sdk 假设在eclipse里增加M2 Maven 执行 ...

  7. echarts中tooltip提示框位置控制

    关键代码: position: function(point, params, dom, rect, size) { //其中point为当前鼠标的位置,size中有两个属性:viewSize和con ...

  8. requirejs amd module load example

    person.js /** * This example make use of requireJS to provide a clean and simple way to split JavaSc ...

  9. 关于4A(统一安全管理平台)系统的理解

    1. 4A系统的需求分析 近年来企业用户的业务系统发展十分迅速,内部的系统数和用户数不断增加,网络规模迅速扩大,在应用扩展的同时,各业务系统的安全管理工作相对滞后,无法满足企业发展的长期要求. 各系统 ...

  10. 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值

    $(function () { var wait = $("<img src=\"\" alt=\"正在上传\"/>"); $( ...