Question

我在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课程中，但我丢失了所有格式，我该怎么做？

Answer 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，它将样式定义应用于任何E元素，它是A元素的后代（即：子元素或子元素小孩等。）

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

1 个答案: