Question

我在将样式应用到Breadcrumb NavXT插件时遇到了很大的问题。

当我在html测试文档中应用我的样式时，它看起来很好：screenshot

当我使用Breadcrumb NavXT插件在WP文档中应用相同的样式（但调整到插件）时，我能得到的最好的是：screenshot

我已经尝试了明显的答案，例如将margin-right应用于最后一个孩子，没有任何工作。真的很感激一些帮助。

以下是WP正在输出的相关html：

<div class="breadcrumb">

<!-- Breadcrumb NavXT 3.9.0 -->
<a title="Go to Home." href="http://localhost/media">Home</a> &gt; 
<a title="Go to Email &#038; SMS Broadcasting." href="http://localhost/media/
email-sms-broadcasting/">Email &#038; SMS Broadcasting</a> &gt; Track &#038;   
Learn </div><!--END breadcrumb -->

以下是相关的css：

.breadcrumb{ list-style:none; overflow:hidden; position:absolute; font:10px     
 Helvetica,Arial,Sans-Serif; top:160px; float:left}
.breadcrumb a{ color:white;  text-decoration:none;  padding:2px 0 2px 35px;     
 background:blue; background:#728c8c; position:relative;  display:block; float:left}

.breadcrumb a:after{ content:"";  display:block;  width:0;  height:0;  
 border-top:50px solid transparent;   border-bottom:50px solid transparent;  border-  
 left:30px solid #728c8c;  position:absolute;  top:50%;  margin-top:-50px;  
 left:100%;  z-index:2}

.breadcrumb a:before{ content:"";  display:block;  width:0;  height:0;  border-  
 top:50px solid transparent;  border-bottom:50px solid transparent;  
 border-left:30px solid white;  position:absolute;  top:50%;  margin-top:-50px;   
 margin-left:1px;  left:100%;  z-index:1}

.breadcrumb a:first-child { padding-left:10px;}

.breadcrumb a:nth-child(2) {background: #768c72}
.breadcrumb a:nth-child(2):after{border-left-color:#768c72}
.breadcrumb a:nth-child(3) {background: #909673}
.breadcrumb a:nth-child(3):after{border-left-color:#909673}
.breadcrumb a:nth-child(4) {background: #ad7601}
.breadcrumb a:nth-child(4):after{border-left-color:#ad7601}
.breadcrumb a:nth-child(5) {background: #E3E8E8}
.breadcrumb a:nth-child(5):after{border-left-color:#E3E8E8}
.breadcrumb a:nth-child(6) {background: #728c8c}
.breadcrumb a:nth-child(6):after{border-left-color:#728c8c}
.breadcrumb a:nth-child(7) {background: #768c72}
.breadcrumb a:nth-child(7):after{border-left-color:#768c72}
.breadcrumb a:last-child a{background:transparent !important;  color:black;  
pointer-events:none; cursor:default;}

.breadcrumb a：悬停{background：＃526476} .breadcrumb a：悬停：在{border-left-color：＃526476！important}

之后

Answer 1

声音和外观好像WP安装已经具有“breadcrumb”类的CSS样式。这是一个常用的类名。要解决这个问题，要么将类重命名为更合适的类，例如“thisIsMyBreadcrumb”。

如果这是由breadcrumb插件生成的，并且你不想进入他们的PHP来改变它（保护未来的更新），你可以用你的id或类包装你自己的div中的breadcrumb类并使用它来更具体的CSS。

e.g。所有CSS声明与此...

.breadcrumb {}

...改为此......

#thisIsMyBreadcrumb .breadcrumb {}

假设您介绍HTML ...

<div id="thisIsMyBreadcrumb">
    // place your breadcrumb here
</div>

指向定制命名div的更具体的声明将确保WP主题或基本样式表不会引起冲突 - 从而使您返回到在远离WP的静态文件中成功生成的这些元素的呈现。

在Wordpress的Breadcrumb NavXT插件中应用样式的问题

1 个答案: