However, since I have <button> elements on multiple pages, I want to target them using CSS if possible (and I don't particularly want to go and add a class to all the <a href that are wrapping the <button>'s on the site). This is where I was thinking the :before pseudo-element would come in handy but it doesn't seem to work:
This is how the <button>'s display in Firefox, see the blue default text-decoration applied to the <a href. The reason it is showing up only on the right hand side is because a class of margin-left:5px is applied to the <button> element:
Here's a basic version of the buttons up on jsfiddle (ignore slight appearance differences): http://jsfiddle.net/Vtjue/2/
The :before and :after selectors refer to generated elements that exist separately from the DOM and are rendered by the browser on the fly. That means you don't use them to traverse your HTML structure.
Due to the nature of CSS selectors, you cannot select an a that contains a button, only the other way around (button contained by a). I'm afraid your only options are to use a class, or move your buttons away from your a because they semantically don't belong there.
发布评论
评论（1）
:before和:after选择器指的是独立于 DOM 存在并由浏览器动态渲染的生成元素。这意味着您不使用它们来遍历 HTML 结构。由于 CSS 选择器的性质，您无法选择包含
button的a，只能选择相反的方式（button包含在button中） >a）。恐怕您唯一的选择是使用类，或者将您的按钮从a移开，因为它们在语义上不属于那里。The
:beforeand:afterselectors refer to generated elements that exist separately from the DOM and are rendered by the browser on the fly. That means you don't use them to traverse your HTML structure.Due to the nature of CSS selectors, you cannot select an
athat contains abutton, only the other way around (buttoncontained bya). I'm afraid your only options are to use a class, or move yourbuttons away from yourabecause they semantically don't belong there.