Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS选择器与状态伪类，查看按钮显示隐藏内容
Blogger Information
Blog 7
fans 0
comment 0
visits 2310
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
332 people have browsed it

作业/20230118

一、基本选择器（标签 属性）

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>基本选择器</title>
  8.   </head>
  9.   <style>
  10.     /* 1.标签选择器 */
  11.     h1 {
  12.         color: blue;
  13.     }
  14.     /* 2.属性选择器 */
  15.     .attribute{
  16.         color: red;
  17.         border:2px solid red;
  18.         border-radius: 5px;
  19.     }
  20.   </style>
  21.   <body>
  22.     <h1>1.标签选择器</h1>
  23.     <hr>
  24.     <h2 class="attribute">2.属性选择器</h2>
  25.   </body>
  26. </html>

二、上下文选择器 （> 空格 + ~）

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>上下文选择器</title>
  8.   </head>
  9.   <style>
  10.     /* 父子：> */
  11.     .list > .item {
  12.         background-color: yellow;
  13.     }
  14.     /* 后代：空格 */
  15.     .Descendants .item{
  16.         border: 2px solid red;
  17.         border-radius: 5px;
  18.     }
  19.     /* 兄弟：+  找到第二个，选择第三个*/
  20.     .brother > .item.two + * {
  21.         color: blue;
  22.     }
  24.     /* 同级：~ 选择第二个，后面全部同化掉 */
  25.     .peer > .item.two ~ * {
  26.         border: 2px solid royalblue;
  27.         border-radius: 10px;
  28.      }
  30.   </style>
  31.   <body>
  32.     <!-- 父子 -->
  33.     <ul class="list">
  34.       <li class="item">item</li>
  35.       <li class="item">item</li>
  36.       <li class="item">item</li>
  37.       <li class="item">item</li>
  38.     </ul>
  40.     <!-- 后代 -->
  41.     <ul class="Descendants">
  42.         <li class="item">item1</li>
  43.         <li class="item">item2
  44.             <ul>
  45.                 <li class="item">item2-1</li>
  46.                 <li class="item">item2-2</li>
  47.                 <li class="item">item2-3</li>
  48.             </ul>
  49.         </li>
  50.         <li class="item">item3</li>
  51.     </ul>
  53.     <!-- 兄弟 -->
  54.     <ul class="brother">
  55.         <li class="item">item1</li>
  56.         <li class="item two">item2</li>
  57.         <li class="item">item3</li>
  58.         <li class="item">item4</li>
  59.     </ul>
  61.     <!-- 同级 -->
  62.     <ul class="peer">
  63.         <li class="item">item1</li>
  64.         <li class="item two">item2</li>
  65.         <li class="item">item3</li>
  66.         <li class="item">item4</li>
  67.     </ul>
  69.   </body>
  70. </html>

三、伪类选择器（）

1.:nth-child()获取元素的任意一个
2.:first-child语法糖，获取第一个
3.:last-child语法糖，获取最后一个

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>伪类选择器</title>
  8.   </head>
  9.   <style>
  10.     /* 选择第一个 */
  11.     .list > :nth-child(1) {
  12.       background-color: yellow;
  13.     }
  14.     /* 选择最后一个 */
  15.     .list > :nth-child(3) {
  16.       background-color: blue;
  17.     }
  18.     /* 选择任意一个 */
  19.     .list > :nth-child(2) {
  20.       border: 2px solid red;
  21.       border-radius: 5px;
  22.       color: red;
  23.     }
  24.     /* 第一个、最后一个可以使用语法糖 */
  25.     /* .list > :first-child {
  26.         color: red;
  27.     }
  28.     .list > :last-child {
  29.         color: red;
  30.     } */
  32.     /* 获取前四个元素 */
  33.     .example > :nth-child(-n + 4) {
  34.       color: yellow;
  35.     }
  36.     /* 获取第六个以下所有元素 */
  37.     .example > :nth-child(n + 6) {
  38.       color:blue;
  39.     }
  40.   </style>
  41.   <body>
  42.     <ul class="list">
  43.       <li>item1</li>
  44.       <li>item2</li>
  45.       <li>item3</li>
  46.     </ul>
  47.     <hr />
  48.     <ul class="example">
  49.       <li>item1</li>
  50.       <li>item2</li>
  51.       <li>item3</li>
  52.       <li>item4</li>
  53.       <li>item5</li>
  54.       <li>item6</li>
  55.       <li>item7</li>
  56.       <li>item8</li>
  57.       <li>item9</li>
  58.       <li>item10</li>
  59.     </ul>
  60.   </body>
  61. </html>
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>伪类选择器</title>
  8.   </head>
  9.   <style>
  10.     /* 获取一组元素 */
  11.     .list > :nth-child(1n + 1) {
  12.       color: blue;
  13.     }
  14.     /* 从第五个起匹配一组 */
  15.     .list > :nth-child(1n + 5) {
  16.       color: gold;
  17.     }
  18.     /* 获取单数:nth-child(odd) */
  19.     .list > :nth-child(odd) {
  20.       border-style: solid;
  21.       color: darkgrey;
  22.     }
  23.     /* 获取双数:nth-child(even) */
  24.     .list > :nth-child(even) {
  25.         text-align: center;
  26.     }
  27.   </style>
  28.   <body>
  29.     <ul class="list">
  30.       <li>item1</li>
  31.       <li>item2</li>
  32.       <li>item3</li>
  33.       <li>item4</li>
  34.       <li>item5</li>
  35.       <li>item6</li>
  36.       <li>item7</li>
  37.       <li>item8</li>
  38.       <li>item9</li>
  39.       <li>item10</li>
  40.     </ul>
  41.   </body>
  42. </html>

四、状态伪类

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <style>
  10.     /* 获取焦点改颜色 */
  11.     .username :focus {
  12.       background-color: blue;
  13.     }
  14.     /* 悬停，改颜色 */
  15.     /* .my :hover {
  16.       background-color: black;
  17.     } */
  18.     /* 禁用h2显示 */
  19.     h2 {
  20.         display: none;
  21.     }
  23.     /* 放在按钮上面显示h2内容 */
  24.     .my:hover h2 {
  25.         display: block;
  26.     }
  28.     /* 隐藏后面内容 */
  29.     .guess {
  30.       display: none;
  31.     }
  32.     /* 鼠标碰到文本框显示文字，，不知道为会在下面 */
  33.     .username:hover .guess {
  34.       display: block;
  35.     }
  36.   </style>
  37.   <body>
  38.     <div class="username">
  39.       <label for="uname">用户名：</label>
  40.       <input
  41.         type="text"
  42.         name="username"
  43.         id="uname"
  44.         placeholder="用户账户"
  45.         required/>
  46.       <label for="" class="guess">你猜我在干嘛</label>
  47.     </div>
  49.     <div class="my">
  50.       <button>查看我</button>
  51.       <h2>没有秘密！</h2>
  52.     </div>
  53.   </body>
  54. </html>
Correcting teacher：PHPzPHPz

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