HTML/CSS - 将样式设置到页面上的两个 <li> 部分答案

【问题标题】：HTML/CSS - Styling going to both <li> sections on pageHTML/CSS - 将样式设置到页面上的两个 <li> 部分
【发布时间】：2014-10-26 23:14:36
【问题描述】：

目前我的 html 页面有一些小问题。

该页面设置有 2 篇博文。它们都使用<li> 在自己的边界部分中。

我也使用<li> 进行导航和博客文章，但两者的样式都在变化。

我知道这一定与创建类或 ID 或其他东西有关，但我就是无法让它工作。提前致谢！！

任何指点将非常感谢！

HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="coursework1.css" rel="stylesheet" type="text/css">
<title>Hobbies</title>

<script src="scripts/jquery-1.11.1.min.js"></script>
<script src="scripts/modernizr-custom.73764.js"></script>
<script src="scripts/webshim/polyfiller.js"></script>
<script>
    $.webshims.polyfill('mediaelement');
  </script>
</head>
<body>
<h1> Hobbies </h1>
<nav class="nav">
  <li><a href="/about/">About</a></li>
  <li><a href="/work/">Hobbies</a></li>
  <li><a href="/clients/">Newsletter</a></li>
</nav>
<p>  
       <ul> 
    <li> 
        <p>  <h2> Pompey Win! - March 14, 2012 </h2> </p> 
        <img class="focus pic" src="pompeygoal.jpg"
   style="float:left; width:400px; height:300px; border:none;"
    />
       <img class="focus pic" src="pompeychallenge.jpg"
   style="margin-left: 50px; width:400px; height:300px; border:none;"
    />
     <img class="focus pic" src="andyawford.jpg"
   style="float:right; width:400px; height:300px; border:none;"
    />  
        <p> On tuesday evening of this week, I went to Portsmouth. Unfortunately, I do support them... But being the good fan I am , I still made the trip down to the south coast to show my support. It turned out to be a really good evening though as we ended up winning 3-2!</p> 
    </li> 
    <li> 
        <p> <h2>Notting Hill Carnvial - March 13, 2012 </h2> </p> 
        <video width="480" height="360" controls id="nhVid">
    <source src="NottingHillVid.mp4" type="video/mp4">
    <source src="NottinHillVid.webm" type="video/webm"> </video>   
     <p> Every summer, I always look forward to Notting Hill Carnival. This year was my third year, and I had a great time. It was extremely wet, however this did not dampen spirits and everyone still had a smile on their face. I saw loads of music and also had some really great jerk chicken. <p>  
    </li> 
</ol>
</body>
</html>

CSS：

@charset "UTF-8";

body {
  background-color:#808080; 
  font-family:symbol, 'Standard Symbols L';
  margin: 0 0 100px;
}

h1 { 
  text-align: center;
  color: white;
  text-shadow: 2px 2px #000000;
  font-size:350%;
}

h2 {
  color: white;
  font-size:30px;
  text-align:center;
}

#tableAbout { 
  width:100%; cellpadding:10; cellspacing:5;
  font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  color: white; table align:center;
}

.nav{  
  list-style:none;
  text-align:center;
  border-style: solid;
  border-width: 2px;
  background: -webkit-linear-gradient(grey, black);
  background: -o-linear-gradient(grey, black);
  background: linear-gradient(grey, black);
}

.nav li{
    display:inline;
}

.nav a{
  display:inline-block;
  padding:10px;
    transition: all 0.2s ease-in;
    color: white;
    font-size:25px; 
}

.nav a:hover{
  -webkit-stroke-width: 5.3px;
  -webkit-stroke-color: #FFFFFF;
  -webkit-fill-color: #FFFFFF;
  text-shadow: 1px 1px 20px white;
}

td[target] {
  font-weight: bold;
}

#newsletterForm {
    color: white;
}

footer {
  position:absolute;
  bottom:0;
  width:100%;
  height:60px; 
  clear:both;
  left: 0;
  font-color:black;
  text-align: center;
  font-weight: bold;
  font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
}

