Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS中简单选择器，上下文选择器的实战应用随笔
Blogger Information
Blog 12
fans 1
comment 0
visits 9538
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS中简单选择器，上下文选择器的实战应用随笔
浪子修罗记录有趣的事
Original
904 people have browsed it

选择器:简单选择器

元素选择器：标签选择器

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

  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: 400px;
  11.         height: 400px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  16.       .item {
  17.         font-size: 2rem;
  18.         background-color: aquamarine;
  19.         display: flex;
  20.         justify-content: center;
  21.         align-items: center;
  22.       }
  23.       /* 元素选择器：标签选择器 */
  24.       body {
  25.         background-color: bisque;
  26.       }
  27.       /* 类选择器：对应HTML标签中的class属性 */
  28.       .item {
  29.         border: 1px solid rebeccapurple;
  30.       }
  31.       /* 多个类复合应用 */
  32.       .item.center {
  33.         background-color: rosybrown;
  34.       }
  35.       /* ID选择器 */
  36.       #first {
  37.         background-color: salmon;
  38.       }
  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>

-重点内容在代码注释中

选择器:上下文选择器

  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: 400px;
  11.         height: 400px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  16.       .item {
  17.         font-size: 2rem;
  18.         background-color: aquamarine;
  19.         display: flex;
  20.         justify-content: center;
  21.         align-items: center;
  22.       }
  23.       /* 1、后代选择器  空格  */
  24.       .container div {
  25.         border: salmon solid 1px;
  26.       }
  27.       /* 2、父子选择器 >  只选择body下的第一级div*/
  28.       body > div {
  29.         border: 5px solid coral;
  30.       }
  31.       /* 3、同级相邻选择器 + 同级下一个*/
  32.       .item.center + .item {
  33.         background-color: darkblue;
  34.       }
  35.       /* 4、同级所有选择器  ~  */
  36.       .item.center ~ .item {
  37.         background-color: darkmagenta;
  38.       }
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <div class="container">
  43.       <div class="item">1</div>
  44.       <div class="item">2</div>
  45.       <div class="item">3</div>
  46.       <div class="item">4</div>
  47.       <div class="item center">5</div>
  48.       <div class="item">6</div>
  49.       <div class="item">7</div>
  50.       <div class="item">8</div>
  51.       <div class="item">9</div>
  52.     </div>
  53.   </body>
  54. </html>

-重点内容在代码注释中

5、结构伪类选择器

不分组
  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: 400px;
  11.         height: 400px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  16.       .item {
  17.         font-size: 2rem;
  18.         background-color: aquamarine;
  19.         display: flex;
  20.         justify-content: center;
  21.         align-items: center;
  22.       }
  23.       /* 匹配第一个子元素 使用 > 来精确指定 */
  24.       .container > :first-child {
  25.         background-color: darkmagenta;
  26.       }
  27.       /* 最后一个子元素 */
  28.       .container > :last-child {
  29.         background-color: darkslategray;
  30.       }
  31.       /* 选择第3个 索引是从1开始，不是0 */
  32.       .container > :nth-child(3) {
  33.         background-color: dodgerblue;
  34.       }
  35.       /* 只选择偶数单元格   2n 或 even */
  36.       .container > :nth-child(2n) {
  37.         background-color: green;
  38.       }
  39.       /* 只选择奇数单元格  2n -1 或 odd */
  40.       .container > :nth-child(2n -1) {
  41.         background-color: lawngreen;
  42.       }
  43.       /* 从指定位置(从第4个)开始，选择剩下的所有有元素 */
  44.       .container > .item:nth-child(n + 4) {
  45.         background-color: lightgrey;
  46.       }
  47.       /* 只取前三个 */
  48.       .container .item:nth-child(-n + 3) {
  49.         background-color: lightseagreen;
  50.       }
  51.       /* 取最后三个 */
  52.       .container .item:nth-last-child(-n + 3) {
  53.         background-color: magenta;
  54.       }
  55.       /* 取第8个，用倒数的方式更快，直观 */
  56.       .container .item:nth-last-child(2) {
  57.         background-color: mediumblue;
  58.       }
  59.       /* n 是从0开始计算。所以： 
  60.          n  + 4 = 4
  61.          -n + 3 = 3     */
  62.     </style>
  63.   </head>
  64.   <body>
  65.     <div class="container">
  66.       <div class="item">1</div>
  67.       <div class="item">2</div>
  68.       <div class="item">3</div>
  69.       <div class="item">4</div>
  70.       <div class="item">5</div>
  71.       <div class="item">6</div>
  72.       <div class="item">7</div>
  73.       <div class="item">8</div>
  74.       <div class="item">9</div>
  75.     </div>
  76.   </body>
  77. </html>

-重点内容在代码注释中

分组
  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: 400px;
  11.         height: 400px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  16.       .item {
  17.         font-size: 2rem;
  18.         background-color: aquamarine;
  19.         display: flex;
  20.         justify-content: center;
  21.         align-items: center;
  22.       }
  23.       /*
  24.       分组结构伪类分二步：
  25.       1、元素按类型进行分组
  26.       2、在分组中根据索引进行选择
  27.       */
  29.       /* 在div分组中最后一个元素 */
  30.       .container div:last-of-type {
  31.         background-color: mediumseagreen;
  32.       }
  33.       /* 在span分组匹配任何一个 */
  34.       .container span:nth-of-type(3) {
  35.         background-color: mediumslateblue;
  36.       }
  37.       /* 在span分组中前3个 */
  38.       .container span:nth-of-type(-n + 3) {
  39.         background-color: lawngreen;
  40.       }
  41.       /* 在span分组中倒数2个 */
  42.       .container span:nth-last-of-type(-n + 2) {
  43.         background-color: lightsalmon;
  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>

-重点内容在代码注释中

伪类与伪元素

  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.       /* :target: 必须ID配合，实现锚点操作 */
  9.       /* 关掉form标签 */
  10.       #login-form {
  11.         display: none;
  12.       }
  13.       /* 当前#login-form的表单元素被A的锚点激活的时候执行 */
  14.       #login-form:target {
  15.         display: block;
  16.       }
  17.       /* :focus:当获取焦点的时候执行 */
  18.       input:focus {
  19.         background-color: lightsalmon;
  20.       }
  22.       /* ::selection: 设置焦点文本的前景色与背景色 */
  23.       /* input可以是其它元素 如：label */
  24.       input::selection {
  25.         color: red;
  26.         background-color: lime;
  27.       }
  28.       /* :not(): 用于选择不满足条件元素 */
  29.       .list > *:not(:nth-of-type(3)){
  30.           color: blue;
  31.       }
  32.       /* 浏览器自动补全生成的HTML称之为伪元素 是不能被选择的 */
  33.       /* ::before 在什么之前 */
  34.       .list::before {
  35.           content: "购物车";
  36.           color: blueviolet;
  37.           font-size: 1.5rem;
  38.           border-bottom: 1px solid lightcoral;
  40.       }
  41.       /* ::after: 在什么之后 */
  43.       .list::after {
  44.           content: "结算中。。。。";
  45.           color: rgb(44, 22, 141);
  46.           font-size: 1.5rem;
  48.       }
  49.       /* 伪元素前面是双冒号，伪类前面是单冒号 */
  50.     </style>
  51.   </head>
  52.   <body>
  53.     <a href="#login-form">点我显示登录</a>
  54.     <button onclick="location='#login-form'">点我登录</button>
  55.     <form action="" method="POST" id="login-form">
  56.       <label for="email">邮箱</label>
  57.       <input type="email" name="email" id="email" />
  58.       <label for="password">密码</label>
  59.       <input type="password" name="password" id="password" />
  60.       <button>登录</button>
  61.     </form>
  62.     <hr />
  63.     <hr />
  64.     <ul class="list">
  65.       <li>item1</li>
  66.       <li>item2</li>
  67.       <li>item3</li>
  68.       <li>item4</li>
  69.     </ul>
  70.   </body>
  71. </html>

-重点内容在代码注释中

Correcting teacher：WJWJ

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