时间戳

首页 > 解决方案 > 在 WordPress 中修改父子图标

html - 在 WordPress 中修改父子图标

问题描述

我想修改 wordpress 网站上的图标。我有一个产品类别列表。还有子类别。

截屏

我想为父类别放置一个图标，为子类别放置一个不同的图标。这样做：

.widget_product_categories ul li:before { content: "\f7ab"; }

我更改了所有图标，但我不知道如何分别更改父级和子级。

我不知道如何在 CSS 中做到这一点了。你可以帮帮我吗 ？感谢您花时间回答。

ul.product-categories {
}
.widget_archive ul, .widget_categories ul, .widget_layered_nav_filters ul, .widget_layered_nav ul, .widget_links ul, .widget_nav_menu ul, .widget_pages ul, .widget_product_categories ul, .widget_recent_comments ul, .widget_recent_entries ul {
    margin: 0;
}
.widget_archive ul, .widget_categories ul, .widget_layered_nav_filters ul, .widget_layered_nav ul, .widget_links ul, .widget_nav_menu ul, .widget_pages ul, .widget_product_categories ul, .widget_recent_comments ul, .widget_recent_entries ul {
    margin: 0;
}
.widget ul {
    margin-left: 0;
    list-style: none;
}
.widget_archive ul, .widget_categories ul, .widget_layered_nav_filters ul, .widget_layered_nav ul, .widget_links ul, .widget_nav_menu ul, .widget_pages ul, .widget_product_categories ul, .widget_recent_comments ul, .widget_recent_entries ul {
    margin: 0;
}
.widget ul {
    margin-left: 0;
    list-style: none;
}
ul {
    list-style: disc;
}
ol, ul {
    margin: 0 0 1.41575em 3em;
    padding: 0;
}
ul {
    list-style: disc;
}
ol, ul {
    margin: 0 0 1.41575em 3em;
    padding: 0;
}
* {
    box-sizing: border-box;
}
* {
    box-sizing: border-box;
}
user agent stylesheet
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
.widget-area .widget {
    font-size: .875em;
    font-weight: 400;
}
.widget-area .widget {
    font-size: .875em;
    font-weight: 400;
}
.header-widget-region, .site-content {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.header-widget-region, .site-content {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
body, .secondary-navigation a {
    color: #0d25ad;
}
body, button, input, select, textarea {
    font-family: Source Sans Pro,HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
}
body, button, input, textarea {
    color: #43454b;
    line-height: 1.618;
    text-rendering: optimizeLegibility;
    font-weight: 400;
}
body {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}
body, button, input, select, textarea {
    font-family: Source Sans Pro,HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
}
body, button, input, textarea {
    color: #43454b;
    line-height: 1.618;
    text-rendering: optimizeLegibility;
    font-weight: 400;
}
body {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}
:root {
    --wp-admin-theme-color: #007cba;
    --wp-admin-theme-color-darker-10: #006ba1;
    --wp-admin-theme-color-darker-20: #005a87;
}
:root {
    --wp-admin-theme-color: #007cba;
    --wp-admin-theme-color-darker-10: #006ba1;
    --wp-admin-theme-color-darker-20: #005a87;
}
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
<ul class="product-categories" wfd-id="31"><li class="cat-item cat-item-20 cat-parent" wfd-id="53"><a href="https://www.naturalriders.fr/categorie/le-cavalier/">Le Cavalier</a><ul class="children" wfd-id="54">
<li class="cat-item cat-item-39" wfd-id="58"><a href="https://www.naturalriders.fr/categorie/le-cavalier/accessoires/">Accessoires</a></li>
<li class="cat-item cat-item-36" wfd-id="57"><a href="https://www.naturalriders.fr/categorie/le-cavalier/bracelets/">Bracelets</a></li>
<li class="cat-item cat-item-37" wfd-id="56"><a href="https://www.naturalriders.fr/categorie/le-cavalier/ceintures/">Ceintures</a></li>
<li class="cat-item cat-item-38" wfd-id="55"><a href="https://www.naturalriders.fr/categorie/le-cavalier/tours-de-chapeaux/">Tours de chapeaux</a></li>
</ul>

标签： htmlcsswordpressicons

解决方案

将它们分开 .widget_product_categories ul li:before { content: "\f7ab"; }用于父母和 .widget_product_categories ul li ul li:before { content: ""}孩子。

顺便说一句，您的 HTML 代码是错误的。应该有一个</li>又一个</ul>标签。

推荐阅读