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"）

更多相关文章

  1. 系出名门Android(10) - HTTP 通信, XML 解析, 通过 Hander 实现
  2. Android(安卓)Camera SurfaceView 获取预览数据
  3. [Android] 彻底了解Binder机制原理和底层实现
  4. Android(安卓)Binder实现浅析-Binder驱动
  5. Android取消EditText自动获取焦点默认行为
  6. Android上的手势监听实现
  7. 基于AOA协议实现Android设备的USB通信
  8. Android亮度调节的几种实现方法
  9. [Android] 触屏setOnTouchListener实现图片缩放、移动、绘制和添

随机推荐

  1. 学习笔记（11月02日）--高阶函数
  2. 变量和数据类型
  3. 第一个简单的flask程序（有问题，求大神帮忙
  4. One-Hot Encoding 及其使用原因
  5. 怎样用Python3 写一个爬图片的程序?
  6. Python-select详解（select、epoll）
  7. tensorflow 变量定义路径//问题
  8. python-布尔表达式
  9. python做电商站点的问题
  10. python：while循环的使用方法