search

博客列表 >伪类选择器与盒模型常用属性

伪类选择器与盒模型常用属性

新手1314
新手1314原创
2022年07月08日 17:38:21385浏览

1.伪类选择器

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

1.2 结构伪类

  1. nth-of-type(an+b)

1.2.1 单选结构伪类

html+css 代码：

  1. html:
  2.     <ul class="ceshi">
  3.       <li>ceshi1</li>
  4.       <li>ceshi2</li>
  5.       <li>ceshi3</li>
  6.       <li>ceshi4</li>
  7.       <li>ceshi5</li>
  8.       <li>ceshi6</li>
  9.       <li>ceshi7</li>
  10.       <li>ceshi8</li>
  11.     </ul>
  13. css：
  14. .ceshi > li:nth-of-type(1) {
  15.   background-color: blue;
  16. }

实现：

1.2.2 获取前三个结构伪类

HTML+CSS代码：

  1. html:
  2.     <ul class="ceshi">
  3.       <li>ceshi1</li>
  4.       <li>ceshi2</li>
  5.       <li>ceshi3</li>
  6.       <li>ceshi4</li>
  7.       <li>ceshi5</li>
  8.       <li>ceshi6</li>
  9.       <li>ceshi7</li>
  10.       <li>ceshi8</li>
  11.     </ul>
  13. css:
  14. .ceshi > li:nth-of-type(-n + 3) {
  15.   background-color: yellowgreen;
  16. }

实现：

1.2.3 获取最后三个的结构伪类

HTML+CSS代码：

  1. html:
  2.     <ul class="ceshi">
  3.       <li>ceshi1</li>
  4.       <li>ceshi2</li>
  5.       <li>ceshi3</li>
  6.       <li>ceshi4</li>
  7.       <li>ceshi5</li>
  8.       <li>ceshi6</li>
  9.       <li>ceshi7</li>
  10.       <li>ceshi8</li>
  11.     </ul>
  13. css：
  14. .ceshi > li:nth-last-of-type(-n + 3) {
  15.   background-color: yellowgreen;
  16. }

实现：

1.2.4 结构伪类语法糖

  1. 1.选中第一个：first-of-type
  2. 2.选中最后一个:last-of-type
  4. HTML：
  5. <ul class="ceshi">
  6.       <li>ceshi1</li>
  7.       <li>ceshi2</li>
  8.       <li>ceshi3</li>
  9.       <li>ceshi4</li>
  10.       <li>ceshi5</li>
  11.       <li>ceshi6</li>
  12.       <li>ceshi7</li>
  13.       <li>ceshi8</li>
  14.     </ul>
  16. css:
  17. .ceshi > li:first-of-type {
  18.   background-color: violet;
  19. }
  20. .ceshi > li:last-of-type {
  21.   background-color: turquoise;
  22. }

实现：

  1. 3.选中偶数行：nth-of-type(even)
  2. 4.选中奇数行：nth-of-type(odd)
  4. HTML：
  5. <ul class="ceshi">
  6.       <li>ceshi1</li>
  7.       <li>ceshi2</li>
  8.       <li>ceshi3</li>
  9.       <li>ceshi4</li>
  10.       <li>ceshi5</li>
  11.       <li>ceshi6</li>
  12.       <li>ceshi7</li>
  13.       <li>ceshi8</li>
  14.     </ul>
  16. css:
  17. .ceshi > li:nth-of-type(even) {
  18.   background-color: blueviolet;
  19. }
  20. .ceshi > li:nth-of-type(odd) {
  21.   background-color: aqua;
  22. }

实现：

1.3 状态伪类

1.3.1 获取被禁用的元素

  1. html:
  2. <form action="">
  3.       <fieldset>
  4.         <legend>用户注册</legend>
  5.         <div>
  6.           <label for="username">账号：</label>
  7.           <input type="text" id="username" />
  8.         </div>
  10.         <div>
  11.           <label for="tip">警告：</label>
  12.           <input type="text" id="tip" value="一旦注册禁止注销" disabled style="border: none" />
  13.         </div>
  14.         <div>
  15.           <label for="">性别：</label>
  16.           <input type="radio" name="sex" id="nan" checked />
  17.           <label for="nan">男</label>
  19.           <input type="radio" name="sex" id="nv" />
  20.           <label for="nv">女</label>
  21.         </div>
  22.       </fieldset>
  23.     </form>
  24. css:
  25. <style>
  26.   input:disabled{
  27.     color:violet;
  28.   }
  29. </style>

