我試圖在css中使用“：nth-??child（）”來不必每次我想放置一個圖示時都創建一個新類。但是當我嘗試代碼時重復第一個圖示。我做錯了什么？
<body>
<header class="header-mobile">
<button class="header-mobile__button"><i></i></button>
<img src="assets/img/logo.svg" alt="Logo H2C" class="header-mobile__img">
<button class="header-mobile__button"><i></i></button>
</header>
</body>
@font-face {
font-family: 'icon';
src: url(assets/font/icon.ttf);
}
body{
background-color: #1D232A;
font-family: 'Open Sans', 'icon', sans-serif;
color: #FFFFFF;
}
.header-mobile{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #15191C;
padding: 8px 16px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.16);
}
.header-mobile__button i::before{
display: block;
content: "\e904";
}
.header-mobile__button i:nth-child(2)::before{
content: "\e906";
}
.header-mobile__img{
width: 40px;
}
uj5u.com熱心網友回復：
i:nth-child(2)不匹配任何內容，因為<i>您擁有的唯一元素是它們各自按鈕的第一個（而不是第二個）子元素。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459625.html
下一篇：如何使影像適合其內容