首页 > 代码库 > css选择器

css选择器

2024-07-11 15:17:00   233人阅读

一、属性选择器

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指向该匹配元素时，样式效果才能够有效。


联系
我们