使用类仅将 CSS 功能应用于一个 div？答案

【问题标题】：Apply CSS features only to one div using classes?使用类仅将 CSS 功能应用于一个 div？
【发布时间】：2014-08-14 23:38:26
【问题描述】：

我在 css 上找到了这个教程：

http://designshack.net/articles/css/5-simple-and-practical-css-list-styles-you-can-copy-and-paste/

上面写着 css 文件：

* {margin: 0; padding: 0;}

div {
  margin: 20px;
}

ul {
  list-style-type: none;
  width: 500px;
}

h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}

li img {
  float: left;
  margin: 0 15px 0 0;
}

li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
}

li {
  padding: 10px;
  overflow: auto;
}

li:hover {
  background: #eee;
  cursor: pointer;
}

和html文件：

<html>
<head>
 <title>title</title>
 <link href="s.css" rel="stylesheet">
</head>
<body>
<div>
  <ul>
    <li>
      <img src="http://lorempixum.com/100/100/nature/1">
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>

    <li>
      <img src="http://lorempixum.com/100/100/nature/2">
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>

    <li>
      <img src="http://lorempixum.com/100/100/nature/3">
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>

    <li>
      <img src="http://lorempixum.com/100/100/nature/4">
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>
  </ul>
</div>
</body>
</html>

效果很好，但我只想将 css 功能放在一个 div 中，而不是整个网站，所以我尝试将所有 css 功能放在类中，如下所示：

div.list{
 * {margin: 0; padding: 0;}

    div {
      margin: 20px;
    }
    .
    .
    .
    .
    .
    .
    .
    .
    .
}

并将 html 更改为：

<div class="list">

我也尝试将它们放在.list 类中，但我丢失了所有格式我该怎么办？

【问题讨论】：

.. 你有什么理由不能只使用 ID 吗？
@Daedalus，ID 是什么意思
我的意思是，<span id="test">red</span> 和 #test { color: red; }。这是基本的html。我建议你找到一个很好的教程；我推荐 MDN。

标签： html css class

【解决方案1】：

你不能像这样嵌套 CSS 类。如果您想将 CSS 类的应用限制为出现在具有给定类名的元素中的元素（在本例中为 .list），您可以像这样为所有类定义添加前缀：

.list * {margin: 0; padding: 0;}

.list div {
  margin: 20px;
}

.list ul {
  list-style-type: none;
  width: 500px;
}

.list h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}

.list li img {
  float: left;
  margin: 0 15px 0 0;
}

.list li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
}

.list li {
  padding: 10px;
  overflow: auto;
}

.list li:hover {
  background: #eee;
  cursor: pointer;
}

更多关于 CSS 选择器的信息可以在here找到。

在这种情况下使用的是基于关系的选择器A E，它将样式定义应用于作为 A 元素后代的任何 E 元素（即：子元素，或子元素的子元素）等）

【讨论】：

谢谢它的工作，但这需要大量添加，没有其他解决方案
但在 html 文件中，我应该将 class="list" 添加到所有元素！或者我可以只将 class="list" 添加到
.
只有周围的div。否则确实工作量太大:-)