703 css复合选择器：属性，后代，子选择器，相邻兄弟，全体兄弟，交集，并集，动态伪类，结构伪类，伪元素

2021-08-04 01:57:14

属性选择器（attribute selectors） - [att]

703 css复合选择器：属性，后代，子选择器，相邻兄弟，全体兄弟，交集，并集，动态伪类，结构伪类，伪元素

属性选择器 - [att=val]

703 css复合选择器：属性，后代，子选择器，相邻兄弟，全体兄弟，交集，并集，动态伪类，结构伪类，伪元素

属性选择器 - [attr*=val]

703 css复合选择器：属性，后代，子选择器，相邻兄弟，全体兄弟，交集，并集，动态伪类，结构伪类，伪元素

属性选择器 - [attr^=val]

703 css复合选择器：属性，后代，子选择器，相邻兄弟，全体兄弟，交集，并集，动态伪类，结构伪类，伪元素

属性选择器 - [attr|=val]

703 css复合选择器：属性，后代，子选择器，相邻兄弟，全体兄弟，交集，并集，动态伪类，结构伪类，伪元素

属性选择器 - [attr~=val]

703 css复合选择器：属性，后代，子选择器，相邻兄弟，全体兄弟，交集，并集，动态伪类，结构伪类，伪元素

属性选择器 - [attr$=val]

703 css复合选择器：属性，后代，子选择器，相邻兄弟，全体兄弟，交集，并集，动态伪类，结构伪类，伪元素

01_属性选择器.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      [title] {
        color: #f00;
      }

      /* [title="div元素"] {
            font-size: 25px;
        } */

      [title=‘one div元素‘] {
        font-size: 25px;
      }

      /* 了解一下 */
      /* title中包含one单词 */
      [title*=‘one‘] {
        background-color: #00f;
      }

      /* title以one开头 */
      /* [title^="one"] {
            background-color: #00f;
        } */

      /* title以one结束 */
      /* [title$="one"] {
            background-color: #00f;
        } */
    </style>
  </head>
  <body>
    <div title="one div元素">我是div元素</div>
    <p title="p元one素">我是p元素</p>
    <p title="p one">我是p元素</p>
    <p>我也是p元素</p>
    <span title="one span元素">我是span元素</span>
  </body>
</html>
```

---

## 后代选择器（descendant combinator）
![](https://img2020.cnblogs.com/blog/1877004/202108/1877004-20210809202227992-884761087.png)

![](https://img2020.cnblogs.com/blog/1877004/202108/1877004-20210809202253633-1351191231.png)

---

## 02_后代选择器(最重要).html
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      /* 后代选择器 */
      /* 选中 div下面的span元素(直接子元素和间接后代元素) */
      /* div span {
            color: #f00;
        } */

      div p span {
        color: #f00;
      }
    </style>
  </head>
  <body>
    <span>文字内容1</span>
    <div>
      <span>文字内容2</span>
      <p>
        <span>文字内容3</span>
      </p>
      <div>
        <span>文字内容4</span>
      </div>
      <span>文字内容5</span>
    </div>
    <div>
      <a href="#">
        <span>文字内容6</span>
      </a>
    </div>
  </body>
</html>
```

---

