基于链接文本值的CSS

Question

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

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

这两个按钮是通过框架自动生成的，因此我几乎无法控制这两个链接之间的空间。 我想在两个按钮之间留出一些空间。 我添加了一些CSS

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

但这又在“取消”和“保存的左侧”链接的右边增加了边距-浪费了很多空间。 是否可以编写一些基于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.在所有链接之间添加空间
2.删除第一个链接的左边距
3.从最后一个链接中删除右边距

示例代码笔链接