Community Learn Tools Library Leisure

English

Home > List of blog posts > 元素选择器、伪类和伪元素（:target、:focus等的）

Blogger Information

Blog 8

fans 0

comment 0

visits 8398

Special Recommendation

More>

Related recommendations

元素选择器：简单选择器、上下文选择器、伪类选择器

举例一个九宫格

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>简单选择器</title>
    <style>
      /* 使用九宫格来演示: grid布局实现 */
      .container {
        width: 300px;
        height: 300px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
      }
      .item {
        font-size: 2rem;
        background-color: lightskyblue;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <!-- 快捷方式 .container>.item{$}*9 -->
    <div class="container">
      <div class="item" id="one">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item center">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </body>
</html>

1.简单选择器：标签选择器、id选择器、类选择器

优先级：tag<class <id 而*属于元素级别

 /*1.标签选择器 */
      body {
        background-color: antiquewhite;
      }
      /* 2.类选择器：对应着html中的class属性*/
      .item {
        background-color: aquamarine;
      }
      /*类名有两个的选择器  */
      .item.center {
        background-color: seagreen;
      }
      /* 3.id选择器：对应着html中的id属性 */
      /* id选择器目前用于二种场景：form表单 和 锚点 */
      /* 第一个 */
      #one {
        background-color: sienna;
      }
      /* #one和.item前面并没有指定标签，默认就是*,  *#one和*.item*/
      /* 层叠样式表， 相同元素，后面追加的样式会覆盖前面的样式*/
      *#one {
        background-color: slateblue;
      }
      /* 样式会发生改变，则说明 类的优先级大于*  即class>* */
      .item#one {
        background-color: firebrick;
      }
      /* 样式会发生改变 ，因为id的优选级别大于class类，即id>class */
      #one.item {
        background: navy;
      }
      /* * :属于元素级别 */
      /* 简单选择器的优先级 ：* < class < id  */

2.上下文选择器：后代选择器（空格）、父子选择器（>）、同级相邻选择器(+)、同级所有选择器(~)

 /* 1.后代选择器: 使用空格 选择.container 下面的所有div标签*/
      .container div {
        border: 3px solid #000;
      }
      /* 2.父子选择器 ： >*/
      body > div {
        border: 5px solid coral;
      }
      /* 3.同级别相邻选择器 ：  +   选择最近的且在html中位于选中元素的下方*/
      /* 给6添加样式 */
      .item.center + .item {
        background-color: palegreen;
      }
      /* 4.统计所有选择器：~  选择选中元素在html下面的所有同级元素 */
      /* 给 6，7，8，9添加样式 */
      .item.center ~ .item {
        background-color: peru;
      }

3.伪类选择器:不分组和分组

A、分组

（1）匹配第一个元素：:first-child

（2）匹配最后一个元素：：last-child

（3）匹配任意一个元素：：nth-child（n）、:nth-last-child（n） n从1开始当n表示表达式的时候从0开始即:nth-child（n+1）

（4）匹配基数单元格：:nth-child(2n)和:nth-child(even)

（5）匹配偶数单元格：:nth-child(2n-1)和:nth-child(odd)

/* 匹配.container下的第一个子元素  */
      .container > .item:first-child {
        background-color: seagreen;
      }
      /* 匹配.container下的最后一个子元素 */
      .container > .item:last-child {
        background-color: sandybrown;
      }
      /* 匹配.container下的任意一个子元素 :nth-child(n) 在css中 索引是以1开始*/
      .container > .item:nth-child(3) {
        background-color: slateblue;
      }
      /* 只是选择偶数个的单元格 2种方式  :nth-child(2n) 和 :nth-child(even) */
      .container > .item:nth-child(2n) {
        background: pink;
      }
      .container > .item:nth-child(even) {
        background-color: seagreen;
      }
      /* 只是选择基数个的单元格 2种方式  :nth-child(2n-1) 和 :nth-child(odd) */
      .container > .item:nth-child(2n-1) {
        background: springgreen;
      }
      .container > .item:nth-child(odd) {
        background: steelblue;
      }
      /* 从指定定位置开始：:nth-child(n + 4) 此时n是从0开始，从4开始包括第四个选择剩下所有的元素 */
      .container > .item:nth-child(n + 4) {
        background-color: blanchedalmond;
      }
      /* 选择前三个元素 :nth-child(-n + 3) n从0开始 */
      /* -0 + 3 = 3
      -1 + 3 = 2
      -2 + 3 = 1 */
      .container > .item:nth-child(-n + 3) {
        background-color: lavender;
      }
      /* 选择最后三个元素 */
      .container > .item:nth-last-child(-n + 3) {
        background-color: lavender;
      }
      /* 取第八个即倒数第二个  用倒数的方式更加直观*/
      .container > .item:nth-last-child(2) {
        background-color: coral;
      }

