一、使用 :not() 在菜單上應用/取消應用邊框
我們通常的做法是先給每個菜單項設置邊框，然後在設置最後一個菜單的邊框爲零
/* add border */
.nav li {
border-right: 1px solid #666;
}
//* remove border */
.nav li:last-child {
border-right: none;
}
web前端開發學習Q-q-u-n：6-0-3-9-8-5-9-9-3，分享學習的方法和需要注意的小細節，
不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻，PDF）
不過不要這麼做，使用 :not() 僞類來達到同樣的效果：
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
當然，你也可以使用 .nav li + li 或者 .nav li:first-child ~ li ，但是 :not() 更加清晰，具有可讀性
.nav li + li{
border-left:1px solid #666;}
/*.nav li:first-child ~ li{
border-left:1px solid #fff;
}*/
二、使用:nth-child(n)選擇項目
(注：第一個子元素的下標是 1)
:nth-child(3) 表示選擇列表中的第三個元素
:nth-child(2n)表示列表中的偶數標籤，即選擇第2、第4、第6……標籤
:nth-child(2n-1) 表示選擇列表中的奇數標籤，即選擇 第1、第3、第5、第7……標籤
:nth-child(n+3) 表示選擇列表中的標籤從第3個開始到最後（>=3）
:nth-child(-n+3) 表示選擇列表中的標籤從0到3，即小於3的標籤(<=3)
:nth-last-child(3) 表示選擇列表中的倒數第3個標籤
:nth-of-type(n) 匹配屬於父元素的特定類型的第 N 個子元素的每個元素
三、隱藏沒有靜音、自動播放的影片
video[autoplay]:not(:muted){
display:none;
}
再次，利用了:not()的優點
四、IE 條件註釋
IE 中的條件註釋對 IE 的版本和 IE 非 IE 有優秀的區分能力，是 Web 開發中常用的hack方法，能對 IE 系列產品進行單獨的 HTML 代碼處理
<!--[if lt IE 9]>
//解決ie9以下瀏覽器對html5新增標籤的不識別，並導致CSS不起作用的問題
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
//讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]—>
gt : greater than，選擇條件版本以上版本，不包含條件版本
lt : less than，選擇條件版本以下版本，不包含條件版本
gte : greater than or equal，選擇條件版本以上版本，包含條件版本
lte : less than or equal，選擇條件版本以下版本，包含條件版本
! : 選擇條件版本以外所有版本，無論高低
五、固定表格table-layout:fixed;
通常搭配word-wrap:break-word;和word-break:break-all;使用
CSS3 word-wrap 屬性
word-wrap: normal|break-word;
CSS3 word-break 屬性
word-break: normal|break-all|keep-all;
在成爲一個優秀的前端工程師的道路上，充滿了汗水和辛勞