軟體體系結構風格（第5-8課時）
複合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標籤。
交集選擇器
交集選擇器由兩個選擇器構成，其中第一個為標籤選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，如h3.special。
記憶技巧：
交集選擇器 是 並且的意思。 即...又...的意思
比如： p.one 選擇的是： 類名為 .one 的 段落標籤。
用的相對來說比較少，不太建議使用。
並集選擇器（CSS選擇器分組）是各個選擇器通過逗號連線而成的，任何形式的選擇器（包括標籤選擇器、class類選擇器id選擇器等），都可以作為並集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用並集選擇器為它們定義相同的CSS樣式。
記憶技巧：
並集選擇器 和 的意思， 就是說，只要逗號隔開的，所有選擇器都會執行後面樣式。
比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 這三個選擇器都會執行顏色為紅色。 通常用於集體宣告。
後代選擇器
後代選擇器又稱為包含選擇器，用來選擇元素或元素組的後代，其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔。當標籤發生巢狀時，內層標籤就成為外層標籤的後代。
子孫後代都可以這麼選擇。 或者說，它能選擇任何包含在內 的標籤
子元素選擇器
子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個>進行連線，注意，符號左右兩側各保留一個空格。
比如： .demo > h3 {color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含著h3。
屬性選擇器
選取標籤帶有某些特殊屬性的選擇器 我們稱為屬性選擇器
<style> /*選擇input中帶有value屬性的*/ input[value]{ color:pink; }/*選擇input中帶有type屬性且值為password的*/ input[type="password"]{ color:red; }
/*選擇input中有name屬性且屬性值以pas開頭的*/ input[name^=pas]{ color:royalblue; }
/*選擇input中有name屬性且屬性值以word結尾的*/ input[name$=word]{ color:violet; }
/*選擇input中有type屬性且屬性值中含有t的*/ input[type*="t"]{ color:aqua; } </style> <body> <inputtype="text"value="123"name="text"> <inputtype="password"name="pas"> <inputtype="text"name="password"> <inputtype="text"name="word"> </body>
-
E::first-letter文字的第一個單詞或字（如中文、日文、韓文等）
-
E::first-line 文字第一行；
-
E::selection 可改變選中文字的樣式；
p::first-letter {
font-size: 20px;
color: hotpink;
}
/* 首行特殊樣式 */
p::first-line {
color: skyblue;
}
p::selection {
/* font-size: 50px; */
color: orange;
}
4、E::before和E::after
在E元素內部的開始位置和結束位建立一個元素，該元素為行內元素，且必須要結合content屬性使用。
div::befor {
content:"開始";
}
div::after {
content:"結束";
}
E:after、E:before 在舊版本里是偽元素，CSS3的規範裡“:”用來表示偽類，“::”用來表示偽元素，但是在高版本瀏覽器下E:after、E:before會被自動識別為E::after、E::before，這樣做的目的是用來做相容處理。
E:after、E:before後面的練習中會反覆用到，目前只需要有個大致瞭解
":" 與 "::" 區別在於區分偽類和偽元素