CSS3的出現給網頁設計師帶來了很多好處,其中之一就是新增了很多選擇器。下面介紹一些常用的CSS3選擇器。
/* 屬性選擇器 */ input[type="text"] { color: blue; } /* 偽類選擇器 */ a:hover { text-decoration: underline; } /* 相鄰兄弟選擇器 */ h1 + p { font-size: 1.2em; } /* 通用兄弟選擇器 */ h2 ~ p { margin-left: 20px; } /* 偽元素選擇器 */ p::after { content: " - "; }
上面五個選擇器分別是屬性選擇器、偽類選擇器、相鄰兄弟選擇器、通用兄弟選擇器和偽元素選擇器。
屬性選擇器可以根據某個屬性的值來選擇元素,比如上面的例子是選擇所有type為text的input元素并設置顏色為藍色。
偽類選擇器可以根據元素的狀態來選擇元素,比如上面的例子是選擇鼠標滑過時的鏈接并設置下劃線。
相鄰兄弟選擇器和通用兄弟選擇器都是兄弟元素選擇器的一種,可以選擇指定兄弟元素。相鄰兄弟選擇器只能選擇后一個兄弟元素,而通用兄弟選擇器可以選擇后面所有兄弟元素。上面的例子是選擇h1元素后面的第一個p元素設置字體大小,和選擇h2后面所有的p元素并給它們添加20px的左邊距。
偽元素選擇器可以在元素的內部或外部創建虛擬的元素,常用的有before和after。上面的例子是在每個p元素后面添加“ - ”。
以上是常用的五種CSS3選擇器,可以根據自己的需要選擇合適的來設計網頁。
上一篇css3好看的課程表
下一篇css3培訓哪家好