Question

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

当我在基本的“测试”文本编辑器中使用代码时，它可以很好地工作。

但是，当我把它放在我网站的页面上时，它会整个页面的样式，而不是我想要它的1个样式。

我之前认为我找到了<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>标记执行相同操作。

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

您正在有效地为您网页上的每个无序列表设置样式。请务必通过类为所有无序列表创建一种描述形式。

如何才能将此代码应用于我想要的样式？

2 个答案: