html - 我怎样才能让这段代码只在我想要的地方应用样式？

Question

我希望仅对网站页面的一部分设置样式。最终结果是一个带圆 Angular 的盒子。

当我在基本的“测试”文本编辑器中使用代码时，它运行得很漂亮。

但是，当我将它放在我的网站页面上时，它会为整个页面设置样式，而不仅仅是我想要设置样式的那一部分。

我之前以为我找到了 <style scoped> 的答案(所有内容都包含在 <div> 标签中)只是为了了解没有浏览器支持。我被引导到一个插件，它可能已经纠正了浏览器支持问题，只是它无法加载，所以我无法使用它。

如果有帮助，这是一个 Wordpress 站点。我还必须在我的 functions.php 中禁用 wpautop。在我这样做之前，它将所有样式包装在 <p> 中我没有放在那里的标签。

我得到的另一个常见结果是底部的“ul”部分和那些“ul”部分的文本将显示，但没有任何样式。

我也曾尝试将整个内容包装在 <div> 中标签，但这也不起作用。

如果您需要更多信息，请告诉我。

否则，提前感谢您的任何想法!

如果它有用，这里是代码(返回到 <style type="text/css"> 而不是范围):

<style type="text/css">
UL {
border-radius: 20px/20px;
-webkit-border-radius: 20px/20px;
-moz-border-radius: 20px/20px;
-ms-border-radius: 20px/20px;
-o-border-radius: 20px/20px;
 height: 150px;
 width: 500px;
    background: #7220c9;
    margin: 12px 12px 12px 12px;
    padding: 5px 5px 5px 5px;
    box-shadow: 0 0 20px rgba(0,0,0,0.9);
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.9);
    -ms-box-shadow: 0 0 20px rgba(0,0,0,0.9);
    -o-box-shadow: 0 0 20px rgba(0,0,0,0.9);
                                          /* No borders set */
  }
  LI {
    color: black;                /* text color is black */
    font-family: Arial;
    font-size: 14px;
    background: white;           /* Content, padding will be white */
    border-radius: 20px/20px;
    -webkit-border-radius: 20px/20px;
    -moz-border-radius: 20px/20px;
    -ms-border-radius: 20px/20px;
    -o-border-radius: 20px/20px;
    margin: 12px 12px 12px 12px;
    padding: 12px 12px 12px 12px;
    list-style: none             /* no glyphs before a list item */
                                          /* No borders set */
  }
  LI.withborder {
    border-radius: 20px/20px;
    -webkit-border-radius: 20px/20px;
    -moz-border-radius: 20px/20px;
    -ms-border-radius: 20px/20px;
    -o-border-radius: 20px/20px;
    border-style: none;
    border-width: medium;        /* sets border width on all sides */
    border-color: #27d130;
  }
</STYLE>

<UL>
  <LI><b><center>Here is some text.</center></b>
  <LI class="withborder">This is some additional text.</a>.
</UL>

Answer 1

您已将样式设置为在页面中包含每个 UL 和 LI 标记。要使其仅特定于某些部分，您应该使用 class名称或集合 id是给他们的。像这样的东西:

.ul UL {
    /* style here */
}

HTML:

<ul class="ul">  <!-- only this particular UL will be affected -->

我看到你在你的 <li> 中使用过它用 withborder 标记类，你需要对 <ul> 做同样的事情标签也。