B.分组

（1）匹配指定类型的第一个元素：:first-of-type

（2）匹配指定类型最后一个元素：:last-of-type

（3）匹配任意一个元素：:nth-of-type(3)）、:nth-last-of-type n从1开始当n表示表达式的时候从0开始即:nth-last-of-type(-n + 2)

（4）匹配基数院：:nth-of-type(2n)和:nth-of-type(even)

（5）匹配偶数单元格：:nth-of-type(2n-1)和:nth-of-type(odd)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪类选择器：分组（区分元素类型）</title>
    <style>
      /* 使用九宫格来演示: grid布局实现 */
      .container {
        width: 300px;
        height: 300px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
      }
      .item {
        font-size: 2rem;
        background-color: lightskyblue;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      /* 分两步：1. 元素按类型进行分组
      2. 在分组中根据索引进行选择 */
      /* 匹配分组中div的第一个 需要制定类型即div  还是 span  不指定或者填写item 则会选中div和span的第一个元素 */
      .container > div:first-of-type {
        background-color: #fff;
      }
      /* 匹配分组中的span最后一个元素 */
      .container > span:last-of-type {
        background-color: peru;
      }
      /* 匹配sapn中的任意一个元素 n从1开始 */
      .container > span:nth-of-type(3) {
        background-color: seagreen;
      }
      /* 匹配span中前三个元素  n从0考试*/
      .container > span:nth-of-type(-n + 3) {
        background-color: red;
      }
      /* 匹配span中的最后两个元素 */
      .container > span:nth-last-of-type(-n + 2) {
        background-color: sandybrown;
      }
    </style>
  </head>
  <body>
    <!-- 快捷方式 .container>.item{$}*9 -->
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <!-- 上下分组 -->
      <span class="item">4</span>
      <span class="item">5</span>
      <span class="item">6</span>
      <span class="item">7</span>
      <span class="item">8</span>
      <span class="item">9</span>
    </div>
  </body>
</html>

伪类和伪元素

伪类前面是双冒号：例如 ::selection、::before、::after

为元素前面是单冒号：例如 :target、:focus、:not( )

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪类和伪元素</title>
    <style>
      /* 隐藏登陆菜单 */
      #login-form {
        display: none;
      }
      /* 去掉下划线 */
      a {
        text-decoration: none;
      }
      /* :target: 必须id配合，实现锚点操作 */
      /* 当前#login-form的表单元素被a的锚点激活的时候执行, 激活的时候出现表单 */
      #login-form:target {
        display: block;
      }
      /* :focus 获取焦点 */
      input:focus {
        background-color: seashell;
      }
      /* :::selection 选中文本的时候背景色 */
      li input::selection {
        background-color: seagreen;
      }
      /* :not( )  用于不满足条件元素 */
      .list > li:not(:nth-of-type(3)) {
        color: red;
      }
      /* ::before  在什么之前生成元素*/
      .list::before {
        content: "购物车";
        color: blue;
        font-size: 1.2rem;
      }
      /* ::after 在什么之后产生 */
      .list::after {
        content: "结算中";
        color: seagreen;
      }
    </style>
  </head>
  <body>
    <a href="#login-form">我要登陆</a>
    <!-- <button onclick="location='#login-form'">点击登录</button> -->
    <form action="" method="POST" id="login-form">
      <label for="email">邮箱：</label>
      <input id="email" name="emial" type="email" />
      <lable for="passwotd">密码：</lable>
      <input type="password" name="password" name="password" />
      <button>登陆</button>
    </form>
    <hr />
    <ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
    </ul>
  </body>
</html>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：有张图片就好了

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

a标签、列表

2020-06-27 23:18:30