Question

我有一个<li class="jobs-dashboard1">我想使用CSS作为目标。问题在于它没有响应，所以我想知道是否可以通过某种方式使用父<ul>的ID来指定，例如：

#adminmenu.jobs-dashboard1 {
    background-color: green;
}

<div id="adminmenuback"></div>
<div id="adminmenuwrap">
    <ul id="adminmenu">
        <li class="wp-first-item wp-has-submenu wp-has-current-submenu wp- 
menu-open menu-top menu-top-first menu-icon-dashboard menu-top. 
first" id="menu-dashboard">
            <a href='index.php' class="wp-first-item 
wp-has-submenu wp-has-current-submenu wp-menu-open menu-top menu- 
top-first menu-icon-dashboard menu-top-first">
                <div class="wp-menu- 
arrow">
                    <div></div>
                </div>
                <div class='wp-menu-image dashicons-before 
dashicons-dashboard'><br /></div>
                <div class='wp-menu- 
name'>Dashboard</div>
            </a>
            <ul class='wp-submenu wp-submenu-wrap'>
                <li class='wp-submenu-head' aria-hidden='true'>Dashboard</li>
                <li class="wp-first-item current">.
                    <a href='index.php' class="wp-first-item current" aria- current="page">Home</a></li>
                <li><a href='update-core.php'>Updates 
<span class='update-plugins count-37'><span class='update. 
count'>37</span></span></a></li>
                <li class="jobs-dashboard1"><a href='https://adsler.co.uk/jobs-dashboard/' class="jobs. 
dashboard1">Jobs</a></li>
                <li class="post-job1"><a href='https://adsler.co.uk/post-a-job/' class="post-job1">Post A 
Job</a></li>
                <li class="events-dashboard1"><a href='https://adsler.co.uk/your-events-dashboard/' class="events. 
dashboard1">Events</a></li>
                <li class="post-event1"><a href='https://adsler.co.uk/post-an-event/' class="post-event1">Post 
An Event</a></li>
            </ul>
        </li>

这行不通，我也不知道为什么。

enter image description here

如果您在屏幕快照中看到Jobs ...那是我要定位的目标之一。

如果有帮助，该站点为https://adsler.co.uk，但这是后端修改。

Answer 1

您在哪里添加此CSS？您不能将其添加到您在网站上使用的典型CSS文件中，因为这些文件均已加载在前端，而未加载到Wordpress仪表板中。

如果该项目已经具有自己的类，并且仅在该项目上使用，则也不必在类之前使用ID定位您的项目。如果您在多个项目上使用此类，则可以指定ID或其他选择器。

将此添加到您的functions.php或自定义插件的末尾

这是原始发布的解决方案：

add_action('admin_head', 'custom_admin_css');

function custom_admin_css() {
  echo '<style>
    .jobs-dashboard1 {background: green;}
  </style>';
}

这是另一种也应该起作用的方法。

add_action( 'admin_head', 'custom_admin_css' );
function custom_admin_css() { ?>
<style>
    .jobs-dashboard1 {background-color: green; }
</style>
<?php }

Answer 2

好吧，您错过了CSS声明中的空格。

应该是

#adminmenu .jobs-dashboard1 {background-color: green;}

希望这会有所帮助！

Answer 3

这是因为在“ .jobs-dashboard1”上有更多的节点层。所以你可以使用这个：

#adminmenu #menu-dashboard .wp-submenu .jobs-dashboard1{background-color: green;}

或者如果您想要一种更清洁的方式：

#adminmenu li ul .jobs-dashboard1{background-color: green;}

Answer 4

它有效，请检查以下代码段。还要检查CSS Combinators

#adminmenu .jobs-dashboard1 {
  background-color: green;
}

<div id="adminmenuback"></div>
<div id="adminmenuwrap">
  <ul id="adminmenu">
    <li class="wp-first-item wp-has-submenu wp-has-current-submenu wp- 
menu-open menu-top menu-top-first menu-icon-dashboard menu-top. 
first" id="menu-dashboard">
      <a href='index.php' class="wp-first-item 
wp-has-submenu wp-has-current-submenu wp-menu-open menu-top menu- 
top-first menu-icon-dashboard menu-top-first">
        <div class="wp-menu- 
arrow">
          <div></div>
        </div>
        <div class='wp-menu-image dashicons-before 
dashicons-dashboard'><br /></div>
        <div class='wp-menu- 
name'>Dashboard</div>
      </a>
      <ul class='wp-submenu wp-submenu-wrap'>
        <li class='wp-submenu-head' aria-hidden='true'>Dashboard</li>
        <li class="wp-first-item current">.
          <a href='index.php' class="wp-first-item current" aria- current="page">Home</a></li>
        <li><a href='update-core.php'>Updates 
<span class='update-plugins count-37'><span class='update. 
count'>37</span></span></a></li>
        <li class="jobs-dashboard1"><a href='https://adsler.co.uk/jobs-dashboard/' class="jobs. 
dashboard1">Jobs</a></li>
        <li class="post-job1"><a href='https://adsler.co.uk/post-a-job/' class="post-job1">Post A 
Job</a></li>
        <li class="events-dashboard1"><a href='https://adsler.co.uk/your-events-dashboard/' class="events. 
dashboard1">Events</a></li>
        <li class="post-event1"><a href='https://adsler.co.uk/post-an-event/' class="post-event1">Post 
An Event</a></li>
      </ul>
    </li>

将自定义CSS添加到Wordpress仪表板

4 个答案: