各类选择器与结构状态伪类练习

各类选择器与结构状态伪类练习

基本选择器

• 标签（元素）选择器

<h2>标签选择器演示</h2>
<sytle>
    h2{color:red;}
</sytle>

• 属性选择器

<h2 class="title">属性选择器演示 1</h2>
<h2 id="city">属性选择器演示 2</h2>
<sytle>
    h2[class='titel']{color:green;}
    h2[id='city]{background-color:gary;}
</sytle>

• class与id属性使用频率高有语法糖

<!--- [class='titel'] === .class --->
h2.class{...}
<!--- [id='city] === #id --->
h2#id{...}

上下文选择器

根据元素层级与关系匹配元素

1. 父子: >
2. 后代: 空格
3. 兄弟: +
4. 同级: ~

• 父子: >

<!--ul是li的父级-->
    <ul class="list">
      <li class="item">item1</li>
      <li class="item">item2</li>
      <li class="item">item3</li>
      <li class="item">item4</li>
      <li class="item">item5</li>
      <li class="item">item6</li>
      <li class="item">item7</li>
      <li class="item">item8</li>
    </ul>
<sytle>
    ul > li {color:red;}
</sytle>

• 后代: 空格

    <ul class="list">
      <li class="item">item1</li>
      <li class="item">item2</li>
      <li class="item">item3</li>
      <li class="item">
        item4
        <!--这个ul的父级是item4-->
        <ul>
          <li class="item">item4-1</li>
          <li class="item">item4-2</li>
          <li class="item">item4-3</li>
          <!--这里li的父级是最靠近的ul-->
        </ul>
      </li>
      <li class="item">item5</li>
      <li class="item">item6</li>
      <li class="item">item7</li>
      <li class="item">item8</li>
    </ul>
<style>
/* 后代 空格 */
.list .item {
  color: red;
}
</style>

注意：.list 选择了它包含的所有层级的.item

• 兄弟: +

兄弟层级是起点元素的下一个同级元素

<!--如果把h2视为兄弟层级关系的起点元素-->
    <h1>我是h1,在h2的前面，与h2是同级关系不是兄弟关系</h1>
    <h2>兄弟层级选择器演示</h2>
    <p>P元素是h2元素的同级元素他们还是兄弟层级关系</p>
    <h3>h3元素虽然与h2也是同级关系，由于不是位于h2的下一个所以不是兄弟关系</h3>
<style>
/* 兄弟 +  */
h2 + p {
  color: green;/* 兄弟+有效  */
}
h2 + h3 {
  color: green;/* 兄弟+无效  */
}
h2 + h1 {
  color: green;/* 兄弟+无效  */
}
</style>
/* 要是兄弟关系，只能是起点元素与下一个紧挨着的同级元素才符合条件 */

• 同级: `~

同级将选择起点元素的所有同级元素

<!-- 同级选择器演示 -->
    <h2>同级选择器演示</h2>
    <p>第一个p元素与h2是同级</p>
    <h3>h3元素与h2是同级</h3>
    <p>第二个p元素与h2是同级</p>
<style>
h2 ~ p,h3 {
  color: violet;/* 第一个P，第二个P，h3都有效 */
}
</style>

伪类选择器：结构

/* 选择一个元素 */
    <ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
      <li>item7</li>
      <li>item8</li>
      <li>item9</li>
      <li>item10</li>
    </ul>
<style>
/* 方法一 */
.list :nth-child(1) {
  /* 选择第一个元素 */
  background-color: lightblue;
}
.list :nth-child(10) {
  /* 选择第一个元素 */
  background-color: lightgray;
}
/* 方法二，使用语法糖 */
.list :first-child {
  /* 选择第一个元素 */
  background-color: lightblue;
}
.list :last-child {
  /* 选择最后一个元素 */
  background-color: lightgray;
}
</style>

/* 选择一组元素 */
    <ul class="list1">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
      <li>item7</li>
      <li>item8</li>
      <li>item9</li>
      <li>item10</li>
    </ul>
<style>
/* 正向选择第5个li起后面的所有同级元素 */
.list1 > :nth-child(n + 5) {
  color: brown;
}
/* 反向选择第5个li起后面的所有同级元素 */
.list1 > :nth-child(-n + 5) {
  color: green;
}
</style>

/* 选择偶数与奇数元素 */
    <ul class="list2">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
      <li>item7</li>
      <li>item8</li>
      <li>item9</li>
      <li>item10</li>
    </ul>
<style>
/* 使用even选择偶数元素 */
.list2 > :nth-child(even) {
  background-color: lightgreen;
}
/* 使用odd选择奇数元素 */
.list2 > :nth-child(odd) {
  background-color: lightblue;
}
</style>

状态伪类

用状态伪类:hover写一个简单的下拉类表

    <a class="menu" href="#">下拉列表</a>
    <ul class="list3">
      <li><a href="">item1</a></li>
      <li><a href="">item2</a></li>
      <li><a href="">item3</a></li>
      <li><a href="">item4</a></li>
      <li><a href="">item5</a></li>
    </ul>
<style>
.list3 {
  display: none;
  list-style-type: none;
}
.menu:hover + .list3 {
  display: block;
}
</style>