CSS3学习笔记(一):选择器

ChasonZhang

属性选择器

在CSS3以前,如果需要选择选择某个/类元素的话,一般会使用id/class来进行选择,CSS3则提供了更强大的功能,可以根据元素中的某个属性,从而选中该元素。具体如下:

  • E[attr]:属性名为 attr 的所有 E 元素

  • E[attr="value"]:属性 attr 的属性值 为 value 的所有 E 元素

  • E[attr~="value"]:属性值(>=1)中包含 value 的

  • E[attr^="value"]:属性值是以 value 开头的

  • E[attr$="value"]:属性值是以 value 结束的

  • E[attr*="value"]属值中包含了 value的

  • E[attr|="value"]:属性值是 value 或者以 value- 开头的值

【备注】 IE7及以上支持。

就我个人而言,作为初学者,前两个比较容易理解。其他几个当中,需要注意的几点:

  1. E[attr~="value"]E[attr*="value"]:~=是指某属性可能包含一个或多个属性值,只要该属性中包含特定 value 的,即满足条件,后者是指属性值中的一部分等于 value 即可。

  2. E[attr|="value"]:以 value- 开头,而不是以 value 开头,注意连词符-的存在。

伪类选择器

在CSS3以前,已经有了一些伪类选择器,如 CSS1 中的:hover:visited, CSS2 中的:after:before等等,CSS3 继续将之发扬光大。

结构性伪类选择器

  • E:nth-child(n):表示 E 的父元素中第 n 个子节点,n 的值可以是:

    • n:从1开始的整数;

    • odd/2n-1:表示 E 的父元素中所有奇数子节点

    • even/2n:表示 E 的父元素中所有偶数子节点

  • E:nth-last-child(n):表示 E 的父元素中倒数第 n 个子节点

  • E:nth-of-type(n):表示 E 的父元素中第 n 个类型为 E 的字节点

  • E:nth-last-of-type(n):表示 E 的父元素中倒数第 n 个类型为 E 的子节点

  • E:empty:表示E元素中没有子节点。

  • E:first-child: 表示 E 的父元素中第一个子节点

  • 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 。

【备注】 兼容性如下:
图片描述

*在学习的时候,初学者可能会有点混淆(尤其是非科班出身的,比如我QAQ),甚至难以理解这一选择器的原理。这里只需要稍微了解一下 DOM 的基本知识,知道节点的概念就能明白。
首先,在这里,子节点指的是元素节点,计算时从1开始计数(而非0),且计算时不包括文本节点。由于 DOM 的树状结构特性,当我们需要查找符合条件的 E 元素时,比如<p>元素,我们也许有多种方法进行查找,这种选择器的方法是:首先查找<p>元素,然后查找含有<p>元素的父级,假设是<body>元素,然后在<body>元素中查找所有满足条件的<p>元素。总结一下,就是“子——父——子”的查找顺序,至于为什么按照这样的查找顺序,背后的原理我也不太了解,因此对于第一步,是查找所有的<p>元素,还是在相同层级的节点上只需要找到一个<p>元素即可?这个问题我也不太清楚。*

其他伪类选择器

  • 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 元素前

  • E::after 生成内容在 E 元素后

  • E:not(s) 表示 E 元素不被匹配

  • E~F表示 E 元素毗邻的 F 元素

注意的一点是:before::before:after::after是一个意思,只不过:是 CSS2 的写法,::是 CSS3 的写法,具体可以查阅 MDN 的文档。

小结

以上基本就是 CSS3 选择器(包括 CSS1 和 CSS2)的常见选择器了,更完整的选择器列表可以查阅 W3C 文档:CSS Selector Reference

阅读 2.6k

产品经理学技术
记录我的代码学习之路。

杂食喵科产品汪

767 声望
23 粉丝
0 条评论
你知道吗?

杂食喵科产品汪

767 声望
23 粉丝
文章目录
宣传栏