試圖選擇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>