首页 > 博客列表 > 元素选择器、伪类和伪元素（:target、:focus等的）

博主信息

博文 8

粉丝 0

访问量 12310

专题推荐

更多>

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

举例一个九宫格

<!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>

批改老师：

天蓬老师

批改状态：合格

老师批语：有张图片就好了

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

a标签、列表

2020-06-27 23:18:30

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

举例一个九宫格

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

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

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

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)

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)

伪类和伪元素

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

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

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

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

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

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