Question

我正在使用Bootstrap 4进行导航，但卡在这里，我需要根据导航中的需要调整这些项目。我无法弄清楚如何选择那些li标签，因为它嵌套在多个类中。虽然在网上得到了一些帮助，但我还是设法选择了一些课程，但如果有人解释如何在CSS中找到任何课程，那就太棒了。

如何选择CSS中的任何类？还有什么是制作与所有设备兼容的响应式网站的最佳方式。我的意思是哪种技术在2018年是最好的？

＆＃13;

img {
    opacity: 0.7;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
img:hover {
    opacity: 1.0;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}



.navbar{
	background-color: black;
	
}

 .navbar-inverse{
 	background-color: black;

 }

.navbar-fixed-top {
    min-height: 80px;
}


.navbar-nav > li > a {
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 80px;
}


@media (max-width: 767px) {
    .navbar-nav > li > a {
    line-height: 20px;
    padding-top: 10px;
    padding-bottom: 10px;}
 }
]

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>PW</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="./CSS/pwCss.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>

	
</style>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <img class="img-fluid" src="./img/ani.png" alt="Logo" height="70">
    </div>
    <ul class="nav navbar-nav" style="font-size: large;">
      <li><a href="#">Home</a></li> 
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    
  </div>
</nav>

<div class="container">
  <h2>Rounded Corners</h2>
  <p>The .rounded class adds rounded corners to an image:</p>            
  <img src="./img/ani.PNG" class="rounded" alt="Cinque Terre" width="304" height="236"> 
</div>

<div class="container">
  
</div>

</body>
</html>

＆＃13;

Answer 1

如果要在导航中定位所有li，请选择元素，而不是类：

nav ul li {
/* styles */
}

注意：没有圆点。点/句点用于课程，＃是用于id。元素不会得到点。例如。 body {background：#fff}

因为您可以在某个地方使用项目符号列表，所以指定nav非常重要。除非你非常具体，否则请不要使用中间的箭头。

Answer 2

如果我听到你的声音，你想要在特定的类中设置<li>标签的样式。

为此，您需要执行以下操作：

.yourClass li {
    /* Your CSS Here! */
}

请注意，您只需在课程后添加空格，然后再添加

并删除CSS代码末尾的方括号。

如何选择这个CSS

2 个答案: