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>
  12. css
  13. .ceshi > li:nth-of-type(1) {
  14. background-color: blue;
  15. }

实现:

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>
  12. css:
  13. .ceshi > li:nth-of-type(-n + 3) {
  14. background-color: yellowgreen;
  15. }

实现:

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>
  12. css
  13. .ceshi > li:nth-last-of-type(-n + 3) {
  14. background-color: yellowgreen;
  15. }

实现:

1.2.4 结构伪类语法糖

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

实现:

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

实现:

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>
  9. <div>
  10. <label for="tip">警告:</label>
  11. <input type="text" id="tip" value="一旦注册禁止注销" disabled style="border: none" />
  12. </div>
  13. <div>
  14. <label for="">性别:</label>
  15. <input type="radio" name="sex" id="nan" checked />
  16. <label for="nan">男</label>
  17. <input type="radio" name="sex" id="nv" />
  18. <label for="nv">女</label>
  19. </div>
  20. </fieldset>
  21. </form>
  22. css:
  23. <style>
  24. input:disabled{
  25. color:violet;
  26. }
  27. </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>
  9. <div>
  10. <label for="tip">警告:</label>
  11. <input type="text" id="tip" value="一旦注册禁止注销" disabled style="border: none" />
  12. </div>
  13. <div>
  14. <label for="">性别:</label>
  15. <input type="radio" name="sex" id="nan" checked />
  16. <label for="nan">男</label>
  17. <input type="radio" name="sex" id="nv" />
  18. <label for="nv">女</label>
  19. </div>
  20. </fieldset>
  21. </form>
  22. css:
  23. <style>
  24. input:disabled{
  25. color:violet;
  26. }
  27. //获取被选中的单选按钮
  28. input:checked + label {
  29. color: violet;
  30. }
  31. </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>
  9. <div>
  10. <label for="tip">警告:</label>
  11. <input type="text" id="tip" value="一旦注册禁止注销" disabled style="border: none" />
  12. </div>
  13. <div>
  14. <label for="">性别:</label>
  15. <input type="radio" name="sex" id="nan" checked />
  16. <label for="nan">男</label>
  17. <input type="radio" name="sex" id="nv" />
  18. <label for="nv">女</label>
  19. </div>
  20. </fieldset>
  21. </form>
  22. css:
  23. <style>
  24. input:disabled{
  25. color:violet;
  26. }
  27. input:checked + label {
  28. color: violet;
  29. }
  30. button {
  31. border-radius: 20px;
  32. border: none;
  33. background-color: aqua;
  34. }
  35. //鼠标移入时变化
  36. button:hover {
  37. cursor: pointer;
  38. color: red;
  39. }
  40. </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>
  9. <div>
  10. <label for="tip">警告:</label>
  11. <input type="text" id="tip" value="一旦注册禁止注销" disabled style="border: none" />
  12. </div>
  13. <div>
  14. <label for="">性别:</label>
  15. <input type="radio" name="sex" id="nan" checked />
  16. <label for="nan">男</label>
  17. <input type="radio" name="sex" id="nv" />
  18. <label for="nv">女</label>
  19. </div>
  20. </fieldset>
  21. </form>
  22. css:
  23. <style>
  24. input:disabled{
  25. color:violet;
  26. }
  27. input:checked + label {
  28. color: violet;
  29. }
  30. button {
  31. border-radius: 20px;
  32. border: none;
  33. background-color: aqua;
  34. }
  35. button:hover {
  36. cursor: pointer;
  37. color: red;
  38. }
  39. //获取焦点时变化
  40. input:focus{
  41. background-color:violet;
  42. }
  43. </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. @+id/android:list"和"@android:id/list"
  2. Android延时执行方法
  3. android 6 what
  4. Android中实现滑动效果
  5. Android源码仓库和Repo工具使用
  6. 根据终端分配不同的url地址
  7. android:singleLine="true",[...]没有全
  8. Android(安卓)UI学习 - GridView和ImageV
  9. Android中UI组件android:layout_gravity
  10. ACtivity布局之相对布局基本用法