CSS基础选择器:
    image.png

    1. //元素选择器
    2. div{
    3. }
    4. //类选择器
    5. .my-class{
    6. }
    7. // id选择器
    8. #test{
    9. }
    10. // * 通配符选择器
    11. *{}
    12. // 并集选择器
    13. div,.my-class,#test{
    14. }
    15. //组合选择器
    16. div.my-class{
    17. } // div元素,并且class类要为my-class
    18. div .my-class{
    19. } // div 元素的子孙元素类为 my-class

    注:
    并集选择器:不同选择器具有相同的样式,可以将他们写在一起,节省代码,必选代码冗余。如果一个元素受多个选择器影响,则会一并起到作用,并且后面的选择器样式会覆盖掉前面选择器的样式。
    交集选择器:两个选择器共同来影响一个元素的样式。

    示例:

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7. <title>Document</title>
    8. <style>
    9. /*一个并集选择器*/
    10. h1,h2,h3,p{
    11. font-size:12px;
    12. color:green;
    13. }
    14. /*并集选择器内依次有交集选择器(h2.special)、类选择器(special)、ID选择器(#one)*/
    15. h2.special,.special,#one{
    16. text-decoration: underline;
    17. color: red;
    18. }
    19. /*交集选择器*/
    20. h2.special{
    21. color:blue;
    22. font-size: 30px
    23. }
    24. </style>
    25. </head>
    26. <body>
    27. <h2>示例文字000</h2>
    28. <h2 class="special">示例文字001</h2>
    29. <p class="special">示例文字002</p>
    30. <h4 id="one">示例文字003</h4>
    31. <h4>示例文字004</h4>
    32. </body>
    33. </html>

    CSS层次选择器:
    image.png

    1. <style>
    2. /* 层次选择器 */
    3. /* 1、子集选择器 */
    4. /* div 下面所有的子元素p(不包含孙子元素) */
    5. div>p{
    6. color: red;
    7. }
    8. /* 兄弟选择器 */
    9. /* .main-span 元素的第一个紧挨着的兄弟元素 */
    10. .main-span1 + p{
    11. color:blue;
    12. }
    13. /* 后代选择器 */
    14. /* div 中所有的p元素 */
    15. div p{
    16. color:brown;
    17. }
    18. /* 通用选择器 */
    19. /* 所有的后面同级元素 */
    20. .main-span2 ~ p{
    21. color:cyan;
    22. }
    23. </style>
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7. <title>Document</title>
    8. <style>
    9. /* 层次选择器 */
    10. /* 1、子集选择器 */
    11. /* div 下面所有的子元素p(不包含孙子元素) */
    12. div>p{
    13. color: red;
    14. }
    15. /* 兄弟选择器 */
    16. /* .main-span 元素的第一个紧挨着的兄弟元素 */
    17. .main-span1 + p{
    18. color:blue;
    19. }
    20. /* 后代选择器 */
    21. /* div 中所有的p元素 */
    22. div p{
    23. color:brown;
    24. }
    25. /* 通用选择器 */
    26. /* 所有的后面同级元素 */
    27. .main-span2 ~ p{
    28. color:cyan;
    29. }
    30. </style>
    31. </head>
    32. <body>
    33. <div>
    34. <p>Hello</p>
    35. <p>World</p>
    36. <span>
    37. <p>haha</p>
    38. </span>
    39. </div>
    40. ---------------------------------------
    41. <p>Top</p>
    42. <div class="main-span1">
    43. Main
    44. </div>
    45. <p>Bottom</p>
    46. <p>Last</p>
    47. --------------------------------------
    48. <p>Top</p>
    49. <div class="main-span2">
    50. Main
    51. </div>
    52. <p>Bottom</p>
    53. <p>Last</p>
    54. </body>
    55. </html>

    动态伪类选择器:

    伪类可以作用于任何元素,如div,button。

    1. <style>
    2. /* div鼠标悬停 */
    3. div:hover{
    4. color: red;
    5. }
    6. /* 链接 */
    7. a:link{
    8. color:olive;
    9. }
    10. /* 悬停 */
    11. a:hover{
    12. color:blue;
    13. }
    14. /* 按住未松开的样式 */
    15. a:active{
    16. color:green;
    17. }
    18. /* 访问后 */
    19. a:visited{
    20. color:red;
    21. }
    22. /* 链接或输入框 */
    23. a:focus{
    24. color:orange;
    25. }
    26. </style>

    结构伪类选择器:


    定义和用法**
    :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。例如:div: first-child,意思是指第一个div。
    :last-child
    :nth-child(odd) 奇数
    :nth-child(even) 偶数

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7. <title>Document</title>
    8. <style>
    9. /* */
    10. div:first-child{
    11. color:black;
    12. }
    13. /* */
    14. div:nth-child(3n+3){
    15. color: red;
    16. border: 2px solid red;
    17. margin-bottom: 2px;
    18. }
    19. /* div:nth-child(even){
    20. color: green;
    21. border: 2px solid green;
    22. margin-bottom: 2px;
    23. } */
    24. </style>
    25. </head>
    26. <body>
    27. <div>
    28. 1
    29. </div>
    30. <div>
    31. 2
    32. </div>
    33. <div>
    34. 3
    35. </div>
    36. <div>
    37. 4
    38. </div>
    39. <div>
    40. 5
    41. </div>
    42. <div>
    43. 6
    44. </div>
    45. <div>
    46. 7
    47. </div>
    48. </body>
    49. </html>

    示例2:

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7. <title>Document</title>
    8. <style>
    9. .table{
    10. width: 40%;
    11. }
    12. .table thead tr:first-child{
    13. color: #fff;
    14. background-color: #2d61af;
    15. }
    16. .table tbody tr:nth-child(3n+1){
    17. background-color: #abcdef;
    18. }
    19. </style>
    20. </head>
    21. <body>
    22. <table class="table" border="1" cellspacing="0">
    23. <thead>
    24. <tr>
    25. <td>Name</td>
    26. <td>Age</td>
    27. <td>Gender</td>
    28. </tr>
    29. </thead>
    30. <tbody>
    31. <tr>
    32. <td>James</td>
    33. <td>28</td>
    34. <td>Boy</td>
    35. </tr>
    36. <tr>
    37. <td>Kate</td>
    38. <td>29</td>
    39. <td>Girl</td>
    40. </tr>
    41. <tr>
    42. <td>Kate</td>
    43. <td>29</td>
    44. <td>Girl</td>
    45. </tr>
    46. <tr>
    47. <td>Kate</td>
    48. <td>29</td>
    49. <td>Girl</td>
    50. </tr>
    51. <tr>
    52. <td>Kate</td>
    53. <td>29</td>
    54. <td>Girl</td>
    55. </tr>
    56. <tr>
    57. <td>Kate</td>
    58. <td>29</td>
    59. <td>Girl</td>
    60. </tr>
    61. <tr>
    62. <td>Kate</td>
    63. <td>29</td>
    64. <td>Girl</td>
    65. </tr>
    66. <tr>
    67. <td>Kate</td>
    68. <td>29</td>
    69. <td>Girl</td>
    70. </tr>
    71. </tbody>
    72. </table>
    73. </body>
    74. </html>

    querySelector:
    image.png
    querySelectorAll: 会返回一个node list,查找不到会返回一个空数组。
    image.png

    image.png
    image.png
    image.png
    image.png

    image.png

    image.png

    解决浏览器同源策略方案:
    Mac:
    chrome49以前版本
    open -a “Google Chrome” —args —disable-web-security
    chrome49以后版本
    open -a /Applications/Google\ Chrome.app —args —disable-web-security —user-data-dir

    Safari
    open -a ‘/Applications/Safari.app’ —args —disable-web-security

    Window:
    chrome.exe —disable-web-security

    chrome文件路径:
    C:\Program Files (x86)\Google\Chrome\Application

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7. <title>Document</title>
    8. </head>
    9. <body>
    10. <a href="http://www.163.com">网易</a>
    11. <button onclick="back()">Back</button>
    12. <button onclick="forward()">forward</button>
    13. <button onclick="push()">Push State</button>
    14. <script>
    15. function back(){
    16. window.history.back();
    17. }
    18. function forward(){
    19. window.history.forward();
    20. }
    21. function push(){
    22. var stateObj = { foo: 'bar'};
    23. window.history.pushState(stateObj, 'hello', 'bar.html');
    24. }
    25. window.onpopstate = function(event){
    26. console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
    27. }
    28. </script>
    29. </body>
    30. </html>