How can I remove the blue styling on phone?

Question

I'm building a website and all the styling in mobile works fine except for links on iPhone. I have tried the solutions in this thread: How do I remove the blue styling of telephone numbers on iPhone/iOS?

I have tried this CSS :

a[href^="tel"],
span[href^="tel"] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

And also this CSS :

a[x-apple-data-detectors],
span[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

Nothing of the above works for me. Any suggestions on how I could solve this problem with pure CSS so the styling will inherit for all my web pages?

Update with an solution

The accepted answer will change the default behaviour of all <span> / <a> elements. Instead you should style using id or class on the elements. Example could look like:

.lnd-header-button__text{  
    all: initial;
  }

  .lnd-header-button__text * {
   all: unset;
  }

Answer 1

you can do it with a media query

be careful to use precise selector because using css all affect all css property of the matching selector

@media only screen and (max-width: 600px) {
  my-selector {  
    all: initial;
  }

  my-selector * {
   all: unset
  }
}