列表样式 none 未应用 + li 边框

Question

我正在测试垂直导航并想从我的 ul 中删除项目符号。我什至尝试应用 !important 以防出现覆盖。我的 li 的底部边框也不适用。我在网上查了，没找到解决方法。

"nav" id 中的任何内容都将适用，除了

#nav a {
    text-decoration: none;
}

Link 到代码笔：https://codepen.io/Saharalara/pen/WpPgpJ

这是 html:

<!Doctype html>
<html>
<head>
    <title>About Us</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="nav">
   <ul>
        <li><a href="#">Mission</a></li>
        <li><a href="#">History</a></li>
        <li><a href="#">Executive Team</a>
            <ul>
        <li><a href='#'>&raquo; CEO</a>
        <li><a href='#'>&raquo; CFO</a>
        <li><a href='#'>&raquo; COO</a>
        <li><a href='#'>&raquo; Other Minions</a>
        </ul>
    </li>
    <li><a href='#'>Contact Us</a></li>
  </ul>
    </div>

    <div id="content">
    <h1>About Us</h1>
    <ul>
    <p><li><a href="#">Mission</a> Lorem ipsum dolor sit amet, ultricies adipiscing lectus, pharetra mauris amet luctus, ac vitae pulvinar, aenean urna porttitor eu etiam eu non. Accumsan tortor sit ac integer. Ipsum occaecat ad ipsum vestibulum, pellentesque posuere, sit enim curabitur odio.</li>

       <li><a href="#">History</a> Ut at montesdui ullam orci, justo leo sem vitae sit quam, quis massa cras volutpat eget ac a.</li> 

       <li><a href="#">Executive team</a> Vitaeconvallis duis, dui adipiscing felis quam, laoreet nec non, lectus massa morbi et, amet nec in lacus urna.</li>

       <li><a href="#">Contact us</a> Proin enim venenatis diam nascetur odio, nullam dui nam mauris quisque dignissim, eleifend sed platea ut, risus temporibus ante eu, dui eros libero ultrices eget non. Iaculis mauris nulla phasellus vel, pede nunc et libero mauris ac, erat volutpat non netus sed risus sed, dignissim aenean sit curabitur.</li>
       </p>
       </ul>
    </div>
</body>
</html>

Css:

body {
    font: 12pt Verdana, Arial, Georgia, sans-serif;
}

#nav {
    width:150px;
    float:left;
    margin-top:12px;
    margin-right:18px;
}



#nav a {
    text-decoration: none;
}


//making sure there are no extra padding or margins lying around to line up with ABOUT US content

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

//border for visual seperation

#nav li {
    border-bottom: 1px solid #ffffff;
}



#nav li a:link, #nav li a:visited {
    font-size: 10pt;
    font-weight: bold;
    display: block;
    padding: 3px 0px 3px 3px;
    background-color: #628794;
    color: #ffffff;
}

//higlight when hover

#nav li a:hover, #nav li a:active {
    font-size: 10pt;
    font-weight: bold;
    display: block;
    padding: 3px 0px 3px 3px;
    background-color: #6cac46;
    color: #000000;
}

#content {
    width:550px;
    float: left;
}

#content a {
    text-decoration: none;
    font-weight: bold;
}

Answer 1

您的代码的问题不在于选择器，而在于注释。

如果您使用的是原始 CSS，则需要使用块注释，因为行内注释会导致错误，然后 CSS 的其余部分将无法处理。 text-decoration 起作用的原因是它出现在您的第一个内联评论之前。

改变

//making sure there are no extra padding or margins lying around to line up with ABOUT US content

至

/* making sure there are no extra padding or margins lying around to line up with ABOUT US content */

列表样式 none 未应用 + li 边框

List style none not applying + li border

html

css

list

nav