• css选择器

    一、属性选择器

    css2定义的4个属性选择器：

    1. E[foo]——选择匹配E的元素，且该元素定义了foo属性；
    2. E[foo="bar"]——选择匹配E的元素，且该元素定义了foo属性值为“bar”;
    3. E[foo~="bar"]——选择匹配E的元素，且该元素定义了foo属性，foo属性是一个以空格定义的列表，其中一个列表值为“bar”;
    4. E[foo|="bar"]——选择匹配E的元素，且该元素定义了foo属性，foo属性值是一个以连字符分隔的列表，值开头的字符为“bar”。

    css3新增的3个属性选择器：

    1. E[foo^="bar"]——选择匹配E的元素，且该元素定义了foo属性，foo属性值包含前缀为“bar”的子字符串，可用该选择器替换E[foo|="bar"]；
    2. E[foo$="bar"]——选择匹配E的元素，且该元素定义了foo属性，foo属性值包含后缀为“bar”的子字符串；
    3. E[foo*="bar"]——选择匹配E的元素，且该元素定义了foo属性，foo属性值包含“bar”的子字符串，可用该选择器替换E[foo~="bar"]。

    二、结构伪类选择器

    1. E:root——选择匹配E所在文档的根元素。在HTML文档中，根元素就是<html>元素；
    2. E:nth-child(n)——选择所有在E的父元素中第n个位置的匹配E的子元素。参数n可以是数字、关键字（odd、even）和公式，参数的索引起始值为1，而不是0；
    3. E:nth-last-child(n)——选择所有在E的父元素中倒数第n个位置的匹配E的子元素。该选择器与上一选择器是计算顺序相反的选择器，语法和用法相同；
    4. E:nth-of-type(n)——选择所有在E的父元素中同类型第n个位置的匹配E的子元素。所有匹配E的子元素被分离出来单独排序；
    5. E:nth-last-of-type(n)——选择所有在E的父元素中同类型倒数第n个匹配E的子元素；
    6. E:first-child——选择位于E的父元素中第一个位置，且匹配E的子元素；
    7. E:last-child——选择位于E的父元素中最后一个位置，且匹配E的子元素；
    8. E:first-of-type——选择在E的父元素中匹配E的第一个同类型的子元素。功能类似于E:nth-of-type(1)选择器；
    9. E:last-of-type——选择在E的父元素中匹配E的最后一个同类型子元素。功能类似于E:nth-last-of-type(1)选择器；
    10. E:only-child——选择E的父元素只包含一个子元素，且该子元素匹配E的子元素；
    11. E:only-of-type——选择E的父元素只包含一个同类型子元素，且该子元素匹配E的该E元素本身；
    12. E:empty——选择匹配E的元素，且该元素不包含子节点。注意：文比往年也属于节点。

     三、UI伪类选择器

    css3共定义了11种UI元素状态伪类选择器：

    1. E:hover——选择匹配E的元素，鼠标悬浮时触发；
    2. E:active——选择匹配E的元素，鼠标点击元素按下左键时触发；
    3. E:visited——选择匹配E的元素，鼠标点击元素松开左键时触发；
    4. E:focus——选择匹配E的元素，获得焦点时触发；
    5. E:enabled——选择匹配E的元素，元素可用时触发；
    6. E:disabled——选择匹配E的元素，元素被禁用时触发；
    7. E:read-only——选择匹配E的元素，元素为只读状态时触发；
    8. E:read-write——选择匹配E的元素，元素为可读写状态时触发；
    9. E:default——选择匹配E的元素，元素默认状态时触发；
    10. E:indeterminate——选择匹配E的元素，元素为不定的、不明确的、模糊的状态时触发，使用机会非常少；
    11. E:selection——选择匹配E的元素，元素为选择状态时触发，不常用。

    四、其他选择器

    1. E~F——通用兄弟元素选择器类型。选择匹配F的所有元素，且匹配元素位于匹配E的元素后面；
    2. E:not(s)——否定伪类选择器类型。选择匹配E的所有元素，且过滤掉匹配s选择符的任意元素。s是一个简单结构的选择器，不能够使用复合选择器；
    3. E:target——目标伪类选择器类型。选择匹配E的所有元素，且匹配元素被相关URL指向。该选择器是动态选择器，只有当存在URL指向该匹配元素时，样式效果才能够有效。
  • 相关阅读:
    nginx利用image_filter动态生成缩略图
    uva 624 CD 01背包打印路径
    【剑指Offer学习】【全部面试题汇总】
    POJ2096-Collecting Bugs(概率DP)
    配置struts tags 输出HTML
    合并基因表达水平(merge gene expression levels, FPKM)
    设置MySQL自动增长从某个指定的数开始
    列联表（Crosstabs）
    mysql 实现行号的方法——如何获取当前记录所在行号
    shell 标出输入、标准输出、错误输出
  • 原文地址：https://www.cnblogs.com/cicichan/p/3837062.html
Copyright © 2020-2023  润新知