Question

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

在网上研究后，除了去检查元素并找到WordPress html标记选择器/ ids并为它们编写我的css之外，我找不到其他选择。（有更好的方法）。

这是我的Html for widget：

            <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 inspect元素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

试试这个

  234   -642  20.20
  233   -640  20.40
  233.4  --   20.60
  --    -646  20.80
  --    -642  21.00
  234   --    21.20
  342   --    21.40
  ...   ...   .....

或删除.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;
}

试图选择WordPress生成的Widget类？

1 个答案: