divulli就像省市縣一樣,一級下面又有一級!a代表的是鏈接,有四種狀態(tài)a:link鏈接未點擊上去時候a:visited鏈接已經(jīng)點擊過的a:hover鼠標放在鏈接上未點擊a:active是介于hovervisited之間的一個狀態(tài),可以說是鏈接被按下時候的狀態(tài)
讓客戶滿意是我們工作的目標,不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴,公司提供的服務項目有:申請域名、網(wǎng)絡空間、營銷軟件、網(wǎng)站建設、惠濟網(wǎng)站維護、網(wǎng)站推廣。
1、標記選擇器(如:body,div,p,ul,li)
2、id選擇器(如:id="name",id="name_txt")
3、類選擇器(如:id="name",id="name_txt")
4、后代選擇器(如:#head.navulli從父集到子孫集的選擇器)
5、子元素選擇器(如:divp,帶大于號)
6、偽類選擇器(如:就是鏈接樣式,a元素的偽類,4種不同的狀態(tài):link、visited、active、hover。)
看完了基本的css選擇器類型后,我們接著來看一下css優(yōu)先級的概念。
當兩個規(guī)則都作用到了同一個html元素上時,如果定義的屬性有沖突,那么應該用誰的值的,用到誰的值誰的優(yōu)先級就高。
我們來看一下css選擇器優(yōu)先級的算法:
每個規(guī)則對應一個初始"四位數(shù)":0、0、0、0
若是行內(nèi)選擇符,則加1、0、0、0
若是ID選擇符,則加0、1、0、0
若是類選擇符/偽類選擇符,則分別加0、0、1、0
若是元素選擇符,則分別加0、0、0、1
算法:將每條規(guī)則中,選擇符對應的數(shù)相加后得到的”四位數(shù)“,從左到右進行比較,大的優(yōu)先級越高。
看完了上述內(nèi)容,那我們就來看看css選擇器優(yōu)先級的具體排序。
css選擇器優(yōu)先級最高到最低順序為:
1.id選擇器(#myid)
2.類選擇器(.myclassname)
3.標簽選擇器(div,h1,p)
4.子選擇器(ulli)
5.后代選擇器(lia)
6.偽類選擇(a:hover,li:nth-child)
最后,需要注意的是:
!important的優(yōu)先級是最高的,但出現(xiàn)沖突時則需比較”四位數(shù)“;
優(yōu)先級相同時,則采用就近原則,選擇最后出現(xiàn)的樣式;
繼承得來的屬性,其優(yōu)先級最低。
因為li是塊級元素,默認占一行的,要想實現(xiàn)橫向排列,一般通過以下兩個方法:
float:left
這樣設置有一個問題,li浮動以后則脫離了文本流,即不占位置,如果它的父級元素有具體的樣式且沒有固定寬高,建議父元素清除浮動,或者設置固定寬高
display:inline-block
即把li變?yōu)樾袃?nèi)元素且可以設置寬高以及邊距,這樣也有一個問題,低版本的Ie瀏覽器不兼容inline-block,建議在其后再加兩個屬性兼容低版本ie
*display:inline;
*zoom:1;
居中:text-align:center;( 而默認就是左對齊的),
再設置:text-align:left;
代碼如下:
.box{text-align:center;text-align:left}
ul class=“box”
li內(nèi)容1/li
li內(nèi)容2/li
li內(nèi)容3/li
/ul
①#nav{
background:red
-
容器背景色
}
#nav
ul{
background:gray;
-代表
ul整體背景色
}
兩者都起到了作用,若想改變單個home背景色
應在#nav
ul
li{}內(nèi)添加;
②text-align:center
-字體居中
并非容器居中
"margin:0
auto;"
應該在寫#nav{}內(nèi);使其居中顯示;
③在#nav
ul
li{}加入
margin:0px;
padding:0px;試試看
1、在ul樣式中設置文本居左對齊。
ul {
padding:0;
margin:0;
text-align:?left;
list-style-type:?none;
}
2、標簽大小不同,可以用自定義的背景圖片代替標簽樣式。
ul li
{
background-image:url(sqpurple.gif);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}
擴展資料:
控制ul下具體的li:
1、ul li:first-child{ }
第一個li
2、ul li:last-child{ }
最后一個li
3、ul li:nth-child(4){ }
指定第幾個,4就是代表第四個li
4、ul li:nth-child(2n+1){background:red;}
匹配第1、第3、第5、…個li
5、ul li:nth-child(odd){background:red;}
奇數(shù)的li
6、ul li:nth-child(even){background:red;}
偶數(shù)的li