尝试选择WordPress生成的Widget类吗？

Question

好吧，新来的WordPress。我已经创建了wordpress最近的帖子小部件，它生成了一些新的WordPress标记，我正在尝试选择这个标记来添加我的自定义样式。

• 在web上进行研究之后，我发现除了检查元素和找到WordPress html标记选择器/ids并为它们编写css之外，别无选择。(有没有更好的方法)。

下面是我的：

            <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>

这里我正在尝试选择最近的Post列表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>

​