css3中新增的一些有用的選擇器

2022-03-07 20:10:37 字數 1022 閱讀 4917

css3中新增呢很多新的玩意!有的東西玩著玩著就會被玩壞(呵呵,只是沒什麼用很雞助),這來總結下我認為有用的, 不喜勿噴!有錯誤就請指出!絕對自己總結的,不當伸手黨!

屬性選擇器:

div[index]    表示div下面帶index屬性的背景為紅色

div[index=a]  表示div下面的自定義屬性index=a的div的顏色變成紅色。

div[index~=a]    只要div中index屬性帶a這個單詞的就生效。

div[index*=a]     只要div裡面的index屬性帶a字母的就生效。

div[index^=a]   以a開頭的

div[index$=a]    以a結尾

div[index|=a]    只要以a-開頭的

當需要多個的時候:div[key1=value1][key2=value2][key3=value3]....

結構性偽類選擇器:

element:nth-child(n)   第幾個元素,從一開始!!

element:nth-child(odd)奇數

element:nth-child(even)偶數

element:nth-last-child(n) 從倒數第幾個開始

element:last-child    最後乙個

element:first-child    第乙個

文字偽元素

p:first-line{}第一行

p:first-letter{}第乙個字

p::selection{}文字選中時的時候  :: 代表超偽類  沒有p的時候代表全部變

其他:empty  空元素

:disabled   不可操作的元素

:enabled  可操作的元素

:checked  選中的元素

:not(some)不包含some的元素

:target  錨點對應的元素

::before{content:''}必須有content屬性

::afert{content:''}

常用的一些 CSS3 選擇器

list item list item list item 選擇器 container ul只會匹配到第乙個ul,也就是 container的子元素ul,而不是li裡面的ul,但是div ul則可以匹配到所有div裡面的ul。檢視演示 相容性ie7 但是如果我們給a標籤新增乙個data filety...

css3的一些屬性

以前還沒有注意過css的一些屬性,近期發現有一些樣式很好用,現在整理一遍。keyframes 規定動畫 可以通過keyframes 改變乙個塊的樣式當然這是要配合animation屬性來結合的 keyframes mymove mymove必須定義動畫的名稱在 100 moz keyframes m...

CSS3 中的一些簡單格式

css 1.格式 2.注意點 1.寫在head 標籤之間 2.type text css 預設也是這個 3.大多數情況下分號不能省略 樣式 1.行內樣式 直接將css 寫到開始標籤當中 2.內嵌標籤 可以在標籤中寫上一對style標籤,然後在style標籤中編寫css 3.外鏈樣式 單獨新建乙個.c...