通過選擇器可以選中頁面中的指定元素，從而為其設(shè)置樣式
到了工作上一般用的外部樣式表link標簽引入
元素選擇器

• 通過標簽嗎選中頁面中所有元素
• 語法： 標簽名
  id選擇器
• image.png
  
  一個元素可以同時指定多個class，多個class間使用空格隔開
• image.png
  
  屬性選擇器
  可以根據(jù)元素的屬性值來選中指定元素
  title屬性可以設(shè)置元素上的提示文字
• image.png
  
  屬性選擇器:
  作用:根據(jù)元素的屬性來選中元素
  語法:
  [屬性名]
• 選中含有某個屬性的元素，只要是屬性都行，不論是title，class，id都行，
  [屬性名]=[屬性值]
  選中某個屬性等于某個值的元素
• image.png
  
  ^表示以什么什么開頭
  $表示以什么什么結(jié)尾
  表示任意位置，只要包含就行
• image.png
  
  語法
  [屬性名]
  選中含有某個屬性的元素
  [屬性名=屬性值]
  選中某個屬性等于某個值的元素
  [屬性名^=屬性值]
  選中屬性以指定內(nèi)容開頭的元素
  [屬性名$=屬性值]
  選中屬性以指定內(nèi)容結(jié)尾的元素
  [屬性名*=屬性值]
  選中屬性包含指定內(nèi)容的元素

復合選擇器

• image.png
• 如果屬性名相同，只選擇一個就這樣寫，首先滿足p元素，然后class是abc
• image.png
  
  交集選擇器
• image.png
  
  

  交集選擇器：

  • 作用：可以選中同時符合多個選擇器的元素
  • 語法:選擇器1選擇器2選擇器3..選擇器N
    • 例子:div.box1.box2,box，一般不會這樣寫，太麻煩了
    • 注意：交集選擇器有元素選擇器時，必須以元素開頭

選擇器分組（并集選擇器）

• image.png
  
  逗號表示或、和的意思，不寫空格直接寫標簽名+子元素表示且的意思

關(guān)系選擇器
直接被父元素所包含的元素是子元素
祖先元素
直接或間接包含后代元素的元素是祖先元素
父元素也是祖先元素
后代元素
直接或間接被祖先元素包含的元素是后代元素
子元素也是后代元素
兄弟元素
擁有相同父級元素的元素

• 這種表示后代的后代，一般不寫的太長，服務(wù)器會解析很慢
• image.png
  
  子元素選擇器
• image.png
  
  

  子元素選擇器，范圍比較小
  作用:選中指定元素的子元素
  語法:父元素>子元素{
  例子:div>p{}

• 兄弟元素選擇器，+表示下一個兄弟元素
• image.png
• image.png
  
  兄弟元素選擇器
  作用:選中指定元素的兄弟元素
  語法:兄+弟{}選中下一個兄弟元素
  兄~弟{}選中下邊所有的兄弟元素

偽類選擇器

• 寫父子結(jié)構(gòu)的快捷鍵ul>li>a
• image.png
  
  div.box$*3，創(chuàng)建三個盒子，以此類推
  偽類都是以：開頭
• 超鏈接相關(guān)的偽類：
  • : link 沒有訪問過的鏈氣
  • : visited 訪問過的鏈接
  • : hover 鼠標移入的鏈接，也可以設(shè)置移入變大，設(shè)置font-size就可以了
  • : active 鼠標點擊的鏈接

一個鏈接是否訪問過，由用戶的歷史記錄決定，由于visited會涉及到用戶的隱私，所以通過visited只能修改文字的顏色，這種效果在實際開發(fā)中使用的不多

:link和：visited是超鏈接獨有的
:hover和:active可以適用于其他元素

結(jié)構(gòu)偽類
first-child表示第一個子元素

• -
• first-of-type同類型里面的第一個
• image.png
  
  last-of-type同類型里面的最后一個子元素
  nth-child()第n個子元素，如果寫n，則n表示從0開始的整數(shù)

否定偽類
為所有的P元素設(shè)置一個紅色的字體，除了class為p1的

• image.png

否定偽類:not()

• 作用：將符合條件的元素從己有元素中去除
• image.png
  
  - 這表示所有的子元素除了第一個
• image.png

偽元素

-偽元素用來表示一些特殊的位置
-通常偽元素需要以::開頭
::selection表示被選中的內(nèi)容
::first-letter表示首字母
::first-line表示文字首行
::before元素開始的位置，這是純css添加的，不在結(jié)構(gòu)里面，所以是選不中的
::after元素結(jié)束的位置

• image.png
  
  在before和after中可以通過content來為兩個位置添加內(nèi)容，
  一 content中的文字必須用引號引起來。
  簡單用法可以在文字前面加前雙引號，在文字后面加后雙引號
• -

HBuilderX在運行網(wǎng)頁時，為了使網(wǎng)頁可以自動重新加載
所以它偷偷的在網(wǎng)頁中添加了一些]S腳本，那么第二個p就不是最后一個元素了，可以用div包起來就可以了
<p>第一個p元素</p>
<p>第二個P元素</p>

• 這里是找p元素的，而不是找p元素的子元素，因為p是body的子元素
• image.png