Improve handling of !important transformation specificity

[hellofromtonya]

This PR improves the !important selector specificity to ensure that it takes precedence over inline styles.

The inline selector's specificity is calculated using a literal value of 5. Let's call that 5 at inline specificity multiplier. The multiplier is used to generate the number of :not(#_) placeholders.

As @westonruter notes in the ticket #1073, with the following HTML:

<header id="header" style="display: none;>This is the header!</header>

It transforms the inline style to be:

:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-224b51a {
    display: none;
}

However, what if there is a CSS ruleset that has display: block !important; as a declaration? This PR fixes that edge case to ensure the !important declaration takes precedence over the inline style.

How? It uses the same inline specificity multiplier and then adds 1 to it. The thought process is this:

1. Inline selectors have 5 :not(#_)
2. !important have 6 :not(#_)

Before

Here is the HTML:

<header id="header" class="amp-wp-224b51a">This is the header!</header>

Here is the CSS:

#header {
	display: block !important;
	width: 100%;
	background-color: #cc0000;
	padding: 20px;
	color: #fff;
}
:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-224b51a {
    display: none;
}

After

Here is the HTML:

<header id="header" class="amp-wp-224b51a">This is the header!</header>

Here is the CSS:

#header {
	width: 100%;
	background-color: #cc0000;
	padding: 20px;
	color: #fff;
}
:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-224b51a {
    display: none;
}
:root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) #header {
    display: block;
}

Closes #1073.

[westonruter]

It works! Great job.