CSS选择器 | 前端面试

朝朝与乐乐
116 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天

新手菜鸟，多多担待~

大家好，我是朝朝，我有一只猫，叫做乐乐，虽然我还没见到它，但是今晚我要拿着猫包去接它了。

半个月前跟面试官聊天，聊到元素选择器。

我说：我不会

他说：emm...

他出了个题，我猜对了哈哈哈。

...（完）

标签选择器

选择器是通常是某个html标签

body {
  color: blue;
  font-size:35px;
  display: block;
 }

css选择器的匹配规则是从右往左的，使用混合选择的话，标签选择器不是一个好选择。 如下代码，需要找到所有的span标签，然后再在整棵树结构往上找，完全匹配整个规则才被选中。 那为什么是从右往左不是从左往右找呢？那当然是更快啦！

.div-content .div-style span {
  font-size:14px;
  background:#333;
}

子选择器和后代选择器

  • 子选择器：使用>分隔，选中元素的第一层元素
  • 后代选择器：使用空格分隔，选中元素指定元素

image.png

image.png

相邻兄弟选择器

选择的元素紧接在另一个元素，并且有相同的父元素，就被选中，使用+分隔

image.png

标签属性选择器

格式 a[title] { }

  1. [attr]选中有attr属性的a标签

  2. [attr=value]选中有attr属性并且值为value的a标签

  3. [attr~=value]选中有attract属性并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value image.png

  4. [attr|=value]选中有attr属性并且值为value或者以value-为前缀开头的a标签 image.png

  5. [attr^=value]选中有attr属性且值以value开头的a标签 image.png

  6. [attr$=value]选中有attr属性且以value结尾的a标签

  7. [attr*=value]选中有attr属性且以值包含value的标签 image.png

8.a[title i] 区分大小写

9.a[title s]不区分大小写

伪类选择器

指定元素的特殊状态

最经典的是a标签的lvha：link visited hover active

那莫，这里展示某一些

  • :first-child 一组兄弟元素中的第一个元素。

image.png

  • :last-child 一组兄弟元素中的最后个元素。
  • :nth-child 指定一组兄弟元素的某些元素
tr:nth-child(odd)
表示 HTML 表格中的奇数行。

tr:nth-child(2n)
表示 HTML 表格中的偶数行。
  • :read-only 指定只读标签

image.png

伪元素选择器

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式 image.png

在使用icon的时候会用的比较多

通用兄弟选择器

只要是兄弟，不用紧邻，就会选中，用~分隔

image.png

参考文章：CSS 选择器

要接猫啦，真开心，下回见

avatar
文章
阅读
粉丝