css下那些奇怪的选择器(selector)

你可能注意到最近我的博客有很多的UI都做了优化。

例如友链:

再比如文章页的条目:

鼠标移动上去就会出现下划线。

评论区也被改善了很多。

事情的起因是因为我那天想修改了主题的源代码,修改后友链页居然用不了了!?

所以我花了两天时间把整个主题的源代码重写了一遍,说实话原作者的代码风格实在是太紊乱了,很多地方会有无效代码,在css上也与一个高亮代码的插件产生了巨大的冲突,一度导致我的代码高亮插件无法正常使用,另外SEO没有任何作用,导致百度一直都没法正常地收录我的博客。

于是这两天里我把所有原来的代码都删除了,重新按照自己的代码风格写了一遍,尤其是css是完全的删除重写,我还纳闷为什么我用<li>的时候总是出现奇怪的黑色背景,原来也是主题里css的锅。

在一步步修正的过程当中,逐渐发现一些奇怪的知识,比如css的一些奇怪的选择器。

恰好今天找到了CSS的几个标准的官方文档,所以写一些笔记放着。

CSS3的selector板块文档里,有一份较为完整的总结表格:(level代表的是提出他们的css版本号)

Pattern Represents Description Level
* 任何元素 Universal selector 2
E <E>元素 Type selector 1
E[foo] 一个拥有foo属性的E元素 Attribute selectors 2
E[foo="bar"] 一个拥有foo属性且值为bar的E元素 Attribute selectors 2
E[foo~="bar"] 一个拥有foo属性且foo的值中(空格隔开)有一个等于bar的E元素 Attribute selectors 2
E[foo^="bar"] 一个拥有foo属性且值以bar开头的E元素 Attribute selectors 3
E[foo$="bar"] 一个拥有foo属性且值以bar结尾的E元素 Attribute selectors 3
E[foo*="bar"] 一个拥有foo属性且值包含bar的E元素 Attribute selectors 3
E[foo|="en"] 一个拥有foo属性且值为“en”或者是以“en-”开头的E元素 Attribute selectors 2
E:root an E element, root of the document Structural pseudo-classes 3
E:nth-child(n) 在父节点内第n个E元素 Structural pseudo-classes 3
E:nth-last-child(n) 在父节点内倒数第n个E元素 Structural pseudo-classes 3
E:nth-of-type(n) 在一个节点内第n个与E同类且恰好是E的元素 Structural pseudo-classes 3
E:nth-last-of-type(n) 在一个节点内倒数第n个与E同类且恰好是E的元素 Structural pseudo-classes 3
E:first-child 在父节点内第1个E元素 Structural pseudo-classes 2
E:last-child 在父节点内最后一个E元素 Structural pseudo-classes 3
E:first-of-type 在一个节点内第1个与E同类且恰好是E的元素 Structural pseudo-classes 3
E:last-of-type 在一个节点内倒数第1个与E同类且恰好是E的元素 Structural pseudo-classes 3
E:only-child 一个是父节点唯一一个子节点的E元素 Structural pseudo-classes 3
E:only-of-type 没有兄弟姐妹且元素名称相同的E元素 Structural pseudo-classes 3
E:empty 一个没有子节点(也没有文字等内容)的E元素 Structural pseudo-classes 3
E:link
E:visited
未访问的E元素且E元素是超链接
已访问的E元素且E元素是超链接
The link pseudo-classes 1
E:active
E:hover
E:focus
伴随着某些用户动作的E元素 The user action pseudo-classes 1 and 2
E:target an E element being the target of the referring URI The target pseudo-class 3
E:lang(fr) 一个拥有法语的E元素 The :lang() pseudo-class 2
E:enabled
E:disabled
一个可用和不可用的用户接口元素E The UI element states pseudo-classes 3
E:checked a user interface element E which is checked (for instance a radio-button or checkbox) The UI element states pseudo-classes 3
E::first-line E元素第一个格式化的行 The ::first-line pseudo-element 1
E::first-letter E元素内第一个格式化的字母 The ::first-letter pseudo-element 1
E::before E元素内的起始部分 The ::before pseudo-element 2
E::after E元素内的末尾部分 The ::after pseudo-element 2
E.warning 一个拥有class且值为warning的E元素 Class selectors 1
E#myid 一个拥有id且值为myid的E元素 ID selectors 1
E:not(s) an E element that does not match simple selector s Negation pseudo-class 3
E F 一个祖先有E元素的F元素 Descendant combinator 1
E > F E元素的直接子元素F(只能是直接子元素) Child combinator 2
E + F 在E元素后紧跟着的(在同一个父节点内的)F元素 Next-sibling combinator 2
E ~ F 在E元素后(在同一个父节点内的)所有F元素 Subsequent-sibling combinator 3

一些例子:

这种其实是很简单的,只不过我一直学艺不精,所以就没怎么注意到过这种情况,实际上只要:

在它们中间不加空格就行了,而如果加了空格匹配的是子元素(或者更深层次)的class:

有时候我们想找到“孙子”,比如class是test1的孙子是元素p的样式,这时候可以这么写:


这种情况如果要同时选中三个怎么办呢?当然你可以一个个选择用逗号隔开,但如果你有十多个选择起来就有点麻烦了,这时候可以用以下代码同时选中三个:


伪类和伪元素

我翻阅了CSS1的官方文档,里面对这两个东西是这么解释的:

Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not exist in the HTML source. Rather, they are "inserted" by the UA under certain conditions to be used for addressing in style sheets.

伪类和伪元素可以被css选择器使用,但是却不存在于HTML的源代码中。或者说,它们在某些条件下被UA(浏览器)插入并用来定位样式表。

例如a:hover、a:visited、a:active、a:link这些都是伪类,选中它们修改时表面看不出变化,但当它们发生诸如点击、聚焦等事件时,就可以看到它们产生样式变化。

而关于伪元素,CSS1标准中指出,浏览器可能只支持部分他们所定义的伪元素。

伪类和伪元素是一些比较高能的css选择器,熟练运用的话能少写很多Javascript代码。


css3作为css2.2的一个升级版本,是以模块化进行升级,目前推荐使用的只有6个草案,但有一些工作草案已经推出来很久了,故已经被各大浏览器所接受使用,例如transition。

新特性里过渡(transition)和转换(transforms)是很实用的属性,总的来说,这些新特性包装了很多原本只能由Javascript才能实现的效果,现如今使用最新的特性就可以尽可能少的接触js的动画特效。

-- 热度:23 ℃
-- 于 共写了3573个字
-- 文内使用到的标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注