在CSS选择器中,在最基本的标签选择器(div,P等)和属性选择器([],.class,#id)之外,稍微有点难度的就是位置选择器:所谓位置选择器就是根据已经明确的选择内容通过一定的表示方法,选择出其子代,后代,兄弟或后面的同级元素,以此来添加相应显示属性.

基于上述要求,位置选择器首先要有一个明确的参照元素,这个元素用基本的标签或属性选择器明确后,再添加对应的位置选择符号,来达到选择相应元素的目的

位置选择器的四种类型以及基本标识

我们网页原始结构如下:

<body>
    <ul class="list">
      <li class="item">item1</li>
      <li class="item">item2</li>
      <li class="item">item3</li>
      <ul>
        <li class="item">item3-1</li>
        <li class="item">item3-2</li>
      </ul>
      <li class="item four">item4</li>
      <li class="item">item5</li>
      <ul>
        <li class="item">item5-1</li>
        <li class="item">item5-2</li>
      </ul>
      <li class="item">item6</li>
      <ul>
        <li class="item6">item6-1</li>
        <li class="item6">item6-2</li>
        <ul>
          <li class="item6-2">item6-2-1</li>
          <li class="item6-2">item6-2-2</li>
        </ul>
        <li class="item6">item6-3</li>
      </ul>
      <li class="item">item7</li>
      <li class="item eight">item8</li>
    </ul>
    <ul>
      <li class="newitem">newitem-1</li>
      <li class="newitem">newitem-2</li>
    </ul>
  </body>

各类选择器操作

父子关系,选择其子代.所有标识为”>”
该标识能且只能将参照元素的所有子代选中,实例如下:

.list > .item{
  color: red;
}

父子关系,选择其后代,包括子代和孙代以及再后代.所用标识为”空格”
该标识能且只能将参照元素的所有子代选中,实例如下:

.list  .item{
  color: red;
}

特殊备注说明,子代的样式如果用”星星号”替代后,则同后代的意思一样,也即上面的代码等同于下面的代码:

.list > .*{
  color: red;
}

兄弟选择器,选择参照元素相邻的紧按着的下一个元素(但注意下一元素与参照元素必须属于同一父元素,也即两者必须是兄弟才行)

/* 可以让item4之后的item5生效 */
.list > .item.four + .item{
        border: 1px solid red;
      }
/* 无法让item8之后的newitem-1生效 */
.list > .item.eight + * {
        border: 1px solid blue;
        background-color: black;
      }
/* 上述代码中,我们常常用+*来代替下一个元素的类,在这个类型中,*无法包含到后代*/

同级后面元素,用符号”~”,如选定第四个元素后面的所有同级元素:

      /* 可以让item4之后的item5-8生效 */
      .list > .item.four ~ .item {
        border: 1px solid red;
      }
      /* 可以让item4之后的item5-8生效,同时对中间间插的ul生效 */
      .list > .item.four  ~*{
        border: 1px solid red;
      }
      /* 可以让item4之后的item5-8生效,同时item5-8的所的后
      效 */
      .list > .item.four  ~* *{
        border: 1px solid red;
      }

第四课:位置选择器的四种类型以及基本使用

位置选择器的四种类型以及基本标识

各类选择器操作

相关文章