Two practical CSS3 properties, and web production skills

First, use: not () apply / cancel applications border on the menu

Our usual practice is to give each menu item to set the border, and then set the final borders of a menu to zero

/* add border */
.nav li {
  border-right: 1px solid #666;
}

//* remove border */
.nav li:last-child {
  border-right: none;
}
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

But do not do this, use: not () pseudo-class to achieve the same effect:

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

Of course, you can also use .nav li + li or .nav li: first-child ~ li, but: not () more clear, readable

.nav li + li{
    border-left:1px solid #666;}

/*.nav li:first-child ~ li{
    border-left:1px solid #fff;
}*/

Second, use: nth-child (n) selection item

(Note: subscript 1 is the first child element)

: Nth-child (3) indicating the selection list third element

: Nth-child (2n) denotes an even tag list, i.e., selects the second, fourth, sixth ...... tag

: Nth-child (2n-1) represents the selection list odd label, i.e., selects the first, third, fifth, seventh ...... tag

: Nth-child (n + 3) represents a label selected from the list to the last three (> = 3)

: Nth-child (-n + 3) represents selected tag list from 0 to 3, i.e., the label is less than 3 (<= 3)

: Nth-last-child (3) represents the inverse of the selection list Tab 3

: Each element nth-of-type (n) matches the parent element belonging to the N-th sub-elements of a particular type

Third, the hide is not muted, auto-play video

video[autoplay]:not(:muted){
    display:none;
}
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

Again, use of the :not()advantages

Four, IE conditional comment

In IE conditional comments have excellent ability to distinguish between versions of IE and non-IE IE, is commonly used in Web development hack method can separate the HTML code for IE processing products

<!--[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]—>

web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

gt: greater than, or later versions of the selection criteria, the condition does not include version
lt: less than, the following selection criteria version version version does not include conditional
gte: greater than or equal, selection criteria or later version, the version contained conditions
lte: less than or equal, the following selection criteria version version version contains conditions
!: Select all versions except the condition version, regardless of the level of

Fifth, form a fixed table-layout: fixed;

Typically with word-wrap: break-word; and a word-break: break-all; the use of

CSS3 word-wrap property

word-wrap: normal|break-word;

Two practical CSS3 properties, and web production skills

CSS3 word-break property

word-break: normal|break-all|keep-all;

Two practical CSS3 properties, and web production skills

Note: To be continued, discover new skills will continue to update