CSS中简单选择器，上下文选择器的实战应用随笔 - 前端开发

首页 > 博客列表 > CSS中简单选择器，上下文选择器的实战应用随笔

博主信息

博文 12

粉丝 1

访问量 11880

专题推荐

更多>

选择器:简单选择器

元素选择器：标签选择器

*:属于元素级别
优先级元素 < class < id
1、类选择器
前面是.
2、ID 选择器
前面是#号

<!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: 400px;
        height: 400px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
      }
      .item {
        font-size: 2rem;
        background-color: aquamarine;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      /* 元素选择器：标签选择器 */
      body {
        background-color: bisque;
      }
      /* 类选择器：对应HTML标签中的class属性 */
      .item {
        border: 1px solid rebeccapurple;
      }
      /* 多个类复合应用 */
      .item.center {
        background-color: rosybrown;
      }
      /* ID选择器 */
      #first {
        background-color: salmon;
      }
      /* ID,CLASS可以添加到任何元素上 */
      /* ID选择器的应用场景目前只有二种：表单元素 和 锚点 */
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item" id="first">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>

-重点内容在代码注释中

选择器:上下文选择器

<!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: 400px;
        height: 400px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
      }
      .item {
        font-size: 2rem;
        background-color: aquamarine;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      /* 1、后代选择器  空格  */
      .container div {
        border: salmon solid 1px;
      }
      /* 2、父子选择器 >  只选择body下的第一级div*/
      body > div {
        border: 5px solid coral;
      }
      /* 3、同级相邻选择器 + 同级下一个*/
      .item.center + .item {
        background-color: darkblue;
      }
      /* 4、同级所有选择器  ~  */
      .item.center ~ .item {
        background-color: darkmagenta;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">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>

-重点内容在代码注释中

5、结构伪类选择器

不分组

<!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: 400px;
        height: 400px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
      }
      .item {
        font-size: 2rem;
        background-color: aquamarine;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      /* 匹配第一个子元素 使用 > 来精确指定 */
      .container > :first-child {
        background-color: darkmagenta;
      }
      /* 最后一个子元素 */
      .container > :last-child {
        background-color: darkslategray;
      }
      /* 选择第3个 索引是从1开始，不是0 */
      .container > :nth-child(3) {
        background-color: dodgerblue;
      }
      /* 只选择偶数单元格   2n 或 even */
      .container > :nth-child(2n) {
        background-color: green;
      }
      /* 只选择奇数单元格  2n -1 或 odd */
      .container > :nth-child(2n -1) {
        background-color: lawngreen;
      }
      /* 从指定位置(从第4个)开始，选择剩下的所有有元素 */
      .container > .item:nth-child(n + 4) {
        background-color: lightgrey;
      }
      /* 只取前三个 */
      .container .item:nth-child(-n + 3) {
        background-color: lightseagreen;
      }
      /* 取最后三个 */
      .container .item:nth-last-child(-n + 3) {
        background-color: magenta;
      }
      /* 取第8个，用倒数的方式更快，直观 */
      .container .item:nth-last-child(2) {
        background-color: mediumblue;
      }
      /* n 是从0开始计算。所以： 
         n  + 4 = 4
         -n + 3 = 3     */
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">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>

-重点内容在代码注释中

分组

<!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: 400px;
        height: 400px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
      }
      .item {
        font-size: 2rem;
        background-color: aquamarine;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      /*
      分组结构伪类分二步：
      1、元素按类型进行分组
      2、在分组中根据索引进行选择
      */
      /* 在div分组中最后一个元素 */
      .container div:last-of-type {
        background-color: mediumseagreen;
      }
      /* 在span分组匹配任何一个 */
      .container span:nth-of-type(3) {
        background-color: mediumslateblue;
      }
      /* 在span分组中前3个 */
      .container span:nth-of-type(-n + 3) {
        background-color: lawngreen;
      }
      /* 在span分组中倒数2个 */
      .container span:nth-last-of-type(-n + 2) {
        background-color: lightsalmon;
      }
    </style>
  </head>
  <body>
    <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>

-重点内容在代码注释中

伪类与伪元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪类与伪元素</title>
    <style>
      /* :target: 必须ID配合，实现锚点操作 */
      /* 关掉form标签 */
      #login-form {
        display: none;
      }
      /* 当前#login-form的表单元素被A的锚点激活的时候执行 */
      #login-form:target {
        display: block;
      }
      /* :focus:当获取焦点的时候执行 */
      input:focus {
        background-color: lightsalmon;
      }
      /* ::selection: 设置焦点文本的前景色与背景色 */
      /* input可以是其它元素 如：label */
      input::selection {
        color: red;
        background-color: lime;
      }
      /* :not(): 用于选择不满足条件元素 */
      .list > *:not(:nth-of-type(3)){
          color: blue;
      }
      /* 浏览器自动补全生成的HTML称之为伪元素 是不能被选择的 */
      /* ::before 在什么之前 */
      .list::before {
          content: "购物车";
          color: blueviolet;
          font-size: 1.5rem;
          border-bottom: 1px solid lightcoral;
      }
      /* ::after: 在什么之后 */
      .list::after {
          content: "结算中。。。。";
          color: rgb(44, 22, 141);
          font-size: 1.5rem;
      }
      /* 伪元素前面是双冒号，伪类前面是单冒号 */
    </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 type="email" name="email" id="email" />
      <label for="password">密码</label>
      <input type="password" name="password" id="password" />
      <button>登录</button>
    </form>
    <hr />
    <hr />
    <ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
    </ul>
  </body>
</html>

-重点内容在代码注释中

批改老师：

WJ

批改状态：合格

老师批语：写的很认真，继续努力！

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

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

0条评论

作者最新博文

VScode与markdown的安装用法等

2020-06-11 22:29:11