search

博客列表 >伪类选择器及盒模型示例

伪类选择器及盒模型示例

P粉479712293
P粉479712293原创
2022年07月09日 13:04:46352浏览

题目一：伪类选择器示例

伪类选择器分两类：
1.结构伪类：根据元素的位置来获取元素。
2.状态伪类：根据元素的状态来获取元素。

1.结构伪类获取元素示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <link rel="stylesheet" href="../static/4-4.css">
  8.     <title>伪类选择器</title>
  9. </head>
  10. <body>
  11.     <!-- *伪-就是假的意思 -->
  12.     <!-- *类-class -->
  13.     <!-- *以下是结构伪类，如先：ul.list>li{item$}*8 -->
  14.     <ul class="list">
  15.         <li>item1</li>
  16.         <li>item2</li>
  17.         <li>item3</li>
  18.         <li>item4</li>
  19.         <li>item5</li>
  20.         <li>item6</li>
  21.         <li>item7</li>
  22.         <li>item8</li>
  23.     </ul>
  24. </body>
  25. </html>

对应的css文件如下：

  1. /* *分组结构伪类 用于选择子元素 */
  2. /* *所有首先应该给它一个查询起点，就是首先要知道它爹是谁 */
  3. /* *对于第一项可以这样写 */
  4. .list>.first{
  5.     background-color: violet;
  6. }
  7. /* *但现在我们不按以上这样写 */
  8. /* *第一项 */
  9. .list>li:first-of-type{
  10.     background-color: violet;
  11. }
  12. /* *任意一项 */
  13. .list>li:nth-of-type(5){
  14.     background-color: green;
  15. }
  16. /* *倒数第3项（不管增加多少项，保证是倒数第3项） */
  17. .list>li:nth-last-of-type(3){
  18.     background-color: blue;
  19. }
  20. /* *最后一项（不管增加多少项，保证是最后一项） */
  21. .list>li:last-of-type{
  22.     background-color: violet;
  23. }

效果图如下：


以上分别获取了第1项，第5项，倒数第3项，最后一项的元素。

2.结构性伪类利用参数来获取元素示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <link rel="stylesheet" href="../static/4-4b.css">
  8.     <title>结构伪类的参数</title>
  9. </head>
  10. <body>
  11.     <ul class="list">
  12.         <li>item1</li>
  13.         <li>item2</li>
  14.         <li>item3</li>
  15.         <li>item4</li>
  16.         <li>item5</li>
  17.         <li>item6</li>
  18.         <li>item7</li>
  19.         <li>item8</li>
  20.     </ul>
  21. </body>
  22. </html>

对应的css文件如下：

  1. /* *自选某个元素,即an+3 ,a=0*/
  2. .list>:nth-of-type(3){
  3.     background-color: green;
  4. }
  5. /* *一组中从第4个元素开始 即n+4,a=1 */
  6. .list>:nth-of-type(n+4){
  7.     background-color: green;
  8. }
  9. /* *选一组中只选前5个，即-n+5,a=-1 */
  10. .list>:nth-of-type(-n+5){
  11.     background-color: green;
  12. }
  13. /* *选一组中只选最后2个，即-n+2,a=-1 */
  14. .list>:nth-last-of-type(-n+2){
  15.     background-color: green;
  16. }
  17. /* *偶数行 */
  18. .list>:nth-of-type(2n){
  19.     background-color: green;
  20.  }
  21.  /* *偶数行的另一方法 */
  22.  .list>:nth-of-type(even){
  23.     background-color: green;
  24.  }
  25.  /* *基数行 */
  26.   .list>:nth-of-type(2n+1){
  27.     background-color: green;
  28.  }
  29.  /* *基数行的另一方法 */
  30.  .list>:nth-of-type(odd){
  31.     background-color: green;
  32.  }

效果图如下：

1.自选某个元素,即an+3 ,a=0

2.一组中从第4个元素开始 即n+4,a=1

3.选一组中只选前5个，即-n+5,a=-1

4.选一组中只选最后2个，即-n+2,a=-1

5.偶数行

6.基数行

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.     <link rel="stylesheet" href="../static/伪类选择器及盒模型示例3.css">
  8.     <title>伪类选择器: 状态伪类</title>
  9.   </head>
  10.   <body>
  11.     <form action="">
  12.       <!-- *fieldset为表单分组标签 -->
  13.       <fieldset>
  14.           <!-- *legend为fieldset的标题标签 -->
  15.         <legend>用户注册</legend>
  16.         <label for="uname">用户名:</label>
  17.         <input type="text" id="uname" />
  18.         <!-- *如简化就用下面这两行，而删去上面这两行 -->
  19.         <!-- <label>用户名:<input type="text" /></label>
  20.         <br /> -->
  21.         <!-- *提示 -->
  22.         <label for="tips">警告:</label>
  23.         <input type="text" id="uname" value="一旦注册禁止注销" disabled style="border: none" />
  24.         <div class="gender">
  25.           <label for="m">性别:</label>
  26.           <input type="radio" name="sex" id="m" value="0" checked />
  27.           <label for="m">男</label>
  28.           <input type="radio" name="sex" id="f" value="1" />
  29.           <label for="f">女</label>
  30.         </div>
  31.         <button>提交</button>
  32.       </fieldset>
  33.     </form>
  34.   </body>
  35. </html>