html {
  position: relative;
  min-height: 100%;
}

.focus {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.focus:hover {
  border: 70px solid #000;
  border-radius: 50%;
}


li { 
  background-color: rgba(194, 181, 158, .5); 
  border: 1px solid rgb(194, 181, 158); 
  border-radius: 10px; 
  margin: 10px 0; 
  padding:10px;
}

li:nth-child(even){ 
  background-color: rgba(242, 224, 131, .5);  
  border: 1px solid rgb(242, 224, 131); 
}

ul
{
  list-style-type: none;
}

【问题讨论】：

你需要在每个 li 上使用一个类。 PS 发布代码比提供下载 zip 的链接更好
能否请您发布工作代码？我已经用类尝试了很多东西，但我仍然无法让它工作
你正在打开一个 ul 标签并用 ol 标签关闭它。

标签： jquery html css class

【解决方案1】：

我不会下载 zip，但正如您提到的，两篇博客文章都在使用 <li> 的各自部分中，它可以像这样工作（示例类名和 CSS）：

HTML：

<ul>
  <li class="blogOne">
    content
  </li>
  <li class="blogTwo">
  content
  </li>
</ul>

CSS：

.blogOne
{
   color:red;
}
.blogTwo
{
   color:blue;
}

【讨论】：

【解决方案2】：

问题在于您只是针对 CSS 中的 li 选择器。这将找到页面上的所有 li 元素并将样式应用到它们。

如果您只想定位应该是您的博客文章的 li 元素，您可以将它们放在自己的 div 中，然后只定位 li div 内的元素 - 像这样：

HTML：

<div class="blogs">
    <li> Whatever </li>
    <li> Something else </li>
</div>

CSS：

.blogs li {
    css-attribute: whatever;
}

.

注意：

我强烈建议不要为每篇博文使用单独的类。该方法不可扩展——也就是说，对于 2 篇博文来说似乎是合理的，但是当你有 1000 篇博文时会发生什么？

【讨论】：

【解决方案3】：

您也有无效的 HTML。您需要在 ul 或 ol 中包含 li。

这个：

<nav class="nav">
  <li><a href="/about/">About</a></li>
  <li><a href="/work/">Hobbies</a></li>
  <li><a href="/clients/">Newsletter</a></li>
</nav>

需要这样：

<nav>
  <ul class="nav">
      <li><a href="/about/">About</a></li>
      <li><a href="/work/">Hobbies</a></li>
      <li><a href="/clients/">Newsletter</a></li>
    </ul>
</nav>

你也在你的第二个列表上打开一个 ul，但用一个 ol 关闭它。

现在要获得不同的样式，您只需在第二个 ul 上放置另一个类以专门针对该类。

例如：

<ul class="blog-list">

现在你可以这样写一个类：

.blog-list {
    list-style:none;
    padding: none;
}

.blog-list li {
    //Styles here
}

【讨论】：

【解决方案4】：

如果您打开ul 列表，您应该使用/ul而不是ol 关闭它。
在nav 元素中，删除li 项目并将锚点保留在导航中，或者将它们包装在一个列表中。
您可以将ol 用于导航，将ul 用于内容，或者使用相同的列表类型并针对列表的父级设置样式（如声明 ul 元素的一般样式并使用@987654328 覆盖某些样式@例如）

【讨论】：

【解决方案5】：

我认为最好给每个“ul”一个不同的类，例如：

ul.nav {/*css styles*/}
  ul.nav > li {}
  ul.nav > li:nth-child(X) {}


ul.second {/*css styles*/}
  ul.second > li {}
  ul.second > li:nth-child(X) {}

通过这种方式，您可以确定您的目标是正确的 li 或 ul

注意：我看到一些<p>标签在最后没有关闭。

【讨论】：

【解决方案6】：

您应该为导航列表项分配一个类名，为您的博客列表项分配另一个类名。

【讨论】：