## 子选择器（child combinators）
![](https://img2020.cnblogs.com/blog/1877004/202108/1877004-20210809202354565-1321153696.png)

![](https://img2020.cnblogs.com/blog/1877004/202108/1877004-20210809202407057-1157006182.png)

---

## 03_子代选择器(重要).html
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      div > span {
        color: red;
      }

      p > div {
        color: red;
      }

      .box > span {
        font-size: 30px;
      }

      .box > .title {
        background-color: #00f;
      }
    </style>
  </head>
  <body>
    <span>文字内容1</span>
    <div class="box">
      <span>文字内容2</span>
      <p>
        <span>文字内容3</span>
      </p>
      <div>
        <span>文字内容4</span>
      </div>
      <span class="title">文字内容5</span>
      <div class="title">呵呵呵呵呵</div>
    </div>
    <div>
      <a href="#">
        <span>文字内容6</span>
      </a>
    </div>

    <!-- <p>
        <div>哈哈哈哈</div>
    </p> -->
  </body>
</html>
```

---

## 相邻兄弟选择器（adjacent sibling combinator）
![](https://img2020.cnblogs.com/blog/1877004/202108/1877004-20210809202552858-761799819.png)

---

## 04_相邻兄弟选择器.html
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div + p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>文字内容0</p>
    <div>
      <p>文字内容1</p>
    </div>
    <p>文字内容2</p>
    <p>文字内容3</p>
    <div></div>
    <p>文字内容4</p>
  </body>
</html>
```

---

## 全体兄弟选择器（general sibling combinator）
![](https://img2020.cnblogs.com/blog/1877004/202108/1877004-20210809202645205-1507996490.png)

---

## 05_全兄弟选择器.html
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div ~ p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>文字内容0</p>
    <div>
      <p>文字内容1</p>
    </div>
    <p>文字内容2</p>
    <p>文字内容3</p>
    <div></div>
    <p>文字内容4</p>
  </body>
</html>
```

---

## 选择器组 - 交集选择器
![](https://img2020.cnblogs.com/blog/1877004/202108/1877004-20210809202735909-981912384.png)

---

## 06_交集选择器(重要).html
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      /* div {
            color: red;
        }

        .one {
            color: red;
        } */

      /* 文字1和文字4变成红色 */
      /* div.one {
            color: red;
        } */

      /* 文字2和文字4变成红色 */
      .one[title=‘text‘] {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="one">文字内容1</div>
    <p class="one" title="text">文字内容2</p>
    <span class="one">文字内容3</span>
    <div class="one" title="text">文字内容4</div>
    <div title="text">文字内容5</div>
  </body>
</html>
```

---

## 选择器组 - 并集选择器
![](https://img2020.cnblogs.com/blog/1877004/202108/1877004-20210809202831619-915282956.png)

---

## 选择器组 - 交集、并集选择器对比
![](https://img2020.cnblogs.com/blog/1877004/202108/1877004-20210809202925235-1526992675.png)

---

## 练习
![](https://img2020.cnblogs.com/blog/1877004/202108/1877004-20210809202950279-1619501433.png)

---

## 07_并集选择器(重要).html
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div,
      .one,
      [title] {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>文字内容1</div>
    <span class="one">文字内容2</span>
    <p title="text">文字内容3</p>
    <strong class="one">文字内容4</strong>
    <a href="#" class="one">文字内容5</a>
    <div>文字内容6</div>

    <div></div>
  </body>
</html>
```

---

## 伪类（pseudo-classes）
![](https://img2020.cnblogs.com/blog/1877004/202108/1877004-20210809203059594-1877623754.png)

---

## 08_伪类_目标伪类.html
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      :target {
        color: red;
      }
    </style>
  </head>
  <body>
    <a href="#title1">标题1</a>
    <a href="#title2">标题2</a>
    <a href="#title3">标题3</a>

    <h2 id="title1">标题1</h2>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <p>我是内容1</p>
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />

    <h2 id="title2">标题2</h2>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <p>我是内容2</p>
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />

    <h2 id="title3">标题3</h2>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <p>我是内容3</p>
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
  </body>
</html>
```

---

## 09_伪类_元素状态伪类.html
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      button {
        background-color: #f00;
      }

      /* button[disabled] {
            color: red;
        } */

      :disabled {
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- enable -> disable(不可用) -->
    <button disabled>我是按钮</button>
    <button>我是按钮</button>

    <a href="#">百度一下</a>
  </body>
</html>
```

---

## 动态伪类（dynamic pseudo-classes）
![](https://img2020.cnblogs.com/blog/1877004/202108/1877004-20210809203242115-1470738576.png)

---

## 动态伪类 - :focus
![](https://img2020.cnblogs.com/blog/1877004/202108/1877004-20210809203433183-1191353435.png)

---

## 去除a元素默认的:focus效果
![](https://img2020.cnblogs.com/blog/1877004/202108/1877004-20210809203446042-1919473882.png)

---

## 细节
![](https://img2020.cnblogs.com/blog/1877004/202108/1877004-20210809203504687-1049862052.png)

---

## 10_伪类_动态伪类.html
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      /* 未访问状态 */
      a:link {
        color: red;
      }

      /* 已经访问过 */
      a:visited {
        color: green;
      }

      /* 手指(鼠标)放上去 */
      a:hover {
        color: blue;
      }

      /* 手指点下去, 未松手 */
      a:active {
        color: orange;
      }

      a {
        color: red;
      }

      /* 2.hover/active应用到其他元素 */
      strong:hover {
        background-color: purple;
      }

      strong:active {
        font-size: 40px;
      }

      /* 3.focus的使用 */
      input:focus {
        background-color: #f00;
      }

      a:focus {
        /* background-color: #ff0; */
      }

      /* 4.去掉a元素的焦点状态 */
      /* a:focus {
            outline: none;
        } */
    </style>
  </head>
  <body>
    <!-- 1.lv ha -> a元素上 -->
    <!-- tabindex可以调整tab选中元素的顺序 -->
    <a tabindex="-1" href="#">Google一下</a>

    <!-- 2.hover/active -->
    <strong>我是strong元素</strong>

    <!-- 3.focus -->
    <input type="text" />
  </body>
</html>
```

---

## 11_伪类_已访问的链接.html
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      a:visited {
        color: red;
      }
    </style>
  </head>
  <body>
    <a href="#">百度一下</a>
    <a href="#123">京东一下</a>
    <a href="#321">淘宝一下</a>
  </body>
</html>
```

---

## 结构伪类(structural pseudo-classes) - :nth-child()
![](https://img2020.cnblogs.com/blog/1877004/202108/1877004-20210809204008172-900104802.png)

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

## 

---

703 css复合选择器：属性，后代，子选择器，相邻兄弟，全体兄弟，交集，并集，动态伪类，结构伪类，伪元素

上一篇：chrome浏览器（block）屏蔽http文件下载，如何解除？


下一篇：JVM解毒——JVM与Java体系结构