1. 程式人生 > >選擇器和複雜選擇器

選擇器和複雜選擇器

       舉例css檔案:        在css檔案中新增內容如下:        .foot_area1{
width: 70%;
height: 20px;
margin: 0 auto;

}       在html檔案的<body>標籤中,新增內容如下:       <div class="foot_area1">
<ul>
<li>關於我們|</li>
<li>聯絡我們|</li>
<li>聯絡客服|</li>
<li>合作招商|</li>
<li>商家幫助|</li>
<li>營銷中心|</li>
<li>手機京東|</li>
<li>友情連結|</li>
<li>銷售聯盟|</li>
<li>京東社群|</li>
<li>風險監測|</li>
<li>隱私政策|</li>
</ul>
</div>
       則該<div>可以調整為全屏寬度的70%,高20px,自動居中 CSS:

       css中很重要的一個是使用選擇器,如上方的14條內容,使用的是類選擇器。

      1. 先介紹標籤選擇器,在css檔案中新增

li{
list-style: none;
float: left;
color: #666;
line-height: 5px;
margin-right: 10px;
margin-top: 10px;
}

這段內容會對li標籤進行樣式新增,所有包含該標籤的都會變成這種樣式

        2.類選擇器

        格式為  .類名{樣式}  如:

.foot_area1{
width: 70%;
height: 20px;
margin: 0 auto;

}

      <div class="foot_area1">
<ul>
<li>關於我們|</li>
<li>聯絡我們|</li>
<li>聯絡客服|</li>
<li>合作招商|</li>
<li>商家幫助|</li>
<li>營銷中心|</li>
<li>手機京東|</li>
<li>友情連結|</li>
<li>銷售聯盟|</li>
<li>京東社群|</li>
<li>風險監測|</li>
<li>隱私政策|</li>
</ul>
</div>

通過定義類名,設定樣式,然後在需要的標籤中,用class="設定的類名",即可呼叫樣式

可以<div class="foot_area1"></div>    也可以<li class="foot_area1"></li>

        3.ID選擇器

        格式   #名{內容}

css內:

         #a{

         width:500px;

         height:500px;

         background-color:#999;

         }

html內:

         <div id="a"></div>

使用id選擇器,然後讓div區域變成500*500,顏色為#999;

       4.複合選擇器

       1)並集選擇器:用逗號隔開

           格式:.名1,.名2{內容}

.center_button1,.center_button2,.center_button3{
width: 158px;
height: 44px;
float: left;
margin-left: 30px;
        margin-top: 10px;
        line-height: 44px;

        text-align: center;
}

        2)後代選擇器:用空格隔開,先父後子

        格式:名1   名2{內容}

.input li{
    float: left;
    margin-right: 10px;
    white-space: nowrap;
    color: #999;
    line-height: 20px;
list-style: none;
font-size: 12px;
}

        3)超連結選擇器:

a:link{}

a:visited{}

a:hover{}

a:active{}

  超連結選擇器4個的順序不能變

  注:選擇器很重要