What Does an Asterisk Before an Equal Sign Mean (*=) ? What About the Exclamation Mark

What does an asterisk before an equal sign mean (*=) ? What about the exclamation mark?

! is part of !important; it is not a comment. The !important forces a rule to always be applied. It's typically used to override or to prevent your style from being overridden.

The *= means "contains". So in the example, the first line is looking for all children of .nav li ul li a elements with classnames that contain "icol-".

What asterisk functionality is used in `a[href*=`?

Most common CSS attribute selectors are:
starts with ^=
ends with $=
and contains *=

You can read more about css attribute selectors here: https://www.w3schools.com/css/css_attribute_selectors.asp

If already using the contains selector, why use the starts-with selector

It is not a redundant selector. It is possibly used to select the elements with icon- class even if it is second one in the class list like in the below snippet.

[class^="icon-"] will only select the elements whose value for class attribute starts with icon-.

[class*=" icon-"] will select all elements that contain a class with icon- in its list of classes. Note how they have specifically used a space before.

Quoting CodingWithSpike's comment

[class*="icon-"] without a space would also match undesired classes like not-icon-1 or lexicon-name which is likely why the leading space is included.

In essence the selector group is used to select all elements who have at least one class which begins with icon- as part of their class list.

[class^="icon-"] {

  color: green;

}

[class*=" icon-"] {

  color: red;

}

[class^="icon-"],

[class*=" icon-"] {

  background: beige;

}

[class*="icon-"]{

  border: 1px solid brown;

}

<div class="icon-1">Only Icon class</div>

<div class="a icon-1">Some other class before</div>

<div class="a not-icon-1">Some other class before</div>

document.getElementsByTagName("base"); 

 document.getElementById("YourHyperlinksID");