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

我们网页原始结构如下:

<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;
      }

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

第二课:html基础认识

2023-03-10 22:29:56