html - How to efficiently remove user-agent stylings applied to my anchor tags

Question

I'm using Chrome and am styling a (anchor) tags.

a {
  all: unset;
}

I believe all: unset sets all properties applied to a either to be initial or inherit if a property's naturally inheritable (e.g. color).

1. a {all: unset} does make text-decoration: underline turn into text-decoration: none. However, it doesn't 'unset' color: -webkit-link (which makes text purple). My solution: a {color: unset}.

Why am I forced to do this additional solution? And is there a more effective solution other than repeating a {property: unset} every-time a property not captured by all: unset is discovered?

2. Here's a second example: If I want to make a a box-sizing: border-box, * {box-sizing: border-box} won't work. a {box-sizing: border-box} does. I don't know why this is.

---

Here's something that might be useful. Here's what Chrome Inspector shows me of a.

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

Although it just adds more confusion to me because I thought my solutions (using the a selector) wouldn't 'capture' a pseudo-class (a:-webkit-any-link)

---

P.S.

The ultimate goal behind this question (if this goal is reasonable) is to stop these user-agent stylings (like color ) from being applied to my a tags (on Chrome & any other browser).

标签： htmlcss

Answer 1

这应该是您所需要的：

* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
  outline: none;
}

<a href="#">yourLink</a>