实现：

1.3.2 获取被选中的单选按钮

  1. html:
  2. <form action="">
  3.       <fieldset>
  4.         <legend>用户注册</legend>
  5.         <div>
  6.           <label for="username">账号：</label>
  7.           <input type="text" id="username" />
  8.         </div>
  10.         <div>
  11.           <label for="tip">警告：</label>
  12.           <input type="text" id="tip" value="一旦注册禁止注销" disabled style="border: none" />
  13.         </div>
  14.         <div>
  15.           <label for="">性别：</label>
  16.           <input type="radio" name="sex" id="nan" checked />
  17.           <label for="nan">男</label>
  19.           <input type="radio" name="sex" id="nv" />
  20.           <label for="nv">女</label>
  21.         </div>
  22.       </fieldset>
  23.     </form>
  24. css:
  25. <style>
  26.   input:disabled{
  27.     color:violet;
  28.   }
  29.   //获取被选中的单选按钮
  30.   input:checked + label {
  31.         color: violet;
  32.       }
  33. </style>

实现：

1.3.3 鼠标移入光标的变化

  1. html:
  2. <form action="">
  3.       <fieldset>
  4.         <legend>用户注册</legend>
  5.         <div>
  6.           <label for="username">账号：</label>
  7.           <input type="text" id="username" />
  8.         </div>
  10.         <div>
  11.           <label for="tip">警告：</label>
  12.           <input type="text" id="tip" value="一旦注册禁止注销" disabled style="border: none" />
  13.         </div>
  14.         <div>
  15.           <label for="">性别：</label>
  16.           <input type="radio" name="sex" id="nan" checked />
  17.           <label for="nan">男</label>
  19.           <input type="radio" name="sex" id="nv" />
  20.           <label for="nv">女</label>
  21.         </div>
  22.       </fieldset>
  23.     </form>
  24. css:
  25. <style>
  26.   input:disabled{
  27.     color:violet;
  28.   }
  29.   input:checked + label {
  30.     color: violet;
  31.   }
  32.   button {
  33.     border-radius: 20px;
  34.     border: none;
  35.     background-color: aqua;
  36.   }
  37.   //鼠标移入时变化
  38.   button:hover {
  39.     cursor: pointer;
  40.     color: red;
  41.   }
  42. </style>

实现：

1.3.4 获取焦点时变化

  1. html:
  2. <form action="">
  3.       <fieldset>
  4.         <legend>用户注册</legend>
  5.         <div>
  6.           <label for="username">账号：</label>
  7.           <input type="text" id="username" />
  8.         </div>
  10.         <div>
  11.           <label for="tip">警告：</label>
  12.           <input type="text" id="tip" value="一旦注册禁止注销" disabled style="border: none" />
  13.         </div>
  14.         <div>
  15.           <label for="">性别：</label>
  16.           <input type="radio" name="sex" id="nan" checked />
  17.           <label for="nan">男</label>
  19.           <input type="radio" name="sex" id="nv" />
  20.           <label for="nv">女</label>
  21.         </div>
  22.       </fieldset>
  23.     </form>
  24. css:
  25. <style>
  26.   input:disabled{
  27.     color:violet;
  28.   }
  29.   input:checked + label {
  30.     color: violet;
  31.   }
  32.   button {
  33.     border-radius: 20px;
  34.     border: none;
  35.     background-color: aqua;
  36.   }
  37.   button:hover {
  38.     cursor: pointer;
  39.     color: red;
  40.   }
  41.   //获取焦点时变化
  42.   input:focus{
  43.     background-color:violet;
  44.   }
  45. </style>

实现：

2.盒模型常用属性

  1. 盒模型有四属性：margin:外边距；padding:内边距;border:边框；内容区：content

  1. 要使盒模型变成可见状态必须设置可见属性，例如：background-color:violet 等;
  2. 还需要设置盒模型的高度，例如：height="200px"

  1. 内边距：是内容区与边框之间的填充物（padding="10px"）
  2. 外边距：是盒子与其他元素之间的间隙（margin="10px"）

上一条：css伪类选择器和盒模型下一条：Ubuntu软件更新更换源
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多