骚东西之 CSS 选择器（空格 | 逗号 , | 加号 + | 大于号 > | 波浪号 ~ 等）

金水_
825 阅读3分钟

由于经常在工作中，对css选择器的概念不够清晰，搭配less使用时经常理不清楚，所以写个文章作为记录

本文参考W3C，本文会搭配less使用，下饭更香；本文对less语法不做过多介绍，需要自取Less官网

.class

类选择器less和css写法相同，选择 class="block"的所有元素

image.png

两个class相连

只会选择 class 属性中同时有 block1 和 block2 的所有元素，单独有block1或者block2不会被选择。

<div class="block1 block2">block1block2</div>
<div class="block1">block1</div>
<div class="block2">block2</div>

.block1 {
  &.block2 {
    background: yellowgreen;
  }
}

// less编译后的css
.block1.block2 {
  background: yellowgreen;
}

image.png

两个class中间有个空格

选择class为parent子孙中class为child的所有元素

<div class="parent">
  <div class="child">child1</div>
  <div class="test">
    <div>
      <div>
        <div>
          <div class="child">child2</div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="child">child3</div>

.parent {
  padding: 50px;
  border: 1px solid pink;
  .child {
    background: yellowgreen;
    margin-bottom: 10px;
  }
}

// less编译后的css
.parent {
  padding: 50px;
  border: 1px solid pink;
}
.parent .child {
  background: yellowgreen;
  margin-bottom: 10px;
}

image.png

两个class中间有一个大于号>

大于号就是只有在当前父元素下子元素才会生效，选择class为parent子元素中class为child的所有元素，不包含孙元素

<div class="parent">
  <div class="child">child1</div>
  <div class="test">
    <div>
      <div>
        <div>
          <div class="child">child2</div>
        </div>
      </div>
    </div>
  </div>
  <div class="child">child3</div>
</div>

.parent {
  padding: 50px;
  border: 1px solid pink;
  > .child {
    background: yellowgreen;
    margin-bottom: 10px;
  }
}

// less编译后的css
.parent {
  padding: 50px;
  border: 1px solid pink;
}
.parent > .child {
  background: yellowgreen;
  margin-bottom: 10px;
}

image.png

两个class中间有个逗号,

逗号就是两个class都会生效，选择class为block1和block2的所有元素

<div class="block1">
  <div class="block2">block2</div>
</div>
<div class="block2">
  <div class="block1">block1</div>
</div>
<div class="block1">block1</div>
<div class="block2">block2</div>

.block1,
.block2 {
  background: pink;
  margin-bottom: 10px;
}

// less编译后的css
.block1,
.block2 {
  background: pink;
  margin-bottom: 10px;
}

image.png

两个class中间有一个加号+

加号就是相连的兄弟元素，选择class为block2并且紧跟block1的元素

<div class="block1">block1</div>
<div class="block2">block2</div>
<div class="block2">block2</div>

.block1 {
  background: pink;
  + .block2 {
    background: yellowgreen;
  }
}

// less编译后的css
.block1 {
  background: pink;
}
.block1 + .block2 {
  background: yellowgreen;
}

image.png

两个class中间有一个波浪号~

波浪号就是选择前面出现过的class，之后的才生效，选择出现在blcok1之后的class为block2的所有元素

<div class="block2">block2</div>
<div class="block1">block1</div>
<div class="block2">block2</div>
<div class="block2">block2</div>

.block1 {
  background: pink;
  ~ .block2 {
    background: yellowgreen;
  }
}

// less编译后的css
.block1 {
  background: pink;
}
.block1 ~ .block2 {
  background: yellowgreen;
}

image.png

::after | ::before

在每个class的内容之后(after)和之前(before)插入内容；
这里有一个坑，就是class后面允许带有空格，空格代表选择这个class之后的所有子孙元素都会插进去，经常被这个坑QAQ；

<div class="block1">
  父元素
  <div>子元素</div>
  <div>子元素</div>
  <div>子元素</div>
  <div>子元素</div>
  <div>子元素</div>
</div>

.parent {
  background: pink;
  padding: 10px;
  .child {
    background: yellowgreen;
  }
  // &之后没空格
  &::before {
    content: '插入';
  }
}

// less编译后的css
.parent {
  background: pink;
  padding: 10px;
}
.parent .child {
  background: yellowgreen;
}
.parent::before {
  content: '插入';
}

image.png

.parent {
  background: pink;
  padding: 10px;
  .child {
    background: yellowgreen;
  }
  // &之后有空格
  & ::before {
    content: '插入';
  }
}

// less编译后的css
.parent {
  background: pink;
  padding: 10px;
}
.parent .child {
  background: yellowgreen;
}
.parent ::before {
  content: '插入';
}

image.png 这个点需要特别注意，经常搞错，after同理；

:nth-child()等选择器

选择属于其父元素的第n个子元素，有多种写法，每种都有坑；
当我们有一个需求，找到parent下的第一个child；

错误写法一：

<div class="parent">
  父元素1
  <div class="test">测试元素</div>
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
  <div class="child">子元素4</div>
</div>
<div class="parent">父元素2</div>

.parent {
  background: pink;
  padding: 10px;
  margin-bottom: 20px;
  .test {
    background: yellowgreen;
    margin-bottom: 10px;
  }
  .child {
    background: yellowgreen;
    margin-bottom: 10px;
  }
  // &之后没空格，这样会找到第一个parent
  &:nth-child(1) {
    background-color: greenyellow;
  }
}


// less编译后的css
.parent {
  background: pink;
  padding: 10px;
  margin-bottom: 20px;
}
.parent .test {
  background: yellowgreen;
  margin-bottom: 10px;
}
.parent .child {
  background: yellowgreen;
  margin-bottom: 10px;
}
.parent:nth-child(1) {
  background-color: greenyellow;
}

image.png

错误写法二：

.parent {
  background: pink;
  padding: 10px;
  margin-bottom: 20px;
  .test {
    background: yellowgreen;
    margin-bottom: 10px;
  }
  .child {
    background: yellowgreen;
    margin-bottom: 10px;
  }
  // &之后有空格，这样会找到parent第一个子元素，就是test
  & :nth-child(1) {
    background-color: greenyellow;
  }
}

// less编译后的css
.parent {
  background: pink;
  padding: 10px;
  margin-bottom: 20px;
}
.parent .test {
  background: yellowgreen;
  margin-bottom: 10px;
}
.parent .child {
  background: yellowgreen;
  margin-bottom: 10px;
}
.parent :nth-child(1) {
  background-color: greenyellow;
}

image.png

正确写法是给child加nth-child()并且不加空格

.parent {
  background: pink;
  padding: 10px;
  margin-bottom: 20px;
  .test {
    background: yellowgreen;
    margin-bottom: 10px;
  }
  .child {
    background: yellowgreen;
    margin-bottom: 10px;
    // &之后无空格
    &:nth-child(2) {
      background-color: greenyellow;
    }
  }
  // less编译后的css
  .parent .child:nth-child(2) {
    background-color: greenyellow;
  }
}

image.png

以上如有不对，欢迎指正！

avatar
文章
阅读
粉丝