【CSS】选择器

CSS选择器

我们可以将 CSS 选择器分为五类：
简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

兄弟选择器

E+F 相邻兄弟选择器 css2
选择紧贴在E后面的相邻一个兄弟元素F

<style>
    p + span{
        background-color: cyan;
    }
</style>
		<p>1</p>
    <span>我是p的兄弟</span>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>

💡执行结果截图

普通兄弟选择器

E~F 通用选择器 css3
选择E后面的所有兄弟元素F

<style>
    span ~  li{
        background-color: orange;
    }
</style>
<ul>
    <span>通用选择器</span>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

💡执行结果截图

属性选择器选择器

css2

• E[attr] 选择具有attr属性的元素E
• E[attr=“value”] 选择具有attr属性, 并且属性值是value的元素E

css3

• E[attr$=“value”] 选择具有attr属性, 并且属性值是value结尾的元素E
• E[attr^=“value”] 选择具有attr属性, 并且属性值是value开头的元素E
• E[attr*=“value”] 选择具有attr属性, 并且属性值中含有value的元素E

  <style>
    /* 具有title属性的元素 */
    [title] {
      border: 5px solid yellow;
    }

    /* 具有title属性的元素img */
    img[title] {
      border: 5px solid red;
    }

    /* 具有title属性,并且属性值是dog的元素img */
    img[title="dog"] {
      border: 5px solid pink;
    }

    /* 具有title属性,并且属性值是dog开头元素img */
    img[title^="dog"] {
      border: 5px solid green;
    }

    /* 具有title属性,并且属性值是dog结尾的元素img */
    img[title$="dog"] {
      border: 5px solid #000;
    }

    /* 具有title属性,并且属性值有dog的元素img */
    img[title*="dog"] {
      border: 5px solid orange;
    }
  </style>
  <a href="" title="">文字文字</a>
  <img src="./img/img001.jpg" alt="" title="">
  <img src="./img/img001.jpg" alt="" title="dog">
  <img src="./img/img001.jpg" alt="" title="dogcat">
  <img src="./img/img001.jpg" alt="" title="catdog">
  <img src="./img/img001.jpg" alt="" title="catdogcat">

结构伪类选择器

可以将结构伪类分为三组去记忆(只是方便记忆)
第一组:

• E:nth-child(n)同级中的第n个元素, 并且这个元素是E
• E:nth-last-child(n)同级中倒数第n个元素, 并且元素是E
• E:first-child同级中的第一个元素,并且这个元素是E
• E:last-child同级中最后一个元素,并且这个元素是E

<style>
    /* 清一色 */
    li:nth-child(3) {
      background-color: yellow;
    }

    li:nth-last-child(2) {
      background-color: blue;
    }

    li:first-child {
      background-color: green;
    }

    li:last-child {
      background-color: yellow;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

第二组:

• E:nth-of-type(n) 同级中同类型的第n个元素，并且这个元素是E
• E:nth-last-of-type(n) 同级中同类型的倒数第n个元素，并且这个元素是E
• E:first-of-type 同级中同类型的第1个元素，并且这个元素是E
• E:last-of-type 同级中同类型的最后个元素，并且这个元素是E
• E:only-of-type 同级中同类型的唯一一个元素，并且这个元素是E

<style>
    /* 混搭 */
    p:nth-of-type(3) {
      background-color: red;
    }
    p:nth-last-of-type(1) {
      background-color: pink;
    }
    a:first-of-type {
      background-color: green;
    }
    a:last-of-type {
      background-color: yellow;
    }
    b:only-of-type {
      background-color: cyan;
    }
</style>

第三组:

• :root 选择根元素 html
• :empty 选择空元素
• E:only-child 同级中唯一一个元素，并且这个元素是E

<style>
    :root{
      background-color: pink;
    } 
    /* html{
      background-color: pink;
    } */
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }

    /* 丁克 */
    div:empty {
      border: 5px solid #000;
    }

    /* 独生子 */
    div:only-child {
      border: 5px solid red;
    }
  </style>

目标伪类选择器

E:target 选择锚点元素, 锚点必须处于激活状态, 元素是E

<style>
    div {
      width: 200px;
      height: 200px;
      border: 3px solid #000;
      float: left;
      font-size: 28px;
      text-align: center;
      line-height: 200px;
    }
    /* div这个锚点处于激活状态的时候 */
    div:target {
      background-color: pink;
    }
</style>
  <a href="#box1">box1</a>
  <a href="#box2">box2</a>
  <a href="#box3">box3</a>

  <div id="box1">1</div>
  <div id="box2">2</div>
  <div id="box3">3</div>

UI状态伪类选择器

• E:enabled 元素处于可用状态----表单控件可以用
• E:disabled 元素处于禁用状态----表单控件可以用，元素要设置disabled属性
• E:checked 元素处于选中状态—单选 多选

<style>
    input[type="text"]:enabled {
      background-color: pink;
    }

    input[type="password"]:disabled {
      background-color: yellow;
    }

    input[type="checkbox"]:checked {
      width: 200px;
      height: 200px;
    }
</style>
  <p>
    <input type="text">
    <input type="password" disabled>
  </p>
  <p>
    <input type="checkbox">苹果
    <input type="checkbox">香蕉
    <input type="checkbox">菠萝蜜
  </p>

否定伪类选择器

• E:not(val) 选中不是val选择器的元素E

<style>
    li {
      width: 400px;
      height: 40px;
      line-height: 40px;
    }

    li:not(:last-of-type) {
      border-bottom: 1px solid #000;
    }
</style>
<ul>
    <li>文本文本文本</li>
    <li>文本文本文本</li>
    <li>文本文本文本</li>
    <li>文本文本文本</li>
    <li>文本文本文本</li>
</ul>