The difference is between additive and subtractive colors. Light versus paint. Primary Colors of Light - Mixing of Colors

That was just Ottergram's choice. It means that 20% of the background color will show through. transparency

Sure. My favorite example is hyperlinks in the nav bar:

    <nav>
        <ul>
            <li><a href="home.html">home</a></li>
            <li><a href="about.html">about us</a></li>
            <li><a href="contact.html">contact us</a></li>
            <li><a href="buy.html">Shop</a></li>
        </ul>
    </nav>

To style all of those, we could do:

nav ul {... }
nav li {... }
nav a { ... }

Or, we can add classes to all of them. But that's a lot more clutter.

NAV A means a hyperlink (an A element) that is a descendant of a NAV element.

Classes are done with dots and IDs with hashtag:

.optional {... }
.important li {... }
.minor { ... }
#table_of_contents { ... }
#copyright_notice { ... }

When that's a clear and succinct way of describing the set of elements.

You could always give each element a unique ID and then style it using #id, but that would be tedious beyond belief, and would not generalize well.

The browser can only scroll to one place, so you can only put one ID in the URL.

Sure. A hyperlink has the structure https://machine.domain/path/to/file#id where the #id is optional.

LI LI means an LI that is a descendant of an LI. So, only with nested lists.

LI + LI means an LI that immediately follows another LI. So LI + LI is every LI except the first one.

I don't know of a simple rule for every element except the last, but there might be some clever trick, maybe involving :last-child and :not

UL .lorem is any .lorem descendant of a UL.

UL > .lorem is any .lorem that is a child of a UL.

Children are a subset of descendants: every child is a descendant, but not every descendant is a child. For example, grandchildren are descendants, but they are not children.

In a proper, valid, HTML file, all the LI elements will be siblings and all their siblings will be LI elements. In which case, there's no difference.

So, let's talk about a SECTION that has children: H2 P P BLOCKQUOTE P P

Now, consider the selectors P + P versus P ~ P

The B can only be a single selector (tag, class).

Yes, for question 2, LI ~ LI would also work (but it wasn't an option).

Right, there's no hyphen structural selector. You can use them (without spaces) in your class names.

Let's draw a picture

There are a bunch of pseudo-classes. We're just learning about :hover. It means the mouse is hovering over the element.

For spacing we are using margin-top, which is the distance above the element.

Let's do a VIEW SOURCE together: interactive demo

Maybe the interactive demo will help.

Yes. That allows sharing of CSS code.

revised