Question

所以我有以下代码：

<style>
.menu {
        padding: 30px 50px;
        padding-bottom: 0px;
}

.menu ul {
  list-style-type: none;
}

.menu ul a {
  display: inline-block;
  text-transform: uppercase;
  font-size: 20px;
}

.menu ul a li {
  display: inline-block;
  text-transform: uppercase;
  font-size: 20px;
}

.menu ul a:not(:first-child):before {
  padding-right: 15px;
  padding-left: 15px;
  content: '\2605';
}
</style>

<div class="menu">
  <ul>
    <a href="1"><li>LINK 1</li></a>
    <a href="2"><li>LINK 2</li></a>
    <a href="3"><li>LINK 3</li></a>
  </ul>
</div>

或者如果您愿意： https://jsfiddle.net/f64z4tp8/1/

如你所见，我有三个链接，中间是一个图标（星号）。但是，我希望明星（在项目之前）不是链接。可以这样做吗？

Answer 1

您的标记不正确：为了完整起见，您不能将SSH Error: All configured authentication methods failed以外的其他元素直接嵌套在<li>（或<ul>内）。如果您更新标记以反映这些更改，即：

<ol>

并通过更改此选项稍微修改您的选择器：

<ul>
    <li><a href="#">...</a></li>
</ul>

......对此：

.menu ul a:not(:first-child):before

你很高兴：

.menu ul li:not(:first-child):before

.menu {
  padding: 30px 50px;
  padding-bottom: 0px;
}

.menu ul {
  list-style-type: none;
}

.menu ul li {
  display: inline-block;
}

.menu ul a {
  text-transform: uppercase;
  font-size: 20px;
}

.menu ul li:not(:first-child):before {
  padding-right: 15px;
  padding-left: 15px;
  content: '\2605';
}

Answer 2

您必须更改html代码，a元素必须位于li元素内。

像这样：

<li><a href="1">LINK 1</a></li>

以及

:before

的

li

＆＃13;

 .menu {
        grid-area: menu;
        justify-self: right;
        align-items: center;
        padding: 30px 50px;
        padding-bottom: 0px;
}

.menu ul {
  list-style-type: none;
  font-family: 'LemonReg', sans-serif;
}

.menu ul a {
  display: inline-block;
  color: $yellowish;
  text-transform: uppercase;
  font-size: 20px;
}

.menu ul li {
  display: inline-block;
  color: $yellowish;
  text-transform: uppercase;
  font-size: 20px;
}

.menu ul li:not(:first-child):before {
  padding-right: 15px;
  padding-left: 15px;
  content: '\2605';
  color: blue;
}

＆＃13;

<div class="menu">
  <ul>
    <li><a href="1">LINK 1</a></li>
    <li><a href="2">LINK 2</a></li>
    <li><a href="3">LINK 3</a></li>
  </ul>
</div>

＆＃13;

Answer 3

为了实现这一目标，您需要在列表链接之外添加星标。您还应该尽可能地遵循HTML specs，其中<a>无效<ul>子元素。

所以最快的解决方案就是这样：

https://jsfiddle.net/f64z4tp8/8/

<强> HTML ：

您可以修改HTML结构并根据官方规范使用<a>元素的<li>元素，如下所示：

<div class="menu">
  <ul>
   <li><a href="1">LINK 1</a></li>
   <li><a href="2">LINK 2</a></li>
   <li><a href="3">LINK 3</a></li>
  </ul>
</div>

<强> CSS ：

由于您更改了HTML结构，因此您还需要更新CSS选择器，确保您仍然正确设置星标样式并正确列出项目，因此请将.menu a li定位到.menu li的规则更改为或只是.menu a。

例如，在添加星标的选择器上，从.menu ul a更改为.menu ul li，最后会出现以下结果：

.menu ul li:not(:first-child):before {
  padding-right: 15px;
  padding-left: 15px;
  content: '\2605';
  color: $primaryRed;
}

示例解决方案：

.menu {
		grid-area: menu;
		justify-self: right;
		align-items: center;
		padding: 30px 50px;
		padding-bottom: 0px;
}

.menu ul {
  list-style-type: none;
  font-family: 'LemonReg', sans-serif;
}

.menu ul a {
  display: inline-block;
  color: $yellowish;
  text-transform: uppercase;
  font-size: 20px;
}

.menu ul li {
  display: inline-block;
  color: $yellowish;
  text-transform: uppercase;
  font-size: 20px;
}

.menu ul li:not(:first-child):before {
  padding-right: 15px;
  padding-left: 15px;
  content: '\2605';
  color: $primaryRed;
}

<div class="menu">
  <ul>
   <li><a href="1">LINK 1</a></li>
   <li><a href="2">LINK 2</a></li>
   <li><a href="3">LINK 3</a></li>
  </ul>
</div>

Answer 4

我已将display:inline-block;添加到.menu ul a:not(:first-child):before css类。此时，文字下划线消失，星星变红。

这是因为CSS规范说：

当在内联元素上指定或传播到内联元素时，它会影响该元素生成的所有框，并进一步传播到拆分内联的任何流内块级框（参见第9.2.1.1节）。 [...]对于所有其他元素，它会传播给任何流入的孩子。请注意，文本修饰不会传播到浮动和绝对定位的后代，也不会传播到原子内联级后代（如内联块和内联表）的内容。

Answer 5

＆＃13;

.menu {
  padding: 30px 50px;
  padding-bottom: 0px;
}

.menu ul {
  list-style-type: none;
}

.menu ul li a {
  display: inline-block;
  text-transform: uppercase;
  font-size: 20px;
}

.menu ul li a {
  display: inline-block;
  text-transform: uppercase;
  font-size: 20px;
}

.menu ul li:not(:first-child):before {
  padding-right: 15px;
  padding-left: 15px;
  content: '\2605';
}

＆＃13;

<div class="menu">
  <ul>
    <li><a href="1">LINK 1</a></li>
    <li><a href="2">LINK 2</a></li>
    <li><a href="3">LINK 3</a></li>
  </ul>
</div>

＆＃13;

Answer 6

作为CSS选择器：

.menu ul a:not(:first-child):before {
  padding-right: 15px;
  padding-left: 15px;
  content: '\2605';

  text-decoration: none;
  pointer-events: none;
}

pointer-events: none;删除与::before元素的任何指针交互。

text-decoration: none;删除任何默认的UI效果，如下划线。

从菜单中的项目之前删除链接：

6 个答案: