css以及css3中的選擇器

2021-07-06 06:17:38 字數 1767 閱讀 1705

css中選擇器的種類:

1、元素選擇器:

萬用字元*{} :通常用於去掉內外邊距

p{};h1{};h1,h2{}之類的都是元素選擇器

2、類選擇器

.class{}

類選擇器結合元素選擇器 : 當有兩個元素class名稱相同時,如果我們只要單獨改變乙個,可以——元素.class名稱{},如a.classname{}

多類選擇器:.class.class{}                  在thml檔案中使用時,中間空格隔開,如

不用再.class.class{}中再去定義,但同時擁有p1&p2兩種特效

3、id選擇器

#id{}

id選擇器和類選擇器的區別:

id只能在文件中使用一次,而類可以使用多次:也即是說id選擇器的名字不能重複,但是class選擇器,可以允許共用同乙個class名字。

id選擇器不能結合使用

當使用js的時候,需要用到id

4、屬性選擇器

其中4中部分屬性值選擇通過~實現,如下

5、後代選擇器

後代選擇器可以選擇作為某元素後代的元素,通過空格使用。

this is myweb hello

page

6、子元素選擇器

與後代選擇器相比,子元素選擇器只能選擇作為某元素子元素的元素,通過>使用。他與後代選擇器的不同我們還是通過上面的例子來說明。

如果我們要改變hello的顏色,後代選擇器可以直接選擇各種後代,子元素,孫子元素等等

但是子元素選擇器必須一層一層的找,

7、相鄰兄弟選擇器

可以選擇緊接在另乙個元素後的元素,且二者有相同的父元素,用+實現。應用的並不多。li+li,是item2和item3有效果

css3中新增加的選擇器:包含[att*=val]  ;  首字母[att^=val]  ;   結束字元[att$=val] 

注意:當輸入數字時,前面要加乙個「\」

css3結構性偽類選擇器,包含偽類選擇器和偽元素選擇器,在偽元素選擇器中包含first-line、first-letter、before、after

css3結構性偽類選擇器:root、not、empty、target

css3 選擇器 CSS3選擇器

子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...

css3 選擇器 CSS3選擇器詳解

css3在css2基礎上,增強或新增了許多特性,彌補了css2的眾多不足之處,使得web開發變得更為高效和便捷。比如說,同樣是乙個頭像,可能在低版本的瀏覽器中,頭像方的 在高版本的瀏覽器中,頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題,為了避免因相容性帶來的干擾...

CSS3中的選擇器

css3介紹 css3在css2基礎上,增強或新增了許多特性,彌補了css2的眾多不足之處,使得web開發變得更為高效和便捷。css3的現狀 屬性選擇器 屬性選擇器的標誌性符號是 如先建立 周一 周二週三 周四周四 格式 e title 選中頁面的e元素,並且e存在 title 屬性即可。p標籤有c...