CSS基础选择器：
    image.png

    1. //元素选择器
    2. div{
    3. }
    5. //类选择器
    6. .my-class{
    7. }
    9. // id选择器
    10. #test{
    11. }
    13. // * 通配符选择器
    14. *{}
    16. // 并集选择器
    17. div,.my-class,#test{
    18. }
    20. //组合选择器
    21. div.my-class{
    22. } // div元素，并且class类要为my-class
    24. div .my-class{
    25. } // 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.         /* 层次选择器 */
    4.         /* 1、子集选择器 */
    5.         /* div 下面所有的子元素p（不包含孙子元素） */
    6.         div>p{
    7.             color: red;
    8.         }
    10.         /* 兄弟选择器 */
    11.         /* .main-span 元素的第一个紧挨着的兄弟元素 */
    12.         .main-span1 + p{
    13.             color:blue;
    14.         }
    16.         /* 后代选择器 */
    17.         /* div 中所有的p元素 */
    18.         div p{
    19.             color:brown;
    20.         }
    22.         /* 通用选择器 */
    23.         /* 所有的后面同级元素 */
    24.         .main-span2 ~ p{
    25.             color:cyan;
    26.         }
    28.     </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.         /* 层次选择器 */
    11.         /* 1、子集选择器 */
    12.         /* div 下面所有的子元素p（不包含孙子元素） */
    13.         div>p{
    14.             color: red;
    15.         }
    17.         /* 兄弟选择器 */
    18.         /* .main-span 元素的第一个紧挨着的兄弟元素 */
    19.         .main-span1 + p{
    20.             color:blue;
    21.         }
    23.         /* 后代选择器 */
    24.         /* div 中所有的p元素 */
    25.         div p{
    26.             color:brown;
    27.         }
    29.         /* 通用选择器 */
    30.         /* 所有的后面同级元素 */
    31.         .main-span2 ~ p{
    32.             color:cyan;
    33.         }
    34.     </style>
    35. </head>
    36. <body>
    37.      <div>
    38.          <p>Hello</p>
    39.          <p>World</p>
    40.          <span>
    41.              <p>haha</p>
    42.          </span>
    43.      </div>
    44. ---------------------------------------
    45.      <p>Top</p>
    46.      <div class="main-span1">
    47.          Main
    48.      </div>
    49.      <p>Bottom</p>
    50.      <p>Last</p>
    51. --------------------------------------
    52.      <p>Top</p>
    53.      <div class="main-span2">
    54.          Main
    55.      </div>
    56.      <p>Bottom</p>
    57.      <p>Last</p>
    58. </body>
    59. </html>

    动态伪类选择器：

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

    1. <style>
    2.         /* div鼠标悬停 */
    3.         div:hover{
    4.             color: red;
    5.         }
    7.         /* 链接 */
    8.         a:link{
    9.             color:olive;
    10.         }
    12.         /* 悬停 */
    13.         a:hover{
    14.             color:blue;
    15.         }
    17.         /* 按住未松开的样式 */
    18.         a:active{
    19.             color:green;
    20.         }
    22.         /* 访问后 */
    23.         a:visited{
    24.             color:red;
    25.         }
    27.          /* 链接或输入框 */
    28.         a:focus{
    29.             color:orange;
    30.         }
    31.     </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.         }
    14.         /*  */
    15.         div:nth-child(3n+3){
    16.             color: red;
    17.             border: 2px solid red;
    18.             margin-bottom: 2px;
    19.         }
    20.         /* div:nth-child(even){
    21.             color: green;
    22.             border: 2px solid green;
    23.             margin-bottom: 2px;
    24.         } */
    25.     </style>
    26. </head>
    27. <body>
    28.     <div>
    29.         1
    30.     </div>
    31.     <div>
    32.         2
    33.     </div>
    34.     <div>
    35.         3
    36.     </div>
    37.     <div>
    38.       4
    39.     </div>
    40.     <div>
    41.        5
    42.     </div>
    43.     <div>
    44.        6
    45.     </div>
    46.     <div>
    47.        7
    48.     </div>
    49. </body>
    50. </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.        }
    13.        .table thead tr:first-child{
    14.            color: #fff;
    15.            background-color: #2d61af;
    16.        }
    17.        .table tbody tr:nth-child(3n+1){
    18.            background-color: #abcdef;
    19.        }
    21.     </style>
    22. </head>
    23. <body>
    24.     <table class="table" border="1" cellspacing="0">
    25.         <thead>
    26.             <tr>
    27.                 <td>Name</td>
    28.                 <td>Age</td>
    29.                 <td>Gender</td>
    30.             </tr>
    31.         </thead>
    32.         <tbody>
    33.             <tr>
    34.                 <td>James</td>
    35.                 <td>28</td>
    36.                 <td>Boy</td>
    37.             </tr>
    38.             <tr>
    39.                 <td>Kate</td>
    40.                 <td>29</td>
    41.                 <td>Girl</td>
    42.             </tr>
    43.             <tr>
    44.                     <td>Kate</td>
    45.                     <td>29</td>
    46.                     <td>Girl</td>
    47.                 </tr>
    48.                 <tr>
    49.                         <td>Kate</td>
    50.                         <td>29</td>
    51.                         <td>Girl</td>
    52.                     </tr>
    53.                     <tr>
    54.                             <td>Kate</td>
    55.                             <td>29</td>
    56.                             <td>Girl</td>
    57.                         </tr>
    58.                         <tr>
    59.                                 <td>Kate</td>
    60.                                 <td>29</td>
    61.                                 <td>Girl</td>
    62.                             </tr>
    63.                             <tr>
    64.                                     <td>Kate</td>
    65.                                     <td>29</td>
    66.                                     <td>Girl</td>
    67.                                 </tr>
    68.                                 <tr>
    69.                                         <td>Kate</td>
    70.                                         <td>29</td>
    71.                                         <td>Girl</td>
    72.                                     </tr>
    74.         </tbody>
    75.     </table>
    76. </body>
    77. </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>