我如何才能让这个代码只在我想要的地方应用样式

Question

我希望在我的网站上只设计页面的一部分。最终的结果是一个圆角框。

当我在基本的"测试"文本编辑器中使用代码时，它的工作效果很好。

然而，当我把它放在我的网站页面上时，它会对整个页面进行样式设置，而不是只对我想要的一部分进行样式设置。

我之前以为我用<style scoped>找到了答案（所有东西都用<div>标签包装），结果发现没有浏览器支持。我被引导到一个插件，它可能已经纠正了浏览器支持问题，只是它不会加载，所以我不能使用它。

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

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

我也尝试过用<div>标签来包装整个东西，但这也不起作用。

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

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

如果有用的话，下面是代码（返回<style type="text/css">而不是scoped）：

<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 -->

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

Answer 2

be sure to end your lines
<li><b><center>Here is some text.</center></b></li>

只要没有其他无序的列表，你就可以了。否则，您将不得不创建一个单独的类，它是所有其他无序列表的标准无格式类。通过

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);

您有效地为页面上的每个无序列表设置了样式。一定要为所有无序列表创建一种通过类的描述形式。