CSS Specificity or Inheritance

Specificity of inherited CSS properties

Any declaration that matches element directly will get priority over the property that's inherited from the element's parent. Specificity has nothing to do with that.

CSS inheritance vs CSS specificity

As I said in the comment, I believe you were right: inheritance in CSS is related to the DOM hierarchy. Certain styles are inherited from parent elements.

Specificity has to do with which CSS rules take precedence over other CSS rules. See below for some examples.

.container {  font-size: 35px;}
p {  color: red;}
.section {  color: green;}
div.section {  /* More specific then .section rule */  color: purple;}

<div class="container">  <p>    Example of inheritance. This paragraph has inherited the font-size of its parent.    <span>This span also inherited font-size.</span>  </p></div>
<div>  <p class="section">    Example of specificity. The "section" class is more specific than the rule created for the p element. Therefore, styles defioned in the "section" class rule may override those defined in the p element rule.  </p>    <p>    No class applied.  </p>    <div class="section">    The "div.section" rule is more specific than the ".section" rule, so this text is purple.  </div></div>

CSS Specificity and Inheritance

The .container rule doesn't match the p element. So specificity is irrelevant here. Inheritance and specificity are separate concepts and the only time they interact is when more specific/less specific rules contain declarations with inherit. That is not the case here.

As far as the p element is concerned, only the * rule applies, and the * contains its own font-size declaration, and so the specified font size follows that declaration.

If the * rule didn't have its own font-size declaration, then the p element would inherit from .container.

If you want descendants of .container to take after its font size, you will need an additional .container * rule. Be very careful with the inherit keyword when it comes to relative values, though — you probably meant to keep all descendants the same size, so 1em or 100% is more appropriate here than inherit:

* {  font-size: 18px;}
.container {  font-size: 50%;}
.container * {  font-size: 1em;}

<div class="container">  <p>    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate explicabo fugiat laborum minus ullam? Amet delectus facilis id quam temporibus.  </p></div>

Specificity order of CSS tag selectors with equal specificity

Specificity matters when two or more selectors are matching the same element – not the case here.

e.g.:
in the example below the more specific selector div#id.class won't win against h1 because they are referring to two distinct elements, so the color of h1 is determined by the first rule

h1{    color: blue;}
   div#id.class {    color: red;}

<html><head></head><body>    <div id="id" class="class">        <h1>This is the title</h1>    </div></body></html>

How does specificity work with inherited styles?

From the MDN page on Specifity

Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Hence p will override .container no matter what. The inherited style from .container is overwritten

Confusion between inheritance and specificity in CSS

Every CSS rule only applies to the subject of its selector.

For p { ... } the subject is all p elements

For #mainContent p { ... } the subject is all p elements which are inside the element with id mainContent.

if a p element is inside the element with id mainContent, the #mainContent p { ... } rule wins because it is a more specific rule.

The strong element is not the subject of either rule, so neither applies directly.

In the example, the strong element is the subject of the .green { ... } rule. So that is the rule that applies to that element.

So where does inheritance come in?

Inheritance of a property to an element can happen in one of two ways.

First, there can be an explicit rule whose subject is the element and the property setting is inherit. So strong { color:inherit; } will, if it is the highest priority rule with the color property in the cascade for a strong element, force the color of that element to be taken from that of its parent.

Alternatively, if there is no rule anywhere in the cascade for which a given strong element has a particular property defined, that element will take a default value. Some properties are defined as "inherited" and others are not. The color property is defined as inherited.

So, in this alternative case, only when that there is no rule whose subject is a given element and has a color property, does the color of that given element get inherited from the color of the containing element.

In your example. there are multiple rules for which the p element is the subject and the color element is defined, so no inheritance is effective on that.

CSS specificity precedence

Both of these have to do with whether the style is applied directly to the element or to the parent element.

In both cases, your intuition is correct for the outer div.main element. However, there are rules that apply to the h1s that, while less specific, apply directly to the h1s so they take precedence over the more specific rules that apply to the divs.