简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >上下文、结构伪类选择器以及target, not, before, after, focus标签用法-web前端第4章6.15

上下文、结构伪类选择器以及target, not, before, after, focus标签用法-web前端第4章6.15

希望
希望原创
2020年06月16日 18:37:58781浏览

1.使用九宫格来演示选择第1个和中间那个

上下文选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>选择器：简单选择器</title>
  7.     <style>
  8.       /* 使用九宫格来演示: grid布局实现 */
  9.       .container {
  10.         width: 300px;
  11.         height: 300px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  16.       .item {
  17.         font-size: 2rem;
  18.         background-color: lightskyblue;
  19.         display: flex;
  20.         justify-content: center;
  21.         align-items: center;
  22.       }
  24.       /* 类选择器：对应html标签中的class属性 */
  25.       .item {
  26.         border: 2px solid #000;
  27.       }
  28.       /* 多个类复合应用中间没有空格：.item.center */
  29.       .item.center {
  30.         background-color: lime;
  31.       }
  33.       /* 层叠样式表，相同元素，后面追加的样式会覆盖前面的样式 */
  34.       *#first {
  35.         background-color: maroon;
  36.       }
  38.       /* 元素 < class < id
  39.       id，class可以添加到任何元素上，所以可以省略*号 */
  40.       /* id 选择器的应用场景目前主要用在：表单元素、锚点 */
  41.     </style>
  42.   </head>
  43.   <body>
  44.     <div class="container">
  45.       <div class="item" id="first">1</div>
  46.       <div class="item">2</div>
  47.       <div class="item">3</div>
  48.       <div class="item">4</div>
  49.       <div class="item center">5</div>
  50.       <div class="item">6</div>
  51.       <div class="item">7</div>
  52.       <div class="item">8</div>
  53.       <div class="item">9</div>
  54.     </div>
  55.   </body>
  56. </html>

2.使用九宫格来演示结构伪类选择器（不分组与分组）:123为div一组，456789为span另一组

结构伪类选择器不分组与分组

  • 先把9个全部选上给同样的颜色
  • 再在第二组里选择第3个
  • 在第二组里选择前2个
  • 在第二组里选择后2个

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>结构伪类选择器:分组</title>
  7.     <style>
  8.       /* 使用九宫格来演示: grid布局实现 */
  9.       .container {
  10.         width: 300px;
  11.         height: 300px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  16.       .item {
  17.         font-size: 2rem;
  18.         background-color: lightskyblue;
  19.         display: flex;
  20.         justify-content: center;
  21.         align-items: center;
  22.       }
  23.       /* 分组结构伪类：1.元素按类型进行分组；2.在分组中根据索引进行选择 */
  24.       /* .container span:last-of-type {
  25.         background-color: tomato;
  26.       } */
  27.       /* 在div分组中选择第3个 */
  28.       .container div:nth-of-type(3) {
  29.         background-color: steelblue;
  30.       }
  31.       /* 在span分组中选择第3个 */
  32.       .container span:nth-of-type(3) {
  33.         background-color: slateblue;
  34.       }
  36.       /* 拿前2个 */
  37.       .container span:nth-of-type(-n + 2) {
  38.         background-color: springgreen;
  39.       }
  41.       /* 最后2个 */
  42.       .container span:nth-last-of-type(-n + 2) {
  43.         background-color: wheat;
  44.       }
  45.     </style>
  46.   </head>
  47.   <body>
  48.     <div class="container">
  49.       <div class="item">1</div>
  50.       <div class="item">2</div>
  51.       <div class="item">3</div>
  53.       <span class="item">4</span>
  54.       <span class="item">5</span>
  55.       <span class="item">6</span>
  56.       <span class="item">7</span>
  57.       <span class="item">8</span>
  58.       <span class="item">9</span>
  59.     </div>
  60.   </body>
  61. </html>

3.用登录和列表来演示:target, :not(), ::before, ::after, :focus

  • :target:锚点激活
  • :focus:当获取焦点的时候执行
  • :not():用于选择不满足条件元素
  • ::before：在什么之前生成
  • ::after:在什么之后生成
  • :focus:当获取焦点的时候执行

focus
focus
selection:设置选中文本的前景色与背景色

" class="reference-link">:not, :before, :after

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>伪类与伪元素</title>
  7.     <style>
  8.       #login-form {
  9.         display: none;
  10.       }
  11.       /* :target: 必须id配合，实现锚点操作 */
  12.       /* 当前#login-form的表单元素被a的锚点激活的时候执行 */
  13.       #login-form:target {
  14.         display: block;
  15.       }
  16.       /* :focus:当获取焦点的时候执行 */
  17.       input:focus {
  18.         background-color: tan;
  19.       }
  20.       /* ::selection:设置选中文本的前景色与背景色 */
  21.       input::selection {
  22.         color: thistle;
  23.         background-color: tomato;
  24.       }
  25.       /* :not():用于选择不满足条件元素 */
  26.       .list > :not(:nth-of-type(3)) {
  27.         color: red;
  28.       }
  29.       /* ::before：在什么之前生成 */
  30.       .list::before {
  31.         content: "购物车";
  32.         color: royalblue;
  33.         font-size: 1.5rem;
  34.         border-bottom: 1px solid#000;
  35.       }
  36.       /* ::after:在什么之后生成 */
  37.       .list::after {
  38.         content: "结算中...";
  39.         color: salmon;
  40.         font-size: 1.1rem;
  41.       }
  42.     </style>
  43.   </head>
  44.   <body>
  45.     <!-- <a href="#login-form">我要登录：</a> -->
  46.     <button onclick="location=`#login-form`">点击登录</button>
  47.     <form action="" method="post" id="login-form">
  48.       <label for="email">邮箱:</label>
  49.       <input type="email" name="email" id="email" />
  50.       <label for="password">密码:</label>
  51.       <input type="password" name="password" id="password" />
  52.       <button>登录</button>
  53.     </form>
  54.     <hr />
  55.     <ul class="list">
  56.       <li>item</li>
  57.       <li>item</li>
  58.       <li>item</li>
  59.       <li>item</li>
  60.     </ul>
  61.   </body>
  62. </html>
上一条：php curl采集JD用户评论下一条：php ODBC
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多