本文的题目是 如何写出让他人看不懂的选择器,然而本意不是心愿大家去写如此简单的抉择,一些简单(怪异)的选择器在一些特定场景下兴许有着妙用,又或者写出这种选择器是基于过后的非凡背景。
通过这些案例,咱们窥见一些 CSS 选择器的有意思之处。从中失去一些无益教训。
形形色色的伪类叠加
首先来看第一类,在单个选择器中,叠加各种伪元素。
像是这个:
a:not(main *:not(:is(h2, h3) > *)) {color: red;}
这个选择器不认真看个一分钟基本不晓得它到底是个啥。(认真看也不肯定晓得 …)
它混入了比拟新的两个伪类选择器
:not()
:用来匹配不合乎一组选择器的元素。因为它的作用是避免特定的元素被选中,它也被称为反选伪类(negation pseudo-class):is()
:将选择器列表作为参数,并抉择该列表中任意一个选择器能够抉择的元素。
当然,对于它的拆解:
a:not(main *)
:抉择不是<main>
标签下的所有 a 标签main *:not(:is(h2, h3) > *)
:抉择<main>
标签下所有不是<h2>
、<h3>
子元素的元素
所以合起来就是:抉择所有不是 <main>
标签下的 <a>
标签以及所有 <main>
上面不是 <h2>
、<h3>
下的子 <a>
以外的所有 <a>
标签。
假如有如下 HTML
<main>
<a href="">main>a</a>
<h1><a href="">main>h1>a</a></h1>
<h2><a href="">main>h2>a</a></h2>
<h2><p><a href="">main>h2>p>a</a></p></h2>
<h3><a href="">main>h3>a</a></h3>
</main>
<h1><a href="">h1>a</a></h1>
<h2><a href="">h2>a</a></h2>
<h3><a href="">h3>a</a></h3>
<a href="">a</a>
后果如下:
对于这个 CSS 选择器,是能够通过失常写法还原的,只是代码量略微多一点点,失常而言,还是不倡议写这么简单的选择器。
这里仅仅是一个例子,多层不同的伪类嵌套,对于代码可读性是灾难性的。
神奇的特殊字符
好了,某天你又碰到了这样一个选择器:
#\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\?\>\<\\\[\]\{\}\|\`\# {color: red;}
Oh My God。我想你的第一反馈肯定是这个选择器真能失效?
不好意思,它还真能失效,CSS 中的 CSS 类名中容许应用除 NUL
之外的任何字符。
感兴趣能够看看这个:Which characters are valid in CSS class names/selectors?
所以,上述的选择器,是能够匹配这样的标签的:
<div id="~!@$%^&*()_+-=,./';:?><\[]{}|`#">Lorem</div>
当然,既然如此,咱们还能够写出这样的选择器:
<div id="💉💧🐂🍺"> 真滴牛啤 </div>
#💉💧🐂🍺 {
padding: 10px;
color: red;
}
emmm,没错,这也是能够失效的:
所以,不是特地皮糙肉厚,极不倡议大家在 CSS 类名中掺入除了 -
以及 _
以外的其余特殊字符。
本身的多重重叠
上面这个选择器,也有点意思,非凡关头倒是能够写写。像是这样一个选择器:
div.g-text-color.g-text-color.g-text-color.g-text-color.g-text-color {color: red;}
为什么会呈现这种选择器呢?大部分状况是为了晋升优先级。
咱们都晓得,CSS 不同选择器之间是存在优先级高下的。
有这样一种场景举个例子,有的时候,咱们在业务中引入了组件库,应用了它的一个按钮,然而又想扭转其中的某些款式。给它加了一个类名,在对应类名新增了笼罩款式后发现没有失效。
起因就在于定义款式的选择器优先级不够高。
这个时候,咱们就能够通过本人叠加本人的形式,晋升选择器的权重。
div.g-text-color.g-text-color.g-text-color
的权重,就会比 div.g-text-color.g-text-color
更高。所以某些极其状况下,就呈现了上述的选择器。
当然,失常状况下,也是不举荐写这种让人头大的抉择的。
总结一下
坑爹的选择器还有很多,本文仅仅是举了冰山一角。从 如何写出让他人看不懂的选择器 中,咱们能晓得 CSS 选择器是存在十分多细节的。晓得那些不好的,能帮忙咱们更好的写出丑陋且正确的选择器。
好了,本文到此结束,心愿对你有帮忙 :)
想 Get 到最有意思的 CSS 资讯,千万不要错过我的公众号 — iCSS 前端趣闻 😄
更多精彩 CSS 成果能够关注我的 CSS 灵感
更多精彩 CSS 技术文章汇总在我的 Github — iCSS,继续更新,欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议,能够多多交换,原创文章,文笔无限,满腹经纶,文中若有不正之处,万望告知。