教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

CSS各類選擇器的基本用法【演示】

更新時(shí)間:2022年10月12日18時(shí)55分 來源:傳智教育 瀏覽次數(shù):

在CSS中，要想將CSS樣式應(yīng)用于特定的HTML標(biāo)簽上，首先需要找到該目標(biāo)標(biāo)簽。選擇器的作用就是從HTML頁面中找出特定的某類元素。CSS中選擇器的種類非常多，并且在CSS3中也新增了一些選擇器，使選擇器的功能更強(qiáng)大。表1中列舉了常用的基本選擇器。

css選擇器

在表1中，分別列出了不同選擇器示例代碼及說明，可以根據(jù)需要選擇使用，在CSS中還有兩種特殊的選擇器：偽元素選擇器和偽類選擇器。常用的偽元素選擇器如表2所示。

偽類選擇器

常用的偽類選擇器如表3所示。

列舉了這么多選擇器，下面為大家演示選擇器的基本用法，如例1-1所示。

<!DOCTYPE htnl>
<html>
<head>
  <meta charset-"UTF-8">
  <title>選擇器的使用</title>
</head>
<style type="text/css">
  /*設(shè)置導(dǎo)航欄樣式/
  nav (
    width: 300px;
  }
  /*設(shè)置導(dǎo)航欄中的每一項(xiàng)的樣式*/
  li {
   bacxground-color: rgba(0, 0, 0, 0.4);
   helght: 35px:
   1ine-helght: 35px;
   overflow: hidden;
  }
  /*設(shè)置偶數(shù)行背景細(xì)色透明度為0.9*/
  li;nth-of-type(2n) {
    background-color: rgba (0, 0, 0, 0.5);
  }
  /*鼠標(biāo)懸停時(shí)背條傾色為#O099E5*/
  li:hover {
    background: 40099E5;
  }
  /*設(shè)置超鏈接的樣式*/
  a(
   text-decoration; nope;
   display: block;
   color: eftf:
   height: 35px:
   padding: 0 38px;
  }
</style>
<body>
  <nav>
    <ul>
      <li><a bcef="#">Java EE教程</a></li>
      <li><a href="#">Android教程</a></li>
      <li><a htef="#">PHP教程</a></li>
      <1i><a href="#">UI設(shè)計(jì)教程</a></li>
      <1i><a href="#">ios 教程</a></11>
      <1i><a href="#“>Web前端教程</a></1i>
      <li><a href="#">C/C++教程</a></li>
    </ul>
  </nav>
</body>
</html>

上述代碼中，第19~22行代碼使用偽類選擇器設(shè)置偶數(shù)行背景顏色透明度為0.9;第23~26行代碼用：hover選擇器實(shí)現(xiàn)了鼠標(biāo)懸停時(shí)背景顏色變化的功能;第27~34行代碼設(shè)置超鏈接的樣式;第37~47行代碼實(shí)現(xiàn)了課程列表的頁面結(jié)構(gòu)，其中用來定義<ul>課程列表。

0 分享到：
和我們?cè)诰€交談！