search

博客列表 >Css伪类选择器简单应用

Css伪类选择器简单应用

远方
远方原创
2023年01月25日 11:27:18683浏览

简介：文章主要介绍了css 上下文选择器、伪类选择器的应用。

css 上下文选择器

源码附图

附图1

源码示例

  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>CSS选择器</title>
  8.     <style>
  9.         /* 上下文选择器-父子关系匹配 */
  10.         .list>li{
  11.             color:#ff9999;
  12.         }
  13.         /* css上下文选择器-后代关系匹配 */
  14.         .list2 li{
  15.             color:#8361ff;
  16.         }
  17.         /* css上下文选择器-兄弟关系匹配 */
  18.         .list3 > .item.start + .item {
  19.             color:#ff0000;
  20.             background-color: #f9f9f9;
  21.         }
  22.         /* css上下文选择器-同级关系匹配 */
  23.         .list5 > .item.startx ~ .item {
  24.             color:#00ffb3;
  25.             background-color: #f9f9f9;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <section data-name="shang-xia-wen-xuan-ze-qi">
  31.         <hr>
  32.         <h2>css上下文选择器-父子关系匹配 </h2>
  33.         <ul class="list">
  34.             <li>item1</li>
  35.             <li>item2</li>
  36.             <li>item3</li>
  37.             <li>items</li>
  38.             <li>item5</li>
  39.         </ul>
  40.         <hr>
  41.         <hr>
  42.         <h2>css上下文选择器-后代关系匹配 </h2>
  43.         <ul class="list2">
  44.             <li>item1</li>
  45.             <li>item2</li>
  46.             <li>item3</li>
  47.             <li>items</li>
  48.             <li>item5</li>
  49.         </ul>
  50.         <hr>
  51.         <hr>
  52.         <h2>css上下文选择器-兄弟关系匹配 </h2>
  53.         <ul class="list3">
  54.             <li class="item">item1</li>
  55.             <li class="item">item2</li>
  56.             <li class="item start">item3</li>
  57.             <li class="item">items</li>
  58.             <li class="item">item5</li>
  59.         </ul>
  60.         <hr>
  61.         <hr>
  62.         <h2>css上下文选择器-同级关系匹配 </h2>
  63.         <ul class="list5">
  64.             <li class="item">item1</li>
  65.             <li class="item startx">item2</li>
  66.             <li class="item">item3</li>
  67.             <li class="item">items</li>
  68.             <li class="item">item5</li>
  69.         </ul>
  70.         <hr>
  71.     </section>
  72. </body>
  73. </html>

运行效果图

附图2

伪类选择器

源码附图

附图3

源码示例

  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.     <style>
  9.         /* 匹配第一个元素 */
  10.         .list>:first-child{
  11.             color:#ff0000;
  12.         }
  13.         /* 匹配最后一个元素 */
  14.         .list>:last-child{
  15.             color:#00ff62;
  16.         }
  17.         /* 匹配第三个元素 */
  18.         .list>:nth-child(3){
  19.             color:#081fee;
  20.         }
  21.         .list>.six{
  22.             color:#df710b;
  23.         }
  24.         /* 匹配前三个元素 */
  25.         .list2>:nth-child(-n+3){
  26.             color:#ff0000;
  27.         }
  28.         /* 匹配从第6个起到最后的所有元素 */
  29.         .list2>:nth-child(n+6){
  30.             color:#11e481;
  31.         }
  32.         /* 匹配偶数位元素 */
  33.         .list3>:nth-child(even){
  34.             color:#670bdf;
  35.         }
  36.         /* 匹配奇数位元素 */
  37.         .list3>:nth-child(odd){
  38.             color:#ff0000;
  39.         }
  40.         /* 匹配最后三位元素 */
  41.         .list5>:nth-last-child(-n+3){
  42.             color:#670bdf;
  43.         }
  44.         /* 匹配倒数第5个元素 */
  45.         .list5>:nth-last-child(5){
  46.             color:#f11c00;
  47.         }
  48.     </style>
  49. </head>
  50. <body>
  51.     <h2>css伪类选择器</h2>
  52.     <ul class="list">
  53.         <li>item1 - :first-child</li>
  54.         <li>item2</li>
  55.         <li>item3 - :nth-child(3)</li>
  56.         <li>item4</li>
  57.         <li>item5</li>
  58.         <li class="six">item6 .list>.six</li>
  59.         <li>item7</li>
  60.         <li>item8 - :last-child</li>
  61.     </ul>
  62.     <hr>
  63.     <ul class="list2">
  64.         <li>ltem1</li>
  65.         <li>ltem2</li>
  66.         <li>ltem3</li>
  67.         <li>ltem4</li>
  68.         <li>ltem5</li>
  69.         <li>ltem6</li>
  70.         <li>ltem7</li>
  71.         <li>ltem8</li>
  72.         <li>ltem9</li>
  73.         <li>ltem10</li>
  74.     </ul>
  75.     <hr>
  76.     <ul class="list3">
  77.         <li>ltem1</li>
  78.         <li>ltem2</li>
  79.         <li>ltem3</li>
  80.         <li>ltem4</li>
  81.         <li>ltem5</li>
  82.         <li>ltem6</li>
  83.         <li>ltem7</li>
  84.         <li>ltem8</li>
  85.     </ul>
  86.     <hr>
  87.     <ul class="list5">
  88.         <li>ltem1</li>
  89.         <li>ltem2</li>
  90.         <li>ltem3</li>
  91.         <li>ltem4</li>
  92.         <li>ltem5</li>
  93.     </ul>
  94. </body>
  95. </html>

源码效果图

附图4

状态伪类选择器

源码附图

附图5

源码示例

  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.     <style>
  9.         fieldset{
  10.             display: inline-grid;
  11.             gap:1.5em;
  12.             border-radis:10px;
  13.             padding:5px 10px;
  14.             background:linear-gradient(to left top,#b7aee9,#ffffff);
  15.             border:none;
  16.         }
  17.         fieldset legend{
  18.             color:#696969;
  19.             text-align: center;
  20.         }
  21.         fieldset input{
  22.             border:0;
  23.             border-bottom: solid 1px #999;
  24.             padding:6px;
  25.             outline:none;
  26.             background-color: transparent;
  27.         }
  28.         fieldset :disabled{
  29.             background-color:#c9c6c3;
  30.             opacity:0.8;
  31.         }
  32.         fieldset :focus{
  33.             background: linear-gradient(to right bottom,#baf5c7,#f9f6f3);
  34.         }
  35.         input[type='checkbox']:checked+label{
  36.             color:#ff0000;
  37.             font-size:12px;
  38.         }
  39.         .btna{
  40.             border:none;
  41.             outline: none;
  42.             padding:6px 12px;
  43.             background-color: rgb(4, 69, 247);
  44.             color:#ffffff;
  45.         }
  46.         .btna:hover{
  47.             opacity:0.7;
  48.             cursor:pointer;
  49.         }
  50.         .btna:focus{
  51.             outline:none;
  52.             background-color: rgb(4, 69, 247);
  53.         }
  54.     </style>
  55. </head>
  56. <body>
  57.     <h2>状态伪类选择器</h2>
  58.     <form action="#">
  59.         <fieldset>
  60.             <legend>- 用户登录 -</legend>
  61.             <input type="text" name="user" id="user" autofocus placeholder="请输入用户名...">
  62.             <input type="password" name="pwd" id="pwd" placeholder="请输入密码...">
  63.             <input type="text" name="yzm" id="yzm" disabled placeholder="被禁用元素...">
  64.             <div>
  65.                 <input type="checkbox" name="jzmm" id="jzmm" checked><label for="jzmm">记住密码</label>
  66.             </div>
  67.             <button type="button" class="btna">登录</button>
  68.         </fieldset>
  69.     </form>
  70. </body>
  71. </html>

运行效果

附图6

伪类实现简单菜单效果

源码附图

附图7

源码示例

  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.     <style>
  9.         .box {
  10.         display: inline-grid;
  11.         position: relative;
  12.         border:0;
  13.         }
  14.         .box a{
  15.             text-decoration: none;
  16.         }
  17.         .box a:hover{
  18.             color:#ff0000;
  19.         }
  20.         .box a + ul{
  21.             display:none;
  22.         }
  23.         .box a:hover + ul{
  24.             display:block;
  25.         }
  26.         .erji{
  27.             margin-top:0;
  28.             padding:0;
  29.             margin-left:0;
  30.             background-color: aliceblue;
  31.         }
  32.         .box a + .erji:hover{
  33.             display:block;
  34.         }
  35.         .box a + .erji>li:hover{
  36.             color:#ff0000;
  37.             cursor:pointer;
  38.         }
  39.         .box ul>li{
  40.             list-style: none;
  41.             line-height:35px;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46.     <div class="box">
  47.         <a href="">前端学习</a>
  48.         <ul class="erji">
  49.             <li>html</li>
  50.             <li>css</li>
  51.             <li>js</li>
  52.         </ul>
  53.     </div>
  54. </body>
  55. <script>
  56. </script>
  57. </html>

运行效果

附图8

上一条：作业2：HTML结构、tag+classl简单布局、语义化图文解决方案、图像 链接与列表的规范与结合下一条：0113作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多