css3 新增

1、屬性選擇器

選取标簽帶有某些特殊屬性的選擇器 我們成為屬性選擇器

div[class=demo] { /*  選出div中類名為demo的标簽 */
			color: pink;
		}
div[class^=font] { /*  選出div中類名以font開頭的标簽 */
			color: pink;
		}
div[class$=footer] { /*  選出div中類名以footer結束的标簽 */
			color: skyblue;
		}
div[class*=tao] { /* 選出div中類名包含bao的标簽 */
			color: green;
		}
           

2、僞元素選擇器，E::before和E::after

在E元素内部的開始位置和結束位建立一個元素，該元素為行内元素，且必須要結合content屬性使用，content屬性表示僞元素的内容。

div::before {
  content:"開始"; /*  在div之前添加内容“開始” */
div::after {
  content:"結束"; /* 在div之後添加内容“結束” */
}
           

3、盒模型

可以分成兩種情況：

a、box-sizing（預設）: content-box 盒子大小為 width + padding + border

content-box:此值為其預設值，其讓元素維持W3C的标準Box Mode

b、box-sizing: border-box 盒子大小為 width，就是說 padding 和 border

是包含到width裡面的，content的寬度值是會自動調整的。

4、結構(位置)僞類選擇器

li:first-child { /*  選擇父元素的第一個孩子,且為li标簽 */
              
            }
li:last-child {   /* 選擇父元素的最後一個孩子，且為li标簽 */
               
            }
li:nth-child(n) {   /* 選擇父元素的第n個孩子，且為li标簽 */ 
           
           }      
li:nth-of-type(1){ /*  選擇第一個标簽為li的孩子 */
    	  
    	   }
li:nth-child(odd){/*  選擇所有标簽為li，且為奇數的孩子 */
        
           }
li:nth-child(even){/*  選擇所有标簽為li，且為偶數的孩子 */
      
           }
           

5、pointer-events屬性

pointer-events是css3的一個屬性，指定在什麼情況下元素可以成為滑鼠事件的target（包括滑鼠的樣式）

屬性詳情介紹：

auto——效果和沒有定義pointer-events屬性相同，滑鼠不會穿透目前層。在SVG中，該值和visiblePainted的效果相同。

none——元素永遠不會成為滑鼠事件的target（目标）。但是，當其後代元素的pointer-events屬性指定其他值時，滑鼠事件可以指向後代元素，在這種情況下，滑鼠事件将在捕獲或冒泡階段觸發父元素的事件偵聽器。實際上默 認就可以穿透目前層，因為pointer-events預設為auto

适用場景：

1. 給地圖上層的元素設定pointer-events： none，保證地圖可拖動或點選
2. 禁用 a 标簽事件效果
3. 點選送出按鈕的時候，為了防止使用者一直點選按鈕，發送請求，當請求未傳回結果之前，給按鈕增加 pointer-events: none，可以防止這種情況。
4. 防止透明元素和可點選元素重疊不能點選

參考： https://www.cnblogs.com/kunmomo/p/11752669.html