一、特殊選擇器
1、* 用於匹配任何的標記
2、> 用於指定父子節點關系
3、E + F 毗鄰元素選擇器，匹配所有緊隨E元素之后的同級元素F
4、E ~ F 匹配所有E元素之后的同級元素F
5、名稱[表達式]
5.1 E[att] 匹配所有具有att屬性的E元素（[att]獲取所有的定義了att的標簽；E[att=val] 匹配所有att屬性等於“val”的E元素；
5.2 [att=val] 獲取所有定義了att屬性並且屬性值等於val的標簽；
5.3 [att^=val]獲取所有定義了att屬性並且屬性值以val開頭的標簽；
5.4 [att$=val]獲取所有定義了att屬性並且屬性值以val結尾的標簽；
5.5 [att*=val]獲取所有定義了att屬性並且屬性值包含val字符的標簽；
5.6 [att~=val]獲取所有定義了att屬性並且屬性值包含val單詞的標簽；
5.7 [att|=val]獲取所有定義了att屬性並且屬性值等於val或者以val-開頭的標簽。）
6、偽類/偽元素
6.1 css 偽類用於向某些選擇器添加特殊的效果。css 偽元素用於將特殊的效果添加到某些選擇器。
可以明確兩點，第一兩者都與選擇器相關，第二就是添加一些“特殊”的效果。這里特殊指的是兩者描述了其他 css 無法描述的東西。
偽類種類偽元素種類區別
這里用偽類 :first-child 和偽元素 :first-letter 來進行比較。
p>i:first-child {color: red} <p><i>first</i><i>second</i></p> //偽類 :first-child 添加樣式到第一個子元素
如果我們不使用偽類，而希望達到上述效果，可以這樣做：
.first-child {color: red}<p><i class="first-child">first</i><i>second</i></p>
即我們給第一個子元素添加一個類，然后定義這個類的樣式。那么我們接着看看為元素：
:p:first-letter {color: red}<p>i am stephen lee.</p> //偽元素 :first-letter 添加樣式到第一個字母
那么如果我們不使用偽元素，要達到上述效果，應該怎么做呢？
.first-letter {color: red}
<p><span class='first-letter'>i</span> am stephen lee.</p>
即我們給第一個字母添加一個 span，然后給 span 增加樣式。
兩者的區別已經出來了。那就是：
偽類的效果可以通過添加一個實際的類來達到，而偽元素的效果則需要通過添加一個實際的元素才能達到，這也是為什么他們一個稱為偽類，一個稱為偽元素的原因。
總結：
偽元素和偽類之所以這么容易混淆，是因為他們的效果類似而且寫法相仿，但實際上 css3 為了區分兩者，已經明確規定了偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。
:pseudo-classes::pseudo-elements但因為兼容性的問題，所以現在大部分還是統一的單冒號，但是拋開兼容性的問題，我們在書寫時應該盡可能養成好習慣，區分兩者。
簡單的說呢:偽元素的權重比偽類高，比如一個容器的為元素和偽類都定義了同一屬性，但值不一樣，那么將采用偽元素的。 從規范的角度偽元素一個頁面只使用一次，而偽類可以多次使用。偽元素產生新對象，在dom中看不到，但是可以操作；偽類是dom中一個元素的不同狀態；
6.1 常用的偽類
6.1.1 a:hover,a:link,a:active,a:visited,:focus /*動態偽類*/
6.1.2 :disabled,:enabled,:checked,:read-only,:read-write /*UI狀態偽類*/
6.1.2.1 :read-only 只讀狀態
6.1.2.2 :read-write 非只讀狀態
6.1.3 css3偽類
6.1.3.1 :nth-child(n)其父元素的第n個元素（如：p:nth-child(2){color:red;} p元素是其父元素的第2個元素的話字體顏色就是紅色）
6.1.3.2 nth-last-child(n) 其父元素的倒數第n個元素
6.1.3.3 :nth-of-type(n) （如：p:nth-of-type(2){color:red;} p元素是其父元素的第2個p元素的話字體顏色就是紅色）
6.1.3.4 :first-child 其父元素的第一個元素
6.1.3.5 :last-child 其父元素的最后一個元素
6.1.3.6 nth-last-of-type(n) （如：p:nth-last-of-type(2){color:red;} p元素是其父元素的倒數2個p元素的話字體顏色就是紅色）
6.1.3.7 :first-of-type 其父元素的第一個p元素
6.1.3.8 :last-of-type 其父元素的最后一個p元素
6.1.4 :not() /*否定偽類選擇器*/ (如：p:not(.a){color:red;})
6.2 常用的偽元素
6.2.1 :before,::after
<style type="text/css"> p::before { content:"台詞：";
} </style> </head> <body> <p>我是唐老鴨。</p> <p>我住在 Duckburg。</p> <p><b>注釋：</b>對於在 IE8 中工作的 :before，必須聲明 DOCTYPE。</p> </body>
6.2.2 ::first-letter
<style type="text/css"> p::first-letter { color:red;
} </style> </head> <body> <p>我是唐老鴨。</p> <p>我住在 Duckburg。</p> <p><b>注釋：</b>對於在 IE8 中工作的 :before，必須聲明 DOCTYPE。</p> </body>
6.2.3 ::first-line
<style type="text/css"> p::first-line { color:red;
} </style> </head> <body> <p>我是唐老鴨。</p> <p>我住在 Duckburg。</p> <p><b>注釋：</b>對於在 IE8 中工作的 :before，必須聲明 DOCTYPE。注釋：</b>對於在 IE8 中工作的 :before，必須聲明 DOCTYPE。注釋：</b>對於在 IE8 中工作的 :before，必須聲明 DOCTYPE。注釋：</b>對於在 IE8 中工作的 :before，必須聲明 DOCTYPE。</p> </body>
6.2.4 ::selection
<style type="text/css"> ::selection { color:red; background-color:#00F;
} </style> </head> <body> <p>我是唐老鴨。</p> <p>我住在 Duckburg。</p> <p><b>注釋：</b>對於在 IE8 中工作的 :before，必須聲明 DOCTYPE。注釋：</b>對於在 IE8 中工作的 :before，必須聲明 DOCTYPE。注釋：</b>對於在 IE8 中工作的 :before，必須聲明 DOCTYPE。注釋：</b>對於在 IE8 中工作的 :before，必須聲明 DOCTYPE。</p> </body>
二、CSS權重
1、權重列表
<style>
/*A>B>C>D>0*/ .main-content{color:#666;}/*0*/ h3{color:#f00;}/*D*/ .h3{color:#0f0;}/*C*/ .main-content h3{color:#00f;}/*CD*/ .main-content .h3{color:#0ff;}/*CC*/ #h3{color:#ff0;}/*B*/
</style>
</head>
<body>
<div class="main-content">
<h3 class="h3" id="h3">你好</h3>
</div>
</body>
三、CSS3新增屬性
1、定義文本樣式
1.1 文字陰影text-shadow
<style> p { font-size:60px; font-weight:900; color:#999; text-shadow:5px 5px 5px #333,/*水平位移、垂直位移、模糊半徑、顏色*/ -15px 15px 5px #333, -15px -15px 5px #333;
}
</style>
</head>
<body>
<p>HTML5+CSS3</p>
</body>
1.2 文字縮進text-indent
1.3 文本換行
<style> p { width:100px; border:solid 1px red; word-wrap:break-word;/*斷單詞*/ word-break:break-all;/*斷字符*/ white-space:nowrap;/*強制在一行內顯示所有文本*/
}
</style>
</head>
<body>
<p>中英混對薩排的時候English English English English English</p>
</body>
1.4 文本溢出
<style type="text/css"> div { width:200px; white-space:nowrap; border:solid 1px red; text-overflow:clip;/*不顯示省略標記，而是簡單的裁切掉*/ text-overflow:ellipsis;/*當對象內文本溢出時顯示省略標記*/ overflow:hidden;
}
</style>
</head>
<body>
<div>的撒打算打算打算大神大神大神大神大神</div>
</body>
1.5 圓角 border-radius
1.6 陰影 box-shadow
1.7 背景圖片鋪滿 background-size:cover
1.8 transform
<style type="text/css"> #d1 { width:100px; height:100px; background-color:#00F;
} #d1:hover { transform:rotate(40deg) scale(1.2);/*順時針旋轉40度，放大1.2倍*/ transform:translate(40px,40px);/*水平偏移40px,垂直偏移40px*/ transform:skew(30deg,-10deg);/*水平傾斜30度，垂直傾斜10度*/
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
1.9 平滑過渡 transition
<style type="text/css"> #d1 { width:100px; height:100px; background-color:#00F;
} #d1:hover { background-color:#F00; transition:background-color 1s ease-in;/*過渡的屬性，如果是所有的則是all，經歷的時間，過渡效果*/
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
2.0 更復雜的動畫 animation
<style type="text/css"> #d1 { magin:0px auto; width:959px; height:613px; background-image:url("11.jpg"); animation:x-spin 20s infinite linear;/*動畫名稱，經歷時間，播放次數(為infinite則一直播放)，播放方式*/
} @-webkit-keyframes x-spin { 0%{ transform:rotateX(0deg);/*沿x軸開始旋轉*/
} 50%{ transform:rotateX(180deg);/*沿x軸旋轉180*/
} 10%{ transform:rotateX(360deg);/*沿x軸旋轉360*/
} } </style>
</head>
<body>
<div id="d1"></div>
</body>
<style type="text/css"> #d1 { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite;
} @keyframes mymove { from {left:0px;} to {left:200px;} } </style>
</head>
<body>
<div id="d1"></div>
</body>
2.1 漸變
<style type="text/css"> #d1 { height:200px; width:400px; border:solid 1px red;
/*線性漸變，開始位置，結束位置，開始的顏色，結束的顏色，色標（色標位置，色標顏色，可以有多個色標，色標即是顏色過渡點）*/ //background:-webkit-gradient(linear,left top,left bottom,from(blue),to(red),color-stop(0.4,#fff),color-stop(0.6,#fff));
/*徑向漸變，內圓圓心位置，內圓半徑，外圓圓心半徑，外圓半徑，開始顏色，結束顏色，色標*/ background:-webkit-gradient(radial, center center, 0, center center, 460, from(blue), to(red),color-stop(0.6,#fff));
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
2.2 響應式布局
<style type="text/css"> /*屏幕寬度大於900的時候*/ * { padding:0px; margin:0px; font-family:"微軟雅黑"; } #header { height:100px; border:solid 1px red; margin:0px auto; } #main { margin:10px auto; height:400px; } #footer { margin:0px auto; height:100px; border:solid 1px red; } @media screen and (min-width:900px) { #header,#footer { width:800px; } #main { width:800px; height:400px;; } #main-left { width:200px; height:400px; border:solid 1px red; float:left; } #main-center { width:394px; height:400px; border:solid 1px red; float:left; } #main-right { width:200px; height:400px; border:solid 1px red; float:left; } } @media screen and (min-width:600px) and (max-width:900px) { #header,#footer { width:600px; } #main { width:600px; height:400px;; } #main-left { width:200px; height:400px; border:solid 1px red; float:left; } #main-center { width:396px; height:400px; border:solid 1px red; float:left; } #main-right { display:none; } } @media screen and (max-width:600px) { #header,#footer { width:300px; } #main { width:300px; height:400px;; } #main-left { display:none; } #main-center { width:300px; height:400px; border:solid 1px red; } #main-right { display:none; } } </style> </head> <body> <div id="header">頭部</div> <div id="main"> <div id="main-left">主題-左邊</div> <div id="main-center">主題-中間</div> <div id="main-right">主題-右邊</div> </div> <div id="footer"></div> </body>