php - 试图选择 WordPress 生成的 Widget 类？

Question

好的，WordPress 新手。我创建了 wordpress 最近的帖子小部件，它生成了一些新的 WordPress 标记，我试图选择它来添加我的自定义样式。

• 在网络上进行研究后，除了检查元素并找到 WordPress html 标记选择器/id 并为它们编写我的 css 之外，我没有找到其他选择。 (有没有更好的方法)。

这是我的小部件 Html:

            <div class="recent-post-wrap">
            <h3 id="recent-post-headline">RECENT POSTS:</h3>
            <ul class="recent-posts">

        <?php 
                    // If the sidebar widget is active i.e. in the admin a widget is been created then show the dynamic sidebar in the markup otherwise waste of markup.
                        if(is_active_sidebar('recentpost')) { 
                            dynamic_sidebar('recentpost');
                        } 
                ?>

            </ul>               
        </div>

• 注意:还有另一个 wordpress 生成的标题“最近的帖子”是白色的 - 是否有标题过滤器？

这是 wordpress 检查元素 html 标记

<div class="recent-post-wrap">
            <h3 id="recent-post-headline">RECENT POSTS:</h3>
            <ul class="recent-posts">

                <li id="recent-posts-3" class="widget widget_recent_entries">       <h2 class="widgettitle">Recent Posts</h2>
    <ul>
                <li>
            <a href="http://localhost/wordpress/2017/07/30/asdfads/">asdfads</a>
                    </li>
                <li>
            <a href="http://localhost/wordpress/2017/07/29/blog-post-two/">Title 2</a>
                    </li>
                <li>
            <a href="http://localhost/wordpress/2017/07/29/how-to-manage-your-team-effectively/">TITLE 1</a>
                    </li>
            </ul>
    </li>

            </ul>               
        </div>

这是我尝试选择最近的帖子列表 id/选择器以删除元素符号和添加样式

        /* RECENT POST */
    .recent-post-wrap {
        margin-top: 1rem;
        padding: 1rem;
        background-color: red;      
    }

    /* list */
    .recent-post-wrap ul {
        padding: 1rem;
    }
    .recent-post-wrap ul li {
        padding: 2%;
    }
    .recent-post-wrap a:hover {
        background-color: black;
    }


    #recent-post-headline {
        font-size: 1rem;
    }

    /* Wordpress Recent Post Plugin */

     li#recent-posts-3.widget.widget_recent_entries a {
            list-style: none;
            color: red;
            background-color: red;
    }

Answer 1

试试这个

.recent-posts ul {list-style: none;}

或从 ul

中删除所有元素符号

ul {list-style: none;}

/* RECENT POST */

.recent-post-wrap {
  margin-top: 1rem;
  padding: 1rem;
  background-color: red;
}


/* list */

.recent-post-wrap ul {
  padding: 1rem;
}

.recent-post-wrap ul li {
  padding: 2%;
}

.recent-post-wrap a:hover {
  background-color: black;
}

#recent-post-headline {
  font-size: 1rem;
}

/* Wordpress Recent Post Plugin */

/*li#recent-posts-3.widget.widget_recent_entries a {
  list-style: none;
  color: red;
  background-color: red;
}*/

.recent-posts ul {
  list-style: none;
}

.recent-posts ul li a {
  color: red;
  background-color: yellow;
}

<div class="recent-post-wrap">
  <h3 id="recent-post-headline">RECENT POSTS:</h3>
  <ul class="recent-posts">

    <li id="recent-posts-3" class="widget widget_recent_entries">
      <h2 class="widgettitle">Recent Posts</h2>
      <ul>
        <li>
          <a href="http://localhost/wordpress/2017/07/30/asdfads/">asdfads</a>
        </li>
        <li>
          <a href="http://localhost/wordpress/2017/07/29/blog-post-two/">Title 2</a>
        </li>
        <li>
          <a href="http://localhost/wordpress/2017/07/29/how-to-manage-your-team-effectively/">TITLE 1</a>
        </li>
      </ul>
    </li>

  </ul>
</div>