对应的css文件如下：

  1.    /* *获取被禁用的元素 */
  2.    input:disabled {
  3.     color: red;
  4.     background-color: yellow;
  5.   }
  7.   /* *获取被默认选择中的单选按钮 */
  8.   input:checked + label {
  9.     color: red;
  10.   }
  12.   button {
  13.     height: 30px;
  14.     border: none;
  15.     outline: none;
  16.     background-color: seagreen;
  17.     color: white;
  18.   }
  20.   /* *鼠标移入的状态变化 */
  21.   button:hover {
  22.     /* *光标 */
  23.     cursor: pointer;
  24.     background-color: coral;
  25.   }
  27.   /* *获得焦点时变化 */
  28.   input:focus {
  29.     background-color: cyan;
  30.   }

效果图如下：

1.当打开页面时：

2.当输入框获得焦点时：

3.当选择单选框时：

4.当鼠标在按钮上方时：

题目二：盒模型示例

  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.     <link rel="stylesheet" href="../static/伪类选择器及盒模型示例4.css">
  8.     <title>盒模型/框模型</title>
  9.   </head>
  10.   <body>
  11.     <div class="box"></div>
  12.   </body>
  13. </html>

对应的css文件如下：

  1.         /* *1. width  */
  2.         /* *2. height  */
  3.         /* * 3. padding  */
  4.         /* *4. border  */
  5.         /* *5. margin  */
  7.         .box {
  8.             /* *宽度 */
  9.             width: 200px;
  11.             /* *高度 */
  12.             height: 100px;
  14.             /* *不可见,是因为没有设置:可见属性 */
  15.             /* *可见属性: 背景, 边框 */
  16.             background-color: violet;
  17.             /* *背景裁切,只覆盖到内容区, 不包括padding */
  18.             background-clip: content-box;
  19.             border: 5px solid;
  20.             /* *可见属性: 宽度, 样式, 颜色 */
  22.             /* *padding: 内边距,是内容区与边框之间的填充物 */
  23.             /* *margin: 外边距, 控制当前盒子与其它元素之间的空隙 */
  24.             /* *不可见属性: margin, padding  */
  25.             padding: 20px;
  26.             /* *margin: 20px; */
  28.             /* *不可见的属性,只能设置宽度, 不能设置特征(颜色,样式) */
  29.             /* *padding,margin: 就像空间,无色无味 */
  31.             /* *当前的盒子在页面中实际占据的空间大小是: 250 * 150  */
  32.             /* *我当前设置的盒子大小应该是: 200 * 100 */
  33.             /* *宽,度各相差了 50px */
  35.             /* *页面中计算盒子的实际宽高, 不包括 外边距: margin  */
  37.             /** 总宽度: */
  38.             /* *border-left-width + padding-left + width + padding-right + border-right-width */
  39.             /** 5 + 20 + 200 + 20 + 5 = 250px */
  41.             /* *总高度: */
  42.             /* *border-top-width + padding-top + height + padding-bottom + border-bottom-width */
  43.             /* *5 + 20 + 100 + 20 + 5 = 150px */
  45.             /* *我们的本意是: 我设置的宽高就应该是盒子的最终大小, */
  46.             /* *而不是浏览器添加上内边距和边框后的计算大小  */
  49.             /* *推荐的盒子大小计算方式,可以简化页面布局 */
  50.             box-sizing: border-box;
  51.             /* *还原到w3c默认标准盒子计算方式 */
  52.             /* *box-sizing: content-box; */
  53.           }
  55.           .box {
  56.             /* *border-top: 宽度 样式 前景色 */
  57.             border-top: 10px dashed blue;
  58.             border-left: 10px dashed blue;
  60.             /* *四条边一样的时候,可以只写border */
  61.             border: 5px solid red;
  62.           }
  64.           .box {
  65.             /* *padding-left: 10px; */
  66.             /* *padding-top: 5px; */
  67.             /* *padding-right: 20px;  */
  69.             /* *简化方案: 顺时针方向 */
  70.             /* *1. 四值: 顺时针, 上, 右,下,左 */
  71.             padding: 5px 10px 15px 20px;
  72.             /* *2. 三值, 中间永远表示左/右 */
  73.             padding: 5px 10px 15px;
  74.             /* *3. 双值, 第1个上下,第2个左右 */
  75.             padding: 5px 10px;
  77.             /* *三值,二值记忆方法: 第2个值永远表示左右 */
  79.             /** 4. 单值, 四个方向全相同 */
  80.             padding: 10px;
  81.           }
  83.           /** margin 的规则与padding完全一样 */

效果图如下：

上一条：字体图标与媒体查询示例下一条：字体图标的引用及实例媒体查询
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多