強大的css偽選擇器,CSS中有哪些常用選擇器?
一、CSS選擇器有哪些
CSS中的選擇器很多,比如:ID選擇器,類選擇器,通配符選擇器,偽類選擇器等等,接下來主要介紹常用的幾個。
1.標簽選擇器
語法:標簽名{},eg:h1{}//為所有的h1元素設置樣式。
2.ID選擇器
語法:#id名{}//id值唯一不能重復,eg:#top{}//為id為top的元素設置樣式。
3.類選擇器
語法:.class{},eg:.box{}//為所有的class值為box的元素設置樣式。
4.組選擇器
語法:選擇器1,選擇器2,選擇器N{},eg:#box1,.box2,p{}//為id為box1,class為box2和p的元素共同設置樣式。
5、通配符選擇器
語法:*{},eg:*{font-size:16px}//將整個頁面字體大小設為16px。
6.后代選擇器
語法:選擇器1選擇器2{},eg:p.aa{}//選中指定祖先元素p的指定后代.aa。
7.子元素選擇器
語法:父元素>子元素{},eg:p>.box{}//選中父元素p的指定子元素.box。注意與后代元素選擇器的區別
8.偽類選擇器
偽類可以用來表示一些特殊的狀態,如:
:link-未訪問過的超鏈接。
:visited-已訪問過的超鏈接。
:hover-鼠標經過的元素。
:active-正在點擊的元素。
eg:a:hover{color:red}//鼠標經過a標簽時,顏色變為紅色。
二、CSS選擇器的優先級順序
當同一屬性的不同值都作用到了同一個元素時,如果定義的屬性之間有沖突,那么應該用誰的值的,這個時候就涉及到CSS的優先級順序了。
1.在屬性后面使用!important會覆蓋頁面內任何位置定義的元素樣式。
2.作為style屬性寫在元素內的內部樣式
3.id選擇器
4.類選擇器
5.標簽選擇器
6.通配符選擇器
7.瀏覽器自定義或繼承的
css復合選擇器有哪三種?
1、元素選擇器 標簽名{ }
2、id選擇器 #id屬性值{ }
3、類選擇器 .class屬性值{ }
4、選擇器分組(并集選擇器)
作用:通過它可以同時選中多個選擇器對應的元素(通常用于集體聲明)
語法:選擇器1,選擇器2,選擇器n{ }
5、復合選擇器(交集選擇器)
作用:選擇更準確更精細的目標元素并為其設置屬性
語法:選擇器1選擇器2選擇器n{ }
!注意選擇器之間不能有空格,要緊挨在一起
6、通配選擇器
作用:用來選中頁面中所有的元素
語法:*{ }
7、后代元素選擇器
作用:選中指定元素的指定后代元素
語法:祖先元素 后代元素{ }
8、子元素選擇器
作用:選中指定父元素的子元素
語法:父元素>子元素
9、偽類選擇器
偽類表示元素的一種特殊狀態
:hover 移入時元素的狀態
:visited 已被訪問過后的元素的狀態
:active 被點擊時元素的狀態
10、 屬性選擇器
作用:根據元素中的屬性或屬性值來選取指定元素
語法:[屬性名]選取含有指定屬性的元素
? [屬性名=“屬性值”]選取含指定屬性值的元素
? [屬性名^="屬性值"] 選取屬性值以指定內容開頭的元素
? [屬性名$="屬性值"] 選取屬性值以指定內容結尾的元素
? [屬性名*="屬性值"] 選取屬性值包含指定內容的元素
11、兄弟元素選擇器
+選擇器
作用:選中一個元素后緊挨著的指定的兄弟元素
語法:前一個+后一個(作用在后一個)
~選擇器
作用:選中后邊所有的制定兄弟元素
語法:前一個~后邊所有
css元素的排列規則主要分為?
1、代表內聯樣式,如: style=””,權值為1000。
2、代表ID選擇器,如:#content,權值為100。
3、代表類,偽類和屬性選擇器,如.content,權值為10。
4、代表類型(元素)選擇器和偽元素選擇器,如div p,權值為1。 按照CSS代碼的執行先后順序。如果有重復的規則,按照后執行的定義。最終規則是多個定義規則的綜合。重點:高級規則定義對于不同表格的文字樣式定義。(不同表格使用不同ID、使用類樣式定義)一頁中的多種超級鏈接樣式定義。多個相同規則不同對象的CSS共同定義。對于同一對象定義的多種CSS方式考慮哪種更科學。
偽dom是什么意思啊?
“偽DOM自定義事件”是自己定義的一個名詞,用來區分DOM自定義事件的。例如jQuery庫,其是基于包裝器(一個包含DOM元素的中間層)擴展事件的,既與DOM相關,又不直接是DOM,因此,稱之為“偽DOM自定義事件”。
virtual DOM 虛擬DOM,用普通js對象來描述DOM結構,因為不是真實DOM,所以稱之為虛擬DOM。
虛擬 dom 是相對于瀏覽器所渲染出來的真實 dom而言的,在react,vue等技術出現之前,我們要改變頁面展示的內容只能通過遍歷查詢 dom 樹的方式找到需要修改的 dom 然后修改樣式行為或者結構,來達到更新 ui 的目的。