Html CSS边框半径显示父'；s风格

我有一个按钮在一个div的顶部，有一个背景色，一个方框阴影和一个边框。该按钮具有边框半径角和顶部div的背景色以及其他样式

最简单的解释方法是JSFIDLE：

HTML: 我希望能够保持“normal article”div不变，但能够从“button”中删除白色背景、黑色边框和方框阴影

这是通过Liferay web内容完成的，因此我仅限于可以进行哪些HTML更改。只能更改div“journal content article”中的任何HTML，并且不能向该div或任何父div添加其他类

我也不能更改“普通文章”div的内容，因为用户（没有CSS/HTML体验）必须输入这些内容

有没有关于如何实现这一点的想法，或者我是被迫使用Javascript的

谢谢

也许是这样：

你好按钮
白色背景的普通文章。
.期刊内容文章{
利润率：20px 20px；
宽度：150px；
}
.myClass{
背景色：白色；
边框：1px纯黑；
盒影：5px5px5pxDarkgrey；
}

可能是这样的：

你好按钮
白色背景的普通文章。
.期刊内容文章{
利润率：20px 20px；
宽度：150px；
}
.myClass{
背景色：白色；
边框：1px纯黑；
盒影：5px5px5pxDarkgrey；
}

我认为，如果不执行fredsbend建议的操作，或者不能够编辑div本身，就无法覆盖.journal content文章的样式。可以有效覆盖白色背景，如下所示：

div class="journal-content-article">
   <div class="journal-content-inside">
    <div class="button">
        Hello Button
    </div>
    </div>
</div>

.journal-content-inside {
    background-color: black;
    margin: 0 auto;
    padding: 0;
    width: 150px;
    overflow: hidden;
    border: none;
 }

div class=“期刊内容文章”>
你好按钮
.杂志内容{
背景色：黑色；
保证金：0自动；
填充：0；
宽度：150px；
溢出：隐藏；
边界：无；
}

---

但是，这并不能解决边界和框阴影问题。我不知道如果不使用javascript或其他方式在div之外进行编辑，这些内容是否真的是可以修复的。

我不认为您可以在不执行fredsbend建议的操作或不能够编辑div本身的情况下覆盖.journal content文章的风格。可以有效覆盖白色背景，如下所示：

div class="journal-content-article">
   <div class="journal-content-inside">
    <div class="button">
        Hello Button
    </div>
    </div>
</div>

.journal-content-inside {
    background-color: black;
    margin: 0 auto;
    padding: 0;
    width: 150px;
    overflow: hidden;
    border: none;
 }

div class=“期刊内容文章”>
你好按钮
.杂志内容{
背景色：黑色；
保证金：0自动；
填充：0；
宽度：150px；
溢出：隐藏；
边界：无；
}

---

但是，这并不能解决边界和框阴影问题。我不知道，如果没有javascript或div之外的其他编辑方式，这些内容是否真的可以修复。

一种可能帮助其他人的方法是在按钮上设置负边距：

.button {
    margin: -10px;
}

这使得按钮比边框和阴影更大，并且关闭了

溢出：隐藏
后，问题就被掩盖了

然而，它的缺点是按钮变得比你想要的大。在一些设计中，这可能很好，但我们有一个框/柱结构，只有-2倍的边距看起来太不对齐了，我无法使用它（我是一个完美主义者）

不过它可能会帮助其他人
 一种可能帮助其他人的方法是在按钮上设置负边距：

.button {
    margin: -10px;
}


这使得按钮比边框和阴影更大，并且关闭了
溢出：隐藏
后，问题就被掩盖了

然而，它的缺点是按钮变得比你想要的大。在一些设计中，这可能很好，但我们有一个框/柱结构，只有-2倍的边距看起来太不对齐了，我无法使用它（我是一个完美主义者）

不过它可能会帮助其他人
 我不认为没有javascript就可以做到这一点。因为
按钮
是
div
中唯一的元素，所以
div
的高度和宽度与button@tbigby你想要达到的目标有点让人困惑。你能简化一下吗？你不能编辑
的css。期刊内容文章
？I假设你也做不到？@freebird-请参阅fredsbend的解决方案（），它显示了所需的结果。我只是无法添加div“.myClass”。从本质上讲，这是一个依赖于子场景的CSS父场景，我理解这是其他堆栈溢出问题无法解决的。只是想知道在某些情况下是否有一种方法可以覆盖或屏蔽父元素的样式。我认为没有javascript就无法实现这一点。因为
按钮
是
div
中唯一的元素，所以
div
的高度和宽度与button@tbigby你到底是什么有点困惑试图实现。你能简化一点吗？你不能编辑
杂志内容文章的css
？我想你也做不到？@freebird-请参阅fredsbend的解决方案（），它显示了所需的结果。我只是无法添加div“.myClass”。从本质上讲，这是一个依赖于子场景的CSS父场景，我理解这是其他堆栈溢出问题无法解决的。只是想知道在某些情况下是否有方法覆盖或屏蔽父元素的样式。将
溢出：隐藏
添加到
.myClass
并使用感谢您的想法！不幸的是，我无法更改第二篇文章（您在其中放置了一个myClass div），因为最终用户将创建数百篇这样的文章，并且必须在Liferay富编辑器源代码中添加该div。如果您对javascript没有问题，我将以这种方式进行处理。通过一个简单的代码，您应该能够针对所有
.journal content article
和
.button
div，然后应用必要的样式。如果可能的话，我更愿意避免使用Javascript，但是是的，我的下一个计划是获取“button”类的父类，并动态地向父类添加一个新类。自从
.button {
    margin: -10px;
}