1.伪类选择器

伪类选择器分为“结构伪类和状态伪类,常用的选择器我们一般在html元素里面直接选中相对应的元素进行描述:
结构伪类
一般常用方法
1.常用方法在item1标签中添加属性first取其属性值使用

  1. <style>
  2. .list > li.first{
  3. background-color: blue;
  4. }
  5. </style>
  6. <body>
  7. <ul class="list">
  8. <li class="first">item1</li>
  9. <li >item2</li>
  10. <li>item3</li>
  11. <li>item4</li>
  12. <li>item5</li>
  13. <li>item6</li>
  14. <li>item7</li>
  15. <li>item8</li>
  16. </ul>
  17. </body>

方法2.使用伪类选择器属性标签:nth-of-type(1)选中你想要的标签这里选择的是1,nth-of-type(1)标签的前面需要加上li里面的父级

  1. <style>
  2. .list > li:nth-of-type(1){
  3. background-color: aquamarine;
  4. }
  5. </style>
  6. <body>
  7. <ul class="list">
  8. <li class="first">item1</li>
  9. <li >item2</li>
  10. <li>item3</li>
  11. <li>item4</li>
  12. <li>item5</li>
  13. <li>item6</li>
  14. <li>item7</li>
  15. <li>item8</li>
  16. </ul>
  17. </body>


3指定顺序选择是由一组公式计算结果进行选择,公式方式:a:代表系数(0.1.2.3….)n:代表参数(0.1.2.3…)b代表偏移量也是从0开始算,假如我们需要拿到下面item6标签 需要使用的方式是(0n+6),a=0.n=0 b=3 计算结果0*0+6=6

  1. <style>
  2. ..list > li:nth-of-type(0n+3){
  3. background-color: aquamarine;
  4. }
  5. </style>
  6. <body>
  7. <ul class="list">
  8. <li class="first">item1</li>
  9. <li >item2</li>
  10. <li>item3</li>
  11. <li>item4</li>
  12. <li>item5</li>
  13. <li>item6</li>
  14. <li>item7</li>
  15. <li>item8</li>
  16. </ul>
  17. </body>


如果需要选择一整组使用的公式,我们把A代表1,n代表0计算公式就是1*0=1,从1开始递增就会选择所有的元素

  1. <style>
  2. .list > li:nth-of-type(1n) {
  3. background-color: aquamarine;
  4. }
  5. </style>
  6. <body>
  7. <ul class="list">
  8. <li class="first">item</li>
  9. <li>item</li>
  10. <li>item</li>
  11. <li>item</li>
  12. <li>item</li>
  13. <li>item</li>
  14. <li>item</li>
  15. <li>item</li>
  16. </ul>
  17. </body>


反向匹配公式(-1n+3)

  1. <style>
  2. .list > li:nth-of-type(-1n+3) {
  3. background-color: aquamarine;
  4. }
  5. </style>

奇偶公式计算:偶数(2n)20=2 代表的是偶数选中,(2n-1) 这里的计算是20-1=1 得到的是基数
偶数

  1. <style>
  2. .list > li:nth-of-type(2n) {
  3. background-color: aquamarine;
  4. }
  5. </style>

奇数

  1. <style>
  2. .list > li:nth-of-type(2n) {
  3. background-color: aquamarine;
  4. }
  5. </style>


前三个和后三个都有对应的属性标签 前三个”nth-of-type”后三个”nth-last-of-type”
(前三个)

  1. <style>
  2. .list > li:nth-of-type(-n+3) {
  3. background-color: aquamarine;
  4. }
  5. </style>
  6. <body>
  7. <ul class="list">
  8. <li class="first">item</li>
  9. <li>item</li>
  10. <li>item</li>
  11. <li>item</li>
  12. <li>item</li>
  13. <li>item</li>
  14. <li>item</li>
  15. <li>item</li>
  16. </ul>
  17. </body>

(后三个)

  1. <style>
  2. .list > li:nth-last-of-type(-n+3) {
  3. background-color: aquamarine;
  4. }
  5. </style>
  6. <body>
  7. <ul class="list">
  8. <li class="first">item</li>
  9. <li>item</li>
  10. <li>item</li>
  11. <li>item</li>
  12. <li>item</li>
  13. <li>item</li>
  14. <li>item</li>
  15. <li>item</li>
  16. </ul>
  17. </body>

2.状态伪类

指定某个元素来获取相对应的元素

  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. <style>
  10. /* 获取被禁用的元素:disabled */
  11. input:disabled {
  12. color: red;
  13. background-color: blue;
  14. }
  15. /* 获取被默认选择中的单选按钮 */
  16. input:checked + label {
  17. color: blueviolet;
  18. }
  19. /* 鼠标移入的状态变化 */
  20. button:hover {
  21. /* 光标 */
  22. cursor: pointer;
  23. background-color: aqua;
  24. }
  25. /* 获得焦点时变化 */
  26. input:focus {
  27. background-color: yellow;
  28. }
  29. </style>
  30. <body>
  31. <form action=""></form>
  32. <fieldset>
  33. <legend>后台登陆</legend>
  34. <label for="uname">账号:</label>
  35. <input type="text" id="uname" value="请输入您的账号" />
  36. <br />
  37. <label for="psw">密码:</label>
  38. <input type="password" id="psw" value="" />
  39. <br />
  40. <label for="tips">警告:</label>
  41. <input
  42. type="text"
  43. id="uname"
  44. value="输错密码三次自动锁定"
  45. disabled
  46. style="border: none"
  47. />
  48. <div class="user">
  49. <label for="user">用户:</label>
  50. <input type="radio" name="user" id="user" value="0" checked /><label
  51. for="user"
  52. >用户</label
  53. >
  54. <input type="radio" name="person" id="person" value="1" /><label
  55. for="uperson"
  56. >管理员</label
  57. >
  58. </div>
  59. <button style="color: brown">登录</button>
  60. </fieldset>
  61. </body>
  62. </html>

3.盒模型

  1. margin=外边距
  2. border=边框
  3. padding=内容区

可见属性:背景,颜色,边框
不可见属性只能设置宽度,不能设置颜色样式:外边距(margin),padding(内容区)
页面中计算盒子的实际宽高是不包含外边距

  1. <title>盒模型</title>
  2. </head>
  3. <style>
  4. .box {
  5. width: 200px;
  6. height: 100px;
  7. background-color: blue;
  8. background-clip: content-box;
  9. border: 5px solid;
  10. padding: 20px;
  11. }
  12. </style>
  13. <body>
  14. <div class="box"></div>
  15. </body>
  16. </html>

2.如果我们需要制作一个200*100的盒子我们需要用到一个特定的属性box-sizing: border-box; (box-sizing: border-box;)属性包括了边框和外边距

更多相关文章

  1. 关于EditText的android:maxLength属性的注意事项
  2. Android面试系列文章2018之Android部分之动画机制篇
  3. HTML标签与属性
  4. 2022年0707结构伪类与状态伪类与盒模型常用属性
  5. Android相对属性布局总结
  6. Android之EditText imeOptions属性解析
  7. android UI进阶之style和theme的使用
  8. Android属性动画的简单使用和总结
  9. Android(安卓)几张图片制作成动画

随机推荐

  1. Android伸手党系列之二:Android开发基础知
  2. Android 底层学习札记
  3. Android 带图标的textview
  4. Android 多屏适配
  5. Android(安卓)-> 如何避免Handler引起内
  6. Android 融云SDK 集成
  7. 【边做项目边学Android】手机安全卫士05_
  8. Android(安卓)Launcher 之 图标加框 优化
  9. android 开机流程
  10. android arm debug