CSS自定义LI P链接

Question

似乎真的很奇怪，因为上次我尝试使用相同的样式并完美工作，但现在不起作用。我的html看起来像：

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span><img src="test1.png"></span>TEST!<span class="caret"></span></a>
    <ul class="dropdown-menu">
<a rel="nofollow" href="../test1"><li><p><img src="/assets/flags/test1.png"> Test1</p></li></a>
</ul>
</li>

CSS：

.dropdown-menu > a > li > p {
    clear: both;
    line-height: 1.42857143;
    color: #555;
    white-space: nowrap;
transition: color .2s ease;
}
.dropdown-menu > a:focus > li > p,
.dropdown-menu > a:hover > li > p {
color: #ff7500 !important;
text-decoration: none;
transition: color .2s ease;

感谢您的帮助！真的很喜欢Stackoverflow社区！

Answer 1

尝试这个

.dropdown-menu > li > a > p {
    clear: both;
    line-height: 1.42857143;
    color: #555;
    white-space: nowrap;
    transition: color .2s ease;
}
.dropdown-menu > li > a:focus > p,
.dropdown-menu > li > a:hover > p{
color:#ff7500  !important;
text-decoration: none;
transition: color .2s ease;
border: 1px solid #e6e6e6;
}
li {
  list-style-type: none;
}
a{
  text-decoration: none;
}

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    <span><img src="test1.png"></span>TEST!<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a rel="nofollow" href="../test1"><p><img src="/assets/flags/test1.png"> Test1</p></a></li>
    </ul>
</li>

Answer 2

这是您的HTML结构更新的结构：

<ul class="dropdown-menu">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
      <span><img src="test1.png"></span>TEST!
      <span class="caret"></span>
    </a>
  </li>
  <li>
    <a rel="nofollow" href="../test1">
      <img src="/assets/flags/test1.png"> Test1
    </a>
  </li>
</ul>

请参阅此小提琴

ul结构在您的示例中是不正确的，请参见此处：

文档：

https://developer.mozilla.org/en/docs/web/html/element/ul

还要注意inline和block元素之间的区别，请参见此处：

文档：

https://developer.mozilla.org/en-us/docs/web/html/block-level-level_elements#block-level_vs._inline

https://developer.mozilla.org/en-us/docs/web/html/inline_elements