CSS element changes taking no effect
<p>Usually when I go to write custom CSS for a site, I use Inspect Element to view the contents of certain, well, elements. And it usually I just add the identifier for that line, and punch in some custom commands like "border: none;" but I keep coming across elements that don't appear to have any real name other than just "element" and for some reason NO changes I make to some of these "elements" actually work or get applied.</p>

<p>For instance: There were disgusting white borders on a table, and since I couldn't target the specific element, I added this to the top of my document:</p>

<pre><code>* {
    border: none !important;
}
</code></pre>

<p>Which, one would assume would work. And, surely, it does! For everything except the element I'm trying to change. I still can't quite figure out how I'm expected to change this element, when something that encompasses the entire file STILL can't forcefully change it. Can someone explain this to me?</p>

<p>Edit:</p>

<p>I'm not sure what you expect me to show you, since I explained it here. These images show my inspector open and you already have above my custom code implemented through Stylish plugin/ custom CSS file.</p>

<p><img src="https://i.imgur.com/nOLsRRM.png" alt="First">
and <br/>
<img src="https://i.imgur.com/Xkt1RNE.png" alt="Second">
<br/>
Just to reiterate, instead of saying "element" it usually gives me a valid name to go by, such as "table#first", and I wrote </p>

<pre><code>* {
    border: none !important;
}
</code></pre>

<p>to counter the border it has applied, but it won't take the change. I imagine it has something to do with the !important in the original border but I'm not sure what to do.</p>

<p>Edit:</p>

<p>I added</p>

<pre><code>table[style] {
    border: none !important;
}
</code></pre>

<p>Which I expected to work, but still comes up the same as when I added the first block of code I explained, it crosses it out in the inspector and doesn't take effect.</p>