选择器及伪类

1.简单选择器

• 元素选择器：选择器名和指定的html元素名不区分大小写进行匹配
• 类选择器： 用（.）来标记 ，单个元素可以拥有多个类名
• id选择器：用（#）来标记， id名称具有唯一性
• 通用选择：用（*）来标记 ，选择一个页面中所有的元素

   <style>
        /* 元素选择器 */
        h1 {
            color: red;
        }
        .example {
            color: blue;
        }
        #example {
            color: green;
        }
    </style>
    <h1>元素选择器示例</h1>
    <p class="example">类选择器</p>
    <p id='example '>id选择器</p>

---

2.后代选择器:后代选择器可以选择作为某元素后代的元素

 <style>
        /* 后代选择器 */
        .example p {
            background: hotpink;
        }
    </style>
    <div class="example">
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>

如图后代选择器选择了example下的所有P元素

3.子元素选择器 (>)：与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。

 <style>
        /* 后代选择器 */
        .example>p {
            background: hotpink;
        }
    </style>
    <div class="example">
        <p>
            1111111111
        </p>
        <div>
            <p>2222222222222</p>
        </div>
    </div>

4.相邻兄弟选择器（+）:选择紧连着另一元素后的元素，二者具有相同的父元素。只会选择一个相邻的匹配元素

   <style>
        /* 相邻兄弟选择器 */
        h1+h2 {
            background: hotpink;
        }
    </style>
    <div class="example">
        <h1>ssssssssssssssss</h1>
        <h2>s111111111111</h2>
        <h2>s2222222222222</h2>
        <div>
            <p>s33333333</p>
        </div>
    </div>

5.后续兄弟选择器（~):选取所有指定元素之后的相邻兄弟元素。

   <style>
        /* 后续兄弟选择器 */
        h1~h2 {
            background: hotpink;
        }
    </style>
    <div class="example">
        <h1>ssssssssssssssss</h1>
        <h2>s111111111111</h2>
        <p>33333333333333</p>
        <h2>s2222222222222</h2>
    </div>

---

6.结构伪类选择器

选择器	说明
:first-child	选择元素中的第一个子元素。
:last-child	选择元素的最后一个子元素。
:nth-child(n)	定位某个父元素的一个或多个特定的子元素。其中 n 为参数。（参数n的起始值为1）
:nth-of-type(n)	选择器匹配同类型中的第n个同级兄弟元素。n可以是一个数字，一个关键字，或者一个公式。

 <style>
        /* 选择第一个子元素 */
        .example :first-child {
            background: lightpink;
        }
        /* 选择最后一个子元素 */
        .example :last-child {
            background: limegreen;
        }
        /* 选偶数行 */
        .example :nth-child(2n) {
            background: rgb(69, 6, 121);
        }
        /* 选奇数数行 */
        .example :nth-child(2n-1) {
            background: rgb(0, 107, 156);
        }
        /* 选择第三个元素为起点的后面所有元素，n从0开始计数， 3为起始位置 */
        .example :nth-child(n+3) {
            background: pink;
        }
        /* 选择第三个元素为起点的前面的所有元素，n从0开始计数， 3为起始位置 */
        .example :nth-child(-n+3) {
            background: rgb(148, 1, 26);
        }
        /* 选择第一个p标签分组中 偶数行 */
        .example>p:nth-of-type(2n) {
            background: rgb(128, 128, 128);
        }
        /* 选择第一个p标签分组中 奇数行 */
        .example>p:nth-of-type(2n-1) {
            background: rgb(128, 128, 128);
        }
    </style>
    <div class="example">
        <li class="item1">1</li>
        <li class="item2">2</li>
        <li class="item3">3</li>
        <li class="item4">4</li>
        <li class="item5">5</li>
        <li class="item6">6</li>
        <p class="item7">7</p>
        <li class="item8">8</li>
        <p class="item9">9</p>
        <p class="item10">10</p>
        <p class="item11">11</p>
        <p class="item12">12</p>
        <p class="item13">13</p>
    </div>

选择器	说明
:target	用于选取当前活动的目标元素。当 URL 末尾带有锚名称 #，就可以指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。它需要一个 id 去匹配文档中的 target
:not	选择器匹配每个元素是不是指定的元素/选择器
:before	选择器向选定的元素前插入内容。使用content 属性来指定要插入的内容。
:after	选择器向选定的元素之后插入内容。 使用content 属性来指定要插入的内容。
:focus	选择器用于选择具有焦点的元素。

:target示例:

 <style>
        #example:target {
            background: lightpink;
        }
    </style>
    <a href="#example">点击为div添加背景</a>
    <div id="example">DIV</div>

:not示例:

 <style>
        /* 选择非P的元素 */
        .example :not(p) {
            color: red;
        }
    </style>
    <div class="example">
        <h1>aaaaaaaaaaa</h1>
        <p> 11111111</p>
        <p> 22222222</p>
        <div>3333333333</div>
        <a href=" " target="_blank">444444444444</a>
    </div>

:before

 <style>
        /* 在h1前面插入文字 */
        .example>h1::before {
            content: "插入文字 ";
        }
    </style>
    <div class="example">
        <h1>aaaaaaaaaaa</h1>
        <p> 11111111</p>
        <p> 22222222</p>
        <div>3333333333</div>
        <a href=" " target="_blank">444444444444</a>
    </div>

:after 示例

 <style>
       /* 在h1后面插入文字 */
        .example>h1::after {
            content: "插入文字 ";
        }
    </style>
    <div class="example">
        <h1>aaaaaaaaaaa</h1>
        <p> 11111111</p>
        <p> 22222222</p>
        <div>3333333333</div>
        <a href=" " target="_blank">444444444444</a>
    </div>

:focus 示例

  <style>
        /* 为文本框添加焦点样式 */
        input:focus {
            background: lightgreen;
        }
    </style>
    <form>
        name： <input type="text" name="name" /><br>
        gender： <input type="text" name="gender" />
    </form>