谈谈CSS选择器(下)

434 阅读3分钟

这是我参与新手入门的第3篇文章。

hello,各位小伙伴们大家好呀,我是白祁。对于前端工程师来说,常用的CSS选择器大家必然不会陌生,但是对于一部分平时不太会用到的选择器,你真的够了解吗?本系列将会分两篇讲讲CSS中的选择器,第一篇讲过有哪些基础的选择器。没看过的小伙伴抓紧啦,指路:谈谈CSS选择器(上)

这一篇咱们会讲这些选择器衍生出来的用法。

一、CSS组合器

在讲CSS选择器的衍生用法时,就不得不提到CSS的组合器,组合器是解释选择器之间关系的某种机制。

CSS 选择器可以包含多个简单选择器。在简单选择器之间,我们可以包含一个组合器。

CSS 中有四种不同的组合器:

  • 后代选择器 (空格)
  • 子选择器 (>)
  • 相邻兄弟选择器 (+)
  • 通用兄弟选择器 (~)

二、组合器的使用

在了解到CSS组合器了之后,我们将其与上一篇讲过的CSS基础选择器结合使用,便会有非常多选择元素的方案。例如:

/*选择P元素内的所有a元素*/
p a{
    color:yellow;
}

这里要注意的是,只要是嵌套在p元素内的a元素都会被选择到

我们再来看一个例子:

/*选择父元素是p元素的a元素*/
p>a{
    color:yellow;
}

那这个例子中与上个例子的区别就在于,这里只会选择父级是p元素的a元素,如果p元素和a元素的层级中含有一个span元素,那么这个a元素是不会被选择到的。

对于相邻兄弟选择器,我们看看下面这个例子。

/*选择p元素后面的首个a元素*/
p+a{
    color:yellow;
}

这里会选择的p元素后的第一个a元素,且此时p元素和a元素是同级的。

对应的通用兄弟选择器,我们来看下一个例子:

/*选择与p元素有相同父元素且同级的a元素*/
p~a{
    color:yellow;
}

这里会选择与p元素有相同父元素且同级的a元素,无论a元素是不是第一个,都会被选择到。

那么在了解到组合器和选择器的基本用法后,对于大部分元素,我们都能选择到了。

对于基础选择器,其实有一些扩展的语法。例如属性选择器的用法:

选择器含义
[width]选择含有width属性的所有元素
[width=200]选择width=200的所有元素
[title~=flower]选择 title 属性包含单词 "flower" 的所有元素。
[lang|=en]选择 lang 属性值以 "en" 开头的所有元素。
a[href^="https"]选择其 src 属性值以 "https" 开头的每个 <a> 元素。
a[href$=".pdf"]选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
a[href*="juejin"]选择其 href 属性值中包含 "juejin" 字符串的每个 <a> 元素。

还有一些其他的扩展语法,由于篇幅问题,我就不一一列举出来的,有兴趣的同学可以翻阅CSS手册。