Question

嘿所有我总是有最糟糕的时间试图让我的CSS玩得很好。我有一些代码可以使用ul和li标记。但是，我只想将这种风格放在我的HTML代码的一部分而不是所有ul和li标签上。

其他样式表也使用li和ul，目前与我希望使用的这种样式发生冲突。

这是我的两个代码的代码：

ul {
    position: relative;
    height: 480px;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    list-style: none;       
    width: 100%;
    -webkit-perspective: 400px;
       -moz-perspective: 400px;
        -ms-perspective: 400px;
         -o-perspective: 400px;
            perspective: 400px;
}

ul li {
    position: relative;
    background: #eee;
    color: #252525;
    font-size: 18px;
    z-index: 2;
    padding: 25px 20px;
    -webkit-transform: translate3d(0, 0, 1px);
       -moz-transform: translateZ(0px);
        -ms-transform: translateZ(0px);
         -o-transform: translateZ(0px);
            transform: translateZ(0px);
}

li {
    list-style: none;
    margin-bottom: 0px;
    line-height: 0px;
}

ul li:nth-child(odd) {
    background: #fff;
}

ul .locationList li.cache {
    -webkit-transform: rotateY(1deg);
}

这是HTML结构：

<div id="listBG" style="margin-bottom: 40px; line-height: 1; background-image:url(file:///C|/Users/Pictures/googleMapsZoom.JPG)">
 <ul class="flip" style="height: 568px; overflow: hidden;">
  <li id="locationListClick" style="opacity: 1;">
    <div id="distance" style="font-size:12px;float: right;">
      Distance: 13 mi.<br />
      <div align="center">
         <img src="getDirectionsAndroid.png" width="74" height="53" alt="" />
      </div>
    </div>
    <p id="place" style="font-size:12px;margin: 0px; line-height: 15px; margin-bottom: 0px;">
         The Choo Choo</p>
    <p id="address" style="font-size:12px;margin: 0px;line-height: 15px; margin-bottom: 0px;">
       100 A Street, ChooChoo, GA 76859<br /></p>
    <p id="dates" style="font-size:12px;margin: 5px;line-height: 15px; margin-bottom: 0px;">
       Event Date(s) &amp; Time(s):<br /></p>
    <p id="dates" style="font-size:12px;margin-top: -5px; margin-left: 10px;line-height: 15px; margin-bottom: 0px;">
       01/23/2015 @ 3:00<br /></p>
  </li>
 </ul>
</div>

我试过了：

div#listBG ul {}

以上版本适用于ul

div#listBG ul li {}

但上述情况似乎对ul和li都不起作用？

Answer 1

使用css表中的类。在我的例子中，我将它们称为“class_a”和“class_b”

CSS：

.class_a {
    margin: 0,0,0,0;
}

.class_b {
    margin: 1,1,1,1;
}

HTML

<li class="class_a">
    <!--item here-->
</li>

使用相同的标记时，类允许您拥有多个样式。

某些UL和LI标记的CSS样式

1 个答案: