css 选择器

面试时候忽然被问到css选择器（主要是选择器复合的那一块），发现对于基础知识把握的还是不够细致，总结一篇。

目录

一、无分割（表示同时满足）

二、空格分割（父子关系）

三、> 分割（父子关系）

四、+ 分割 （父子关系）

五、~ 分割 （兄弟关系）

---

一、无分割（表示同时满足）

        将两个选择器直接相连，不分割表示。表示需要有同时满足两个或者多个选择器。

        上代码：

// css
.a.b{
    background-color: red;
}


// html 主要部分

<div class="a">
  父元素1
  <p class="b">子元素1</p>
  <p class="a b">子元素2</p>
</div>

        示意图：

二、空格分割（“父子”关系）

        空格分割，前面元素代表的是父元素，后面代表的是后代元素，这也就是为什么标题要给父子关系带引号的原因，表示的是父元素下所有满足条件的后代节点。

        上代码：

// css
// 类选择器
.a .b{
    background-color: red;
}
// 元素选择器---在这个例子里面效果相同
div p{
    background-color: red;
}


// html 主要部分

<div class="a">
  父元素1
  <p class="b">子元素1</p>
  <div>
    内嵌div
    <p class="b">内嵌子元素</p>
  </div>
  <p class="a b">子元素2</p>
</div>

        示意图：

 

三、> 分割（父子关系）

        前面选择器表示的是父选择器，后面表示的仅是孩子节点，内层的子孙节点不进行选择。

        上代码：

// css
// 类选择器
.a>.b{
    background-color: red;
}
// 元素选择器
div>p{
    background-color: red;
}


// html 主要部分

<div class="a">
  父元素1
  <p class="b">子元素1</p>
  <div>
    内嵌div
    <p class="b">内嵌子元素</p>
  </div>
  <p class="a b">子元素2</p>
</div>

        示意图：（这次其实还是略有不同，其实并不复杂）

类选择器示意图

 

元素选择器示意图

 

四、+ 分割 （兄弟关系）

        前面的选择器是表示其中一个兄弟，后面的选择器选择满足条件的下一个兄弟节点（或者说紧随其后）。

        上代码：

// css
// 类选择器
.a+.b{
    background-color: red;
}
// 元素选择器
div+p{
    background-color: red;
}


// html 主要部分

<div class="a">
  父元素1
  <p class="b">子元素1</p>
  <p class="a">兄弟子元素1</p>
  <!-- <p class="c">兄弟子元素2</p> -->
  <p class="b">兄弟子元素2</p>
  <div>
    内嵌div
    <p class="b">内嵌子元素</p>
  </div>
  <p class="a b">子元素2</p>
</div>
<div class="b">父元素2</div>

        示意图：

类选择器示意图

        这里需要注意的是代码里面兄弟子元素2，前面注释了一行，如果没有注释则不会渲染背景色。

 

元素选择器示意图

五、~ 分割 （兄弟关系）

        如果说前面的 ‘+’ 分割符是只能选择紧跟其后的一个元素，那么~ 分割符就可以选择后续所有满足条件的元素。

        上代码： 

// css
// 类选择器
.a~.b{
    background-color: red;
}
// 元素选择器
div~p{
    background-color: red;
}


// html 主要部分

<div class="a">
  父元素1
  <p class="b">子元素1</p>
  <p class="a">兄弟子元素1</p>
  <!-- <p class="c">兄弟子元素2</p> -->
  <p class="b">兄弟子元素2</p>
  <div>
    内嵌div
    <p class="b">内嵌子元素</p>
  </div>
  <p class="a b">子元素2</p>
</div>
<div class="b">父元素2</div>

        示意图：

类选择器示意图

 

元素选择器示意图

over