试图选择WordPress生成的Widget类？

Question

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

• 经过在网络上的研究，我发现除了去检查元素和找到WordPress的HTML标记选择器/ ids和写我的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>