1.选择器

1.1结构选择器

  1. 伪:假,防
  2. 类:权重基本依然是class级别,”类“级、class
  3. nth-of-type(an+b)
  4. 1. a:系数,[0,1,2....]
  5. 2. n:参数,[0,1,2....]
  6. 3. b:偏移量,从0开始
  7. 注意:计算出来的索引必须有效
  8. ,而且必须从1开始
  9. 1.匹配一个
  10. 2.匹配一组
  11. 1n+0: 0开始匹配
  12. 1n+3: 从第3个开始匹配
  13. 3.反向匹配
  14. 4.奇偶匹配
  15. nth-last-of-type
  16. 语法糖:快捷方式
  17. first-of-type
  18. last-of-type
  19. nth-of-type(even):偶数
  20. nth-of-type(odd):偶数
  21. not否定伪类
  22. not(){}括号里面的对象没有样式
  23. after和:before

效果

  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. <body>
  10. <ul class="sty1">
  11. <li class="sty2">list1</li>
  12. <li>list2</li>
  13. <li>list3</li>
  14. <li>list4</li>
  15. <li>list5</li>
  16. <li>list6</li>
  17. <li>list7</li>
  18. <li>list8</li>
  19. <li>list9</li>
  20. <li>list10</li>
  21. </ul>
  22. <style>
  23. .sty1>li:nth-of-type(2){
  24. color: aliceblue;
  25. }
  26. .sty1>li:nth-of-type(n+8){
  27. color: antiquewhite;
  28. }
  29. .sty1>li:nth-of-type(-n+3){
  30. color: aqua;
  31. }
  32. .sty1>li:nth-of-type(2n)
  33. {
  34. color: brown;
  35. }
  36. </style>
  37. <div>
  38. <p>aaaaaaaaaaaa</p>
  39. <p>bbbbbbbbbbbb</p>
  40. <p id="first">cccccccccccc</p>
  41. </div>
  42. <style>
  43. div *:not(#first)
  44. {
  45. color: blue;
  46. }
  47. #first:after{
  48. content: "dddddddd";
  49. }
  50. #first:before{
  51. content: "dddddddd";
  52. }
  53. </style>
  54. </body>
  55. </html>

1.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. <style>
  9. input:disabled{
  10. color: brown;
  11. background-color: darkgoldenrod;
  12. }
  13. button:hover{
  14. cursor: pointer;
  15. background-color: coral;
  16. }
  17. div>input:checked + label{
  18. color: blue;
  19. }
  20. button{
  21. height: 30px;
  22. border: none;
  23. outline: none;
  24. background-color: seagreen;
  25. color: white;
  26. }
  27. input:focus{
  28. background-color: aquamarine;
  29. }
  30. /* cursor:光标设置 (pointer是小手设置) */
  31. </style>
  32. </head>
  33. <body>
  34. <!-- 2.状态伪类:根据元素的状态来获取元素, -->
  35. <form action="#">
  36. <fieldset>
  37. <legend>用户注册:</legend>
  38. <label for="uname">用户名:</label>
  39. <input type="text" id="uname" name="uname">
  40. <br>
  41. <label for="warn">警告:</label>
  42. <input type="text" id="warn" value="一旦注册禁止注销" disabled style="border: none">
  43. <div>
  44. <label for="male">性别</label>
  45. <input type="radio" id="male" name="sex" value="male" checked><label for="male"></label>
  46. <input type="radio" id="female" name="sex" value="female"><label for="female"></label>
  47. </div>
  48. <!-- 两个name必须相同 -->
  49. <button>提交</button>
  50. </fieldset>
  51. </form>
  52. <!-- fieldset和legent对表单进行分组 -->
  53. <!-- hover
  54. cursor:pointer
  55. input:foucus -->
  56. </body>
  57. </html>

盒模型

1.块级元素盒子默认值

div,article, section,header,hgrount,footer,nav,main,aside,li盒子的默认属性值

{

width:100%;

height:auto;

margin:0px;

padding:0px;

border:none;

}

h1,p,h2的默认属性值

{

width:100%;

height:auto;

margin:19px;

padding:0px;

border:none;

}

ul盒子默认属性值

{

width:100%;

height:auto;

margin:19px,0px;

padding:0px,0px,0px,42px;

border:none;

}

blockquote盒子默认属性

{

width:100%;

height:auto;

margin:19px,42px;

padding:0px;

border:none;

}

要想body没有边界

{

margin:0px;

}

更多相关文章

  1. Android(安卓)之 IntentFilter 详解
  2. CSS盒子模型
  3. Android(安卓)TV 智能电视/盒子 APP 开发焦点控制 两种方法实例
  4. Android如何解析Intent Filter
  5. Android解析Intent Filter的方法
  6. Android如何解析Intent Filter
  7. eclipse adb 启动失败,无法匹配android设备 的解决方案
  8. Android(安卓)数据库SQLite的使用简单Demo
  9. Android(安卓)数据库SQLite的使用简单Demo

随机推荐

  1. Android系统基础(01)简介
  2. Android事件机制之二:onTouch详解
  3. Android中传感器Sensor的使用
  4. Andriod 环境配置以及第一个Android Appl
  5. android 调用系统相机拍照并保存照片原图
  6. Android系统的开机画面显示过程分析(11)
  7. Android(安卓)Textview实现文字颜色渐变
  8. Android(安卓)javah -jni 找不到类的解决
  9. android studio中光线传感器解析
  10. Android(安卓)ViewPager的初始化及遇到的