更改優先級爲繪製邊框

Question

我想繪製<div>邊框在<li>邊框。 現在看到這樣的： 但我想得出： 我所有的代碼上JsFiddle：

#mainmenu ul ul { 
 
    display: none; 
 
} 
 
#mainmenu ul { 
 
    list-style-type: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
#mainmenu ul li { 
 
    list-style-type: none; 
 
    text-align: center; 
 
    width: 120pt; 
 
    height: 20pt; 
 
    padding: 10pt 0pt 10pt 0pt; 
 
    border: 2px gray solid; 
 
} 
 
#mainmenu ul li:hover { 
 
    background-color: gray; 
 
} 
 
#mainmenu ul li:hover ul { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 130pt; 
 
    display: block; 
 
} 
 
#mainmenu h1 { 
 
    font-size: 14pt; 
 
    margin: 0px; 
 
} 
 
#mainmenu { 
 
    display: inline-block; 
 
    border: 2px red solid; 
 
}

<div id="mainmenu"> 
 
    <ul> 
 
    <li> 
 
     <h1>Семинар 1</h1> 
 
     <ul> 
 
     <li>Задача 1</li> 
 
     <li>Задача 2</li> 
 
     <li>Задача 3</li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <h1>Семинар 2</h1> 
 
     <ul> 
 
     <li>Задача 1</li> 
 
     <li>Задача 2</li> 
 
     <li>Задача 3</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

非常感謝您的答覆！

Answer 1

你的圖片：

從你的形象（我已經張貼以上），我相信你正在尋找的東西是這樣的：

#mainmenu ul ul { 
 
    display: none; 
 
} 
 
#mainmenu ul { 
 
    list-style-type: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
#mainmenu ul li { 
 
    list-style-type: none; 
 
    text-align: center; 
 
    width: 120pt; 
 
    height: 20pt; 
 
    padding: 10pt 0pt 10pt 0pt; 
 
} 
 
ul li ul li { 
 
    border: 2px gray solid; 
 
    margin-left:6px; 
 
} 
 
#mainmenu ul li:hover { 
 
    background-color: gray; 
 
} 
 
#mainmenu ul li:hover ul { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 130pt; 
 
    display: block; 
 
} 
 
#mainmenu h1 { 
 
    font-size: 14pt; 
 
    margin: 0px; 
 
    z-index:2; 
 
} 
 
#mainmenu { 
 
    display: inline-block; 
 
    border: 6px red solid; 
 
} 
 

<div id="mainmenu"> 
 
    <ul> 
 
    <li> 
 
     <h1>Семинар 1</h1> 
 
     <ul> 
 
     <li>Задача 1</li> 
 
     <li>Задача 2</li> 
 
     <li>Задача 3</li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <h1>Семинар 2</h1> 
 
     <ul> 
 
     <li>Задача 1</li> 
 
     <li>Задача 2</li> 
 
     <li>Задача 3</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

根據你的截圖，我猜你正在嘗試改變最左邊框的邊框顏色。

我不推薦用紅色「覆蓋」灰色邊框，而是建議使用CSS專門針對那些頂級<li> s，並將這些元素的邊框設置爲紅色。您可以使用CSS嫡系選擇這樣做：

#mainmenu > ul > li { 
    border: 2px solid red; 
} 

---

完整的例子下面（點擊 「運行代碼片段」）：

#mainmenu ul ul { 
 
    display: none; 
 
} 
 

 
#mainmenu ul { 
 
    list-style-type: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#mainmenu ul li { 
 
    list-style-type: none; 
 
    text-align: center; 
 
    width: 120pt; 
 
    height: 20pt; 
 
    padding: 10pt 0pt 10pt 0pt; 
 
    border: 2px gray solid; 
 
} 
 

 
#mainmenu > ul > li { 
 
    border: 2px solid red; 
 
} 
 

 
#mainmenu ul li:hover { 
 
    background-color: gray; 
 
} 
 
#mainmenu ul li:hover ul{ 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 130pt; 
 
    display: block; 
 
} 
 
#mainmenu h1 { 
 
    font-size: 14pt; 
 
    margin: 0px; 
 
} 
 

 
#mainmenu { 
 
    display: inline-block; 
 
}

<div id="mainmenu"> 
 
    <ul> 
 
     <li><h1>Семинар 1</h1> 
 
      <ul> 
 
       <li>Задача 1</li> 
 
       <li>Задача 2</li> 
 
       <li>Задача 3</li> 
 
      </ul> 
 
     </li> 
 
     <li><h1>Семинар 2</h1> 
 
      <ul> 
 
       <li>Задача 1</li> 
 
       <li>Задача 2</li> 
 
       <li>Задача 3</li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</div>