css - selector

p.p-tag {
  color: gray;
}
p#third-line {
  text-decoration: underline;
}

1つ目はp-tagであり、p-tagクラスでもある.
2つ目はpタグで、third-line IDでもあります.
意味は.

.pre span {
  background-color: yellow;
}

spanがすべてのspanではなく「pre」クラスにあることを示します.
ex)

<div class="pre">
  <span> CSS selector </span>
</div>

これが適用されます.
もう少し難しいなら.

.a div .b .pre span {
  background-color: yellow;
}

このコードを回すと

<div class="a">
  <div>
    <header class="b">
      <h1 class="pre">
        <span>제목! 노란색 배경 나옴!</span>
        <span class="title">이것도 나옴!</span>
      </h1>
      <span>이건 적용안 됨</span>
    </header>
  </div>
  <span>이건 적용안 됨</span>
</div>

こうなります.理解するためには、もっとよく見たほうがいいです.