search

博客列表 >结构伪类与状态伪类 ,实例演示盒模型常用属性,

结构伪类与状态伪类 ,实例演示盒模型常用属性,

杨雨辰
杨雨辰原创
2022年08月04日 01:48:42433浏览

结构伪类选择器

  1. /* 结论：
  2. a = 0： 选中单个匹配。
  3. a = 1： 正向，向下匹配。
  4. a = -1：反向，向上匹配。
  5. a = 2：获取奇偶（2n = 偶数 2n-1等于奇数） */
  7. /* 语法糖：even=偶数 odd=奇数 last=最后一个   属性名 + of-type=选中一个                                                                                  */
  9. /* .list > li.first {
  10.   background-color: bisque;
  11. } */
  12. /* 当前是获取的第一个子元素 后代选择器写法 */
  14. /* .list > li:nth-of-type(1) {
  15.   background-color: blue;
  16. } */
  17. /* 当前是获取第一个子元素，伪类选择器的写法 */
  19. /* 伪类选择器 nth-of-type */
  21. /* .list li:nth-of-type(4) {
  22.   background-color: rgb(123, 62, 62);
  23. } */
  25. /* nth-ofo-type(an+b)
  26. 1.a:系数，[0,1,2,3,4...]
  27. 2.n:参数，[0,1,2,3,4...]
  28. 3.b：偏移量，从0开始
  30. 注意：计算出来的索引，必须是有效的，而且必须从1开始
  31. */
  33. /* 选择元素有两种情况：
  34. 1.选择一个
  35. 2.选择一组 */
  37. /* 
  38.  匹配一个：a = 0 完整语法 : 
  39.    a=0是选一个 
  40. .list li:nth-of-type(0n + 1) {
  41.   background-color: rgb(60, 27, 27);
  42. }
  44. /* 计算方式an+b为计算结果
  45. 匹配第
  46. 因为a=0 0*任何数都等于0 例如0n+1=0+1=1 所以可以不写 直接写b（即可）
  49. .list li:nth-of-type(1) {
  50.   background-color: rgb(196, 118, 118);
  51. } */
  53. /* 匹配一组 a = 1 */
  54. /* b不写就从0开始递增 */
  55. /* 1n=从0开始选中全部 */
  56. /* .list li:nth-of-type(1n) {
  57.   background-color: aqua; 
  58. }*/
  60. /* 1乘以任何不变，那么b开始递增
  61. 1. 1*n + 0 = 0
  62. 2. 1*n + 1 = 1
  63. 3. 1*n + 2 = 2
  64. 4. 1*n + 3 = 3
  65. 。。。
  66. 最终得到一个索引顺序 1,2,3,4,5,6,7,8
  67. */
  69. /* 1n+0 :从0开始匹配， 1n = 1n+0
  70.  1n+3：从第3个开始匹配
  71.  1n+6：从第6个开始匹配 */
  73. /* .list li:nth-of-type(1n + 5) {
  74.   background-color: rgb(82, 115, 10);
  75. }
  76. /* a = -1：反向匹配  */
  77. /* .list li:nth-of-type(-n + 2) {
  78.   background-color: rgb(227, 29, 197);
  79. } */
  80. /* :nth-last-of-type(1n+1)从倒数第一个开始选中 last倒序 */
  81. /* .list li:nth-last-of-type(1n + 3) {
  82.   background-color: rgb(125, 91, 91);
  83. } */
  84. /* 2n-1选中奇数  */
  86. /* .list li:nth-of-type(2n-1) {
  87.   background-color: rgb(129, 37, 37);
  88. } */
  90. /* 2n-2选中偶数 */
  91. /* .list li:nth-of-type(2n-2) {
  92.   background-color: rgb(129, 37, 37);
  93. } */

状态伪类

  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.     <title>伪类选择器：状态伪类</title>
  8.   </head>
  9.   <body>
  10.     <form action="reds.php">
  11.       <!-- 表单分组 -->
  12.       <fieldset>
  13.         <legend>用户注册</legend>
  14.         <label for="uname">用户名</label>
  15.         <input
  16.           type="text"
  17.           id="uname"
  18.           placeholder="用户名不能为空"
  19.           name="username"
  20.         />
  21.         <br />
  22.         <!-- 提示 -->
  23.         <label for="tips" aria-disabled="false">警告:</label>
  24.         <input
  25.           type="text"
  26.           id="tips"
  27.           value="注册后禁止注销"
  28.           disabled
  29.           style="border: none"
  30.         />
  31.         <div class="gender">
  32.           <label for="m">性别</label>
  33.           <input type="radio" name="sex" id="m" value="0" checked />
  34.           <label for="m">男</label>
  35.           <input type="radio" name="sex" id="f" value="1" />
  36.           <label for="f">女</label>
  37.           <br />
  38.           <button>提交</button>
  39.         </div>
  40.       </fieldset>
  41.     </form>
  42.     <style>
  43.       /* 获取被禁用的元素 */
  44.       input:disabled {
  45.         color: blue;
  46.       }
  47.       /* 获取到被默认选中的单选按钮 */
  48.       input:checked + label {
  49.         color: blue;
  50.       }
  51.       /* 获取焦点的变化 */
  52.       button:hover {
  53.         cursor: pointer;
  54.         background-color: rgb(102, 102, 131);
  55.       }
  56.     </style>
  57.   </body>
  58. </html>

盒模型

  1. <title>盒模型、框模型</title>
  2.   </head>
  3.   <body>
  4.     <div class="box">
  5.       <!-- margin:外边距 border：边框 padding:内边框 conetnt:内容区 -->
  6.     </div>
  7.     <style>
  8.       .box {
  9.         height: 200px;
  10.         width: 200px;
  11.         border: 2px solid;
  12.         /* padding:内边框 是内容区与边框之间的填充区域 */
  13.         /* margin:外边距，控制当前盒子与其他元素之间的空隙 */
  14.         /* 不可见属性：margin , padding s只能设置宽度，不能设置样式*/
  15.         /* box-sizing: border-box;推荐的盒子计算方式，可以简化页面布局 
  16.         box-sizing: contetnt-box 还原到w3c默认标准的计算方式*/
  17.         /* init.css文件一般为样式初始化; */
  19.         /* .box {
  20.                    宽度 样式 前景色
  21.         border-top: 5px dashed blue;
  22.         border-left: 5px dashed blue;
  23.         border-right: 5px dashed blue;
  24.         border-bottom: 5px dashed darkblue;
  25.       } */
  26.         /* padding与border一样 可简化书写简化方案：顺时针方向 
  27.         1.四值：顺时针，上 右 下 左 
  28.         padding: 5px 10px 15px 20px;
  30.         2.三值 双值：第2个永远表示左右
  31.         padding:5px 10px 15px
  32.         3.双值： 第一个上下，第2个左右 
  33.         padding：5px 10*/
  34.       }

盒子模型

上一条：Node.Js npm常用命令下一条：nodeJS安装与npm常用命令
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议