Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 伪类/盒子模型及单位
Blogger Information
Blog 11
fans 0
comment 0
visits 6951
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
伪类/盒子模型及单位
**
Original
425 people have browsed it

伪类选择器

结构伪类

方法一：

  1. <body>
  2.     <!-- 结构伪类：根据元素位置获取元素 -->
  3.     <ul class="list">
  4.       <li>item1</li>
  5.       <li>item2</li>
  6.       <li>item3</li>
  7.       <li>item4</li>
  8.       <li>item5</li>
  9.       <li>item6</li>
  10.       <li>item7</li>
  11.       <li>item8</li>
  12.     </ul>
  13.     <style>
  14.       /* 分组结构伪类 */
  15.       /* 第一个元素 */
  16.       .list > li:nth-of-type(1) {
  17.         background-color: violet;
  18.       }
  19.       /* 最后一个元素 */
  20.       .list > li:nth-of-type(8) {
  21.         background-color: violet;
  22.       }
  23.       /* 第5个元素 */
  24.       .list > li:nth-of-type(5) {
  25.         background-color: violet;
  26.       }
  27.       /* 选择第5个，相当于倒数第4个元素 */
  28.       .list > li:nth-last-of-type(4) {
  29.         background-color: red;
  30.       }
  31.       /* 第一个和倒数第一个元素可以简写 */
  32.       .list > li:first-of-type {
  33.         color: darkorchid;
  34.       }
  35.       .list > li:last-of-type {
  36.         color: lightblue;
  37.       }
  38.     </style>
  39.   </body>

方法二

  1. <body>
  2.     <ul class="list">
  3.       <li>item1</li>
  4.       <li>item2</li>
  5.       <li>item3</li>
  6.       <li>item4</li>
  7.       <li>item5</li>
  8.       <li>item6</li>
  9.       <li>item7</li>
  10.       <li>item8</li>
  11.     </ul>
  12.     <style>
  13.         /* 实际开发过程中，使用n + b(偏移量)来匹配元素 */
  14.       /* 1. 匹配单个，a=0 */
  15.       .list > :nth-of-type(0n + 3) {
  16.         background-color: lightgreen;
  17.       }
  18.       .list > :nth-of-type(3) {
  19.         background-color: red;
  20.       }
  21.       /* 2. 匹配一组：a=1 */
  22.       .list > :nth-of-type(n) {
  23.         background-color: skyblue;
  24.       }
  25.       /* 匹配第3个子元素后面的所有兄弟元素 */
  26.       .list > :nth-of-type(1n + 3) {
  27.         color: darkred;
  28.       }
  29.       /* a=-1,功能与a=1是一样，但是反向取，取前3个 */
  30.       .list > :nth-of-type(-n + 3) {
  31.         background-color: lightgreen;
  32.       }
  33.       /* 匹配最后3个 */
  34.       .list > :nth-last-of-type(-n + 3) {
  35.         background-color: seagreen;
  36.       }
  37.       /* 2n+0:匹配偶数位元素 even */
  38.       .list > :nth-of-type(2n) {
  39.         background-color: gray;
  40.       }
  41.       /* 2n+1:匹配奇数位元素 odd */
  42.       .list > :nth-of-type(2n + 1) {
  43.         background-color: lightgrey;
  44.       }
  45.       .list > :nth-of-type(even):hover {
  46.         background-color: red;
  47.       }
  48.       .list > :nth-of-type(odd):hover {
  49.         background-color: darkred;
  50.       }
  51.     </style>
  52.   </body>

状态伪类/表单伪类

  1. <body>
  2.     <!-- 表单伪类 -->
  3.     <input type="text" />
  4.     <input type="text" disabled />
  5.     <input type="radio" name="sex" id="m" value="0" /><label>男</label>
  6.     <input type="radio" name="sex" id="f" value="1" /><label>女</label>
  7.     <p>
  8.       <button>提交</button>
  9.     </p>
  10.     <style>
  11.       input:disabled {
  12.         background-color: yellow;
  13.       }
  14.       input:enabled {
  15.         background-color: cyan;
  16.       }
  17.       /* 单选按钮选中后，将它的标签文本前景色设置为红色 */
  18.       input:checked + label {
  19.         color: red;
  20.       }
  21.       button {
  22.         width: 100px;
  23.         height: 30px;
  24.         border: none;
  25.         outline: none;
  26.         background-color: seagreen;
  27.         color: white;
  28.       }
  29.       button:hover {
  30.         background-color: coral;
  31.         cursor: pointer;
  32.       }
  33.     </style>
  34.   </body>

字体图标引入

1、字体图标下载

https://www.iconfont.cn/ 根据需要挑选自己需要的字体图标，并下载至本地项目根目录，根据需要设置字体图标目录名称（本项目设置为：font）。

2、字体使用

Font class方式插入

①引入字体CSS文件

  1. <link rel="stylesheet" href="./font/iconfont.css" />

②字体使用

  1. <body>
  2.     <p><span class="iconfont icon-cart"></span> </p>
  3.     <style>
  4.       .iconfont.icon-cart {
  5.         font-size: 30px;
  6.         color: red;
  7.       }
  8.     </style>
  9. </body>

Symbol 方式插入

①引入字体JS文件

  1. <script src="./font/iconfont.js"></script>

②字体使用

  1. <body>
  2.    <svg class="icon" aria-hidden="true">
  3.      <use xlink:href="#icon-fabulous"></use>
  4.    </svg>
  5. </body>

盒模型的属性

盒子模型总共有5个属性分别为：width/height/border/padding/margin

  1. <body>
  2.     <div class="box">Box</div>
  3.     <style>
  4.       /* 盒子模型的属性 */
  5.       .box {
  6.         width: 200px;
  7.         height: 200px;
  8.         background: violet;
  9.         border: 10px dashed currentColor;
  10.         background-clip: content-box;
  11.         box-sizing: border-box;
  12.         /* 值得顺序；上 右 下 左 */
  13.         padding: 5px 10px 15px 20px;
  14.         /* 三值语法：上 右 下 左 */
  15.         padding: 5px 10px 20px;
  16.         /* 双值：第一个上下，第二个左右 */
  17.         padding: 25px;
  18.         /* 单值：四个方向一样 */
  19.       }
  20.       .box {
  21.         border-top: 20px solid red;
  22.         border: 5px solid green;
  23.       }
  24.       /* 样式重置 */
  25.       * {
  26.         padding: 0;
  27.         margin: 0;
  28.         box-sizing: border-box;
  29.       }
  30.     </style>
  31.   </body>

em/rem的区别

说明：em和rem都是相对单位，em当前或父级的font-size绑定，而rem是永远和html中的font-size绑定

  1. <body>
  2.     <div class="box"></div>
  3.     <style>
  4.         * {
  5.             padding: 0;
  6.             margin: 0;
  7.             box-sizing: border-box;
  8.         }
  9.         .box {
  10.             /* 1em = 当前或父级的font-size绑定 */
  11.             height: 5em;
  12.             background-color: green;
  13.         }
  14.         /* rem：永远和html中的font-size绑定 */
  15.         html {
  16.             font-size: 10px;
  17.         }
  18.         .box {
  19.             width: 20rem;
  20.             height: 15rem;
  21.             background-color: grey;
  22.         }
  23.     </style>
  24. </body>
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