選擇器是CSS的重要組成部分,能夠方便我們在網(wǎng)頁中獲取并修改指定樣式,常用選擇器如下:
標(biāo)簽選擇器:通過標(biāo)簽名選取元素,如p、h1等。 .class選擇器:通過設(shè)置元素的類名進(jìn)行選擇,如類名為red的元素可以通過".red"來選擇。 #id選擇器:通過設(shè)置元素的id進(jìn)行選擇,如id為header的元素可以通過"#header"來選擇。 后代選擇器:通過指定祖先元素和后代元素來選擇元素,如"ul li"選擇所有ul下的li元素。 偽類選擇器:通過設(shè)置元素的狀態(tài)來選擇元素,如:hover、:focus等。 通配符選擇器:選擇所有元素,如"*"選擇所有元素。
實(shí)際應(yīng)用時,我們可以將多個選擇器組合起來使用,比如:
.class1.class2:同時擁有class1和class2的元素。 .class1 .class2:class2是class1的子元素。 .class1>.class2:class2是class1的子元素,但不能是孫子元素。
使用選擇器可以更加方便的操作樣式,比如:
/*選中所有p元素并設(shè)置字體為宋體*/ p { font-family: "宋體"; } /*選中類名為red的元素并設(shè)置背景顏色為紅色*/ .red { background-color: red; } /*選中id為header的元素并添加下邊框*/ #header { border-bottom: 2px solid black; } /*選中所有ul下的li元素并設(shè)置字體顏色為綠色*/ ul li { color: green; }