位置選擇器的四種類型以及基本標識

我們網(wǎng)頁原始結(jié)構(gòu)如下:

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

各類選擇器操作

父子關(guān)系,選擇其子代.所有標識為”>”
該標識能且只能將參照元素的所有子代選中,實例如下:

.list > .item{
  color: red;
}

父子關(guān)系,選擇其后代,包括子代和孫代以及再后代.所用標識為”空格”
該標識能且只能將參照元素的所有子代選中,實例如下:

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

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

第二課:html基礎(chǔ)認識

2023-03-10 22:29:56

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

位置選擇器的四種類型以及基本標識

各類選擇器操作