CSS 基于 link 的文本值

Question

我有一些像这样的 html（自动生成的）：

<a>Save</a> &nbsp; <a>Cancel</a> &nbsp;

这两个按钮是通过框架自动生成的，因此我无法控制这两个 link 之间的 space。我想在两个按钮之间添加一些 space。我添加了一些 css

.fw-link {
margin-left: 6px!important;
margin-right: 6px!important;
}

但这又增加了取消右侧和保存左侧的边距 link - 浪费了很多 space。是否可以根据LINK的文本值编写一些适用的CSS？

Answer 1

使用类似的东西：

a:nth-child(1) { //1st a
    margin-right: 6px //!important needed?
}

a:nth-child(2) { //2nd a
    margin-left: 6px //!important needed?
}

Answer 2

尝试使用属性名称。

<a name="save">Save</a> nbsp; <a name="cancel">Cancel</a> nbsp;

然后在您的 CSS 文件中：

a[name=save] {
margin-right: 6px!important;
}
a[name=cancel] {
margin-left: 6px!important;
}

Answer 3

您的 CSS 可以是：

a {
   margin-left: 6px!important;
   margin-right: 6px!important;
}
a:first-child {
   margin-left: 0 !important;
} 
a:last-child {
   margin-right: 0 !important;
}

这将做的是：
1.在所有link之间添加space
2. 删除第一个 link
的左边距 3. 删除最后 link

的右边距

Sample codepen link

CSS 基于 link 的文本值

CSS based on text value of link

html

css

css-selectors