search

博客列表 >CSS选择器与状态伪类，查看按钮显示隐藏内容

CSS选择器与状态伪类，查看按钮显示隐藏内容

阿辉
阿辉原创
2023年01月19日 19:28:14331浏览

作业/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>
上一条：内联框架的简单练手下一条：课程表和注册表单
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多