首頁 >web前端 >css教學 >結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例）

結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例）

易达原創: 2020-06-10 11:08:471864瀏覽

本文目標：

1、掌握CSS中結構性偽類選擇器—target的用法

問題：

1、實現以下選單效果，當點擊公眾號彈出4個子選單，當點擊小程序，彈出另外2個子選單，先前展示的子選單需要自動收縮起來，且使用純DIV CSS，必須使用結構性偽類選擇器—target

結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例）

附加說明：

1、整體寬度是140px

2、一層選單字體16px，加粗顯示

現在來具體操作

1、準備素材：根目錄建立images資料夾，把相關素材圖片都存放與此，我們會發現以上的素材為幾張小logo圖片，我們準備把它當做背景圖片來使用

結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例）

2、創建好index.html，寫好架構，架構如何分析呢

思路分析：

## 1.目標分成2個部分，每個部分帶一個一級選單，當點擊該選單，需要展示下面的子選單，而這裡我們就可以使用要求的知識點：結構性偽類選擇器—target

2、上下兩部分都是類似的，只是每個選單的背景圖片不同，所以第二部分很多程式碼可以復用第一個部分的，但是他們需要單獨的設置，所以需要給它們單獨設定類別名稱

好，先依照分析，寫好思路，暫時不管css的實作

程式碼如下：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>结构性伪类选择器—target实现可搜索菜单案例</title>

</head> 
<body>
    <div class="container">
        <div class="title title1"><a href="#wechataccount">公众号</a></div>
        <div class="menu" id="wechataccount">
           <ul>
               <li class="li1"><a href="">微信公众号</a></li>
               <li class="li2"><a href="">公众号应用</a></li>
               <li class="li3"><a href="">公众号模板</a></li>
               <li class="li4"><a href="">微信开放平台</a></li>
           </ul>
        </div>
        <div class="title title2"><a href="#applet">小程序</a></div>
        <div class="menu" id="applet">
           <ul>
               <li class="li5"><a href="">微信小程序</a></li>
               <li class="li6"><a href="">小程序应用</a></li>
           </ul>
        </div>
    </div>
    
</body>
</html>

3、寫樣式，建立css資料夾，裡面新建index.css，裡面的樣式怎麼寫了，以下是分析思路

想法分析：

1、整體容器的子元素

思路分析

1、為了設定容器裡的所有元素的公共樣式，我們可以將這些公共代碼寫入.container * 樣式內，例如padding,margin,不這樣設定的話，然後在每個元素內部去設置，這樣會造成程式碼冗餘，所以還是跟其他案例一樣，先把這個最基礎的寫起

所以index.css中加入程式碼如下：

.container *{
   padding:0;
   margin:0;
}

2 、外層容器本身.container

思路分析：

1、根據要求得知寬140，有淺灰色邊框，上下左右存有一定的padding

所以index.css中加入程式碼如下：

.container{
   width: 140px;
    border: 1px solid lightgray;
    padding: 10px;
}

3、標題.title

1、根據要求字體大小16px,顏色淺灰，字體加粗，然後每個標題我們發現它的背景圖片是不重複的，且水平方向是靠右，垂直方向是居中，

所以index.css中添加代碼如下：###

.title{
   font-size: 16px;
   color:lightgray;
   padding:10px;
   font-weight: bold;
   background-repeat: no-repeat;
   background-position-y:center;
   background-position-x:right;
}

###4、兩個標題的單獨設定#########1、2個標題的不同之處就在於背景圖片不同######所以index.css添加程式碼如下：###

.title1{
   background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例 ）);
}
.title2{
   background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例 ）);
}

###5、選單.menu###

1、一级菜单下面的子菜单首先是要隐藏起来的，只是当点击标题菜单的时候就需要展开，此刻我们可以把子菜单当做是标题菜单的目标即target，而CSS中:target其实表示所有的target,在此文档中target为id=wechataccount和id=applet的2个div，但是每次只对某一个target生效，当另外一个target被触发了，其他的target的样式就会失效，恢复成默认状态，就好像此页面中默认状态是隐藏，但是当公众号点击了，它下面的target就会应用当前的:target样式，但另外一个target触发了，此刻它的样式就又恢复成display:none了

所以index.css中添加代码如下：

.menu{
   display: none;
 }
 :target{
   display:block;
 }

6、列表公共样式 ul li

1、因为根据实现效果可以看出没有黑色圆点，然后因为每个li都有背景图片，所以一定会有间距padding,且背景图片垂直方向居中，背景图片不重复

所以index.css中添加代码如下：

ul li{
   list-style: none;
   padding:10px 10px 10px 29px!important;
   background-position-y:center;
   background-repeat: no-repeat;
}

7、每个li的单独样式

1、每个li的唯一不同就是背景图片不同

所以index.css中添加代码如下：

.li1{
   background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例 ）);
}
.li2{
   background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例 ）);
}
.li3{
   background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例 ）);
}
.li4{
   background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例 ）);
}
.li5{
   background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例 ）);
}
.li6{
   background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例 ）);
}

8、链接设置a

1、每个链接默认是有颜色的，一般为蓝色，但是这里的连接颜色为灰色，不带默认的下划线

所以index.css中添加代码如下：

a{
   color:rgb(5, 5, 5);
   text-decoration: none;
}

到此为止，index.css的全部内容如下：

.container *{
   padding:0;
   margin:0;
}
.container{
   width: 140px;
    border: 1px solid lightgray;
    padding: 10px;
}
.title{
   font-size: 16px;
   color:lightgray;
   padding:10px;
   font-weight: bold;
   background-repeat: no-repeat;
   background-position-y:center;
   background-position-x:right;
}
.title1{
   background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例 ）);
}
.title2{
   background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例 ）);
}
.menu{
   display: none;
 }
 :target{
   display:block;
 }
ul li{
   list-style: none;
   padding:10px 10px 10px 29px!important;
   background-position-y:center;
   background-repeat: no-repeat;
}

.li1{
   background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例 ）);
}
.li2{
   background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例 ）);
}
.li3{
   background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例 ）);
}
.li4{
   background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例 ）);
}
.li5{
   background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例 ）);
}
.li6{
   background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例 ）);
}
a{
   color:rgb(5, 5, 5);
   text-decoration: none;
}

然后将index.css引入index.html中

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>结构性伪类选择器—target实现可搜索菜单案例</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head> 
<body>
    <div class="container">
        <div class="title title1"><a href="#wechataccount">公众号</a></div>
        <div class="menu" id="wechataccount">
           <ul>
               <li class="li1"><a href="">微信公众号</a></li>
               <li class="li2"><a href="">公众号应用</a></li>
               <li class="li3"><a href="">公众号模板</a></li>
               <li class="li4"><a href="">微信开放平台</a></li>
           </ul>
        </div>
        <div class="title title2"><a href="#applet">小程序</a></div>
        <div class="menu" id="applet">
           <ul>
               <li class="li5"><a href="">微信小程序</a></li>
               <li class="li6"><a href="">小程序应用</a></li>
           </ul>
        </div>
    </div>
    
</body>
</html>

运行效果如下：

結構性偽類選擇器—target實作可搜尋選單案例（程式碼實例）