Question

我正在测试垂直导航，并希望从我的ul中删除子弹。我甚至尝试过申请！重要的是有一个覆盖。我的李的底部边框也不适用。我在网上研究但找不到解决方案。

＆＃34; nav＆＃34; id将适用，但

除外

#nav a {
    text-decoration: none;
}

指向codepen的链接：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 */

列表样式无应用+ li边框

1 个答案: