The other way round

こんにちは。改めてお返事遅くなりました (*_ _)

<span class="marquee-span">通常の文字<span style="color: red;">赤くしたい文字<span style="color: black;">通常の文字<span style="color: red;">赤くしたい文字<span style="color: black;">通常の文字<span style="color: red;">赤くしたい文字</span></span></span></span></span></span></span>

この内容なんですが、

<span class="marquee-span">通常の文字<span style="color: red;">赤くしたい文字span>通常の文字<span style="color: red;">赤くしたい文字</span>通常の文字<span style="color: red;">赤くしたい文字</span></span>

こうですね。親要素の .marquee-span にすでに通常文字色の指定がありますので、色変更したい文字列だけを
<span style="color: 指定色">色変更したい文字列</span>
こうして挟んでください。元の内容(「成功でした」と書いて頂いた内容)だと構文エラーなので修正必須です(終了タグが一つ余分なため)

-------
> cssでピリオドを頭に打たずに書いています〜

まず「ピリオド(またはフルストップ)」ではなく「ドット」ですね。ドットはクラス名を意味します。
例)
.aaa

この場合は例えば
①
<div class="aaa">〜</div>
や
②
<span class="aaa">〜</span>
や
③
<table class="aaa"><tr><td>〜</td></tr></table>
など、要素名を問わずクラス名が「aaa」です。要素名というのは①がdiv要素、②はspan要素、③はtable要素です。そして

.aaa {
color: red;
}

とした場合、①②③それぞれ要素は異なりますが、全て文字が赤くなります。

また、ドットではなくハッシュ(#)の場合はid名を意味します。
①
<div id="aaa">〜</div>
②
<span id="aaa">〜</span>
③
<table id="aaa"><tr><td>〜</td></tr></table>

idはclassと違い、同ページ内で単一でしか存在してはいけませんので、記事のカスタマイズ等で利用する機会は少ないかと思います。というよりも使用を避けたほうが良いです。上記のようにサンプル3要素が同ページ内に存在した場合は構文エラーです。

-----
> ".table.a" では無く"table.a"です〜で成功しています〜

.table.a
と
table.a
は意味が全く違います。

.table.a
というのは「tableというclass名を持つ要素で、『かつ』aというclass名も持っている」という意味。
例)
<table class="table"><tr><td>〜</td></tr></table> --- 該当しない
<table class="table a"><tr><td>〜</td></tr></table> --- 該当する
<div class="table">〜</div> --- 該当しない
<div class="table a">〜</div> --- 該当する

table.a
というのは「table要素であり、『かつ』aというclass名を持っている」という意味です。

<table><tr><td>〜</td></tr></table> --- 該当しない
<table class="a"><tr><td>〜</td></tr></table> --- 該当する
<div class="a">〜</div> --- 該当しない
<div class="a">〜</div> --- 該当しない

ドットもハッシュも付いておらず、要素名が記されているものを「要素セレクタ」と言います。
例)
table {color: red;} --- 意味, 全てのltable要素は赤文字
div {color: white} --- 意味, 全てのdiv要素は白文字

ドットが付いている場合は「クラスセレクタ」
例)
.aaa {color: red;} --- 意味, class名「aaa」を持つ全ての要素は赤文字
.bbb {color: white;} --- 意味, class名「bbb」を持つ全ての要素は白文字

ハッシュが付いている場合は「アイディーセレクタ」
例)
#aaa {color: red;} --- 意味, id名「aaa」を持つ要素(単一)は赤文字
#bbb {color: white;} --- 意味, id名「bbb」を持つ要素(単一)は白文字

組み合わさっており、間に半角スペースがある場合

例)
.aaa .bbb {color: red;} --- 意味, class名「aaa」を親要素に持つ、class名「bbb」の要素

<div class="aaa"><span class="bbb">〜</span></div> --- 該当

<div><span class="bbb">〜</span></div> --- 該当しない

<div class="aaa"></div>
<span class="bbb"></span> --- 該当しない(.aaa と .bbb が親子関係ではく兄弟関係のため)

組み合わさっており、間に半角スペースが無い場合

例)
.aaa.bbb {color: red;} --- 意味, class名「aaa」を持ち、かつ、class名「bbb」も持つ要素

<div class="aaa">
<div class="bbb">〜</div>
</div> ---該当しない

<div class="aaa bbb">〜</div> --- 該当する

例)
table.aaa {color: red;} --- 意味, table要素であり、かつ、class名「aaa」を持つ(この場合要素はtableで確定)

<table class="aaa"><tr><td>〜</td></tr></table> --- 該当する

<table><tr><td>〜</td></tr></table> --- 該当しない

<div class="aaa">〜</div> --- 該当しない

-----
先回「一文字class名は避けましょう」とお伝えしました。何故かと言うと例えば

a.a{color: red;}

これパッと見てすぐに意味が伝わりづらいですよね。「a要素であり、かつaというclass名を持つ」という意味ですが、こういうのは管理しやすさから言うと良くない名付けです。

そして、要素セレクタの利用はできるだけ避けましょう。ブラウザはレンダリング時にセレクタを右から順に解釈します。

この場合は
.aaa {color: red;}
これだけで識別可能です。
div.aaa{color: red;}
と書いてしまうと、まずaaaクラスを持つ要素を探し、そしてさらにdiv要素であるかのマッチングをします。その作業が無駄です。
ただしこういった場合は有効(というか、せざるを得ない)

上記の要素が存在しており、spanの方だけを赤くしたい場合は

span.aaa {color: red;}

と書く必要があります。とはいってもclassやidは識別のために利用しますので、本来は

など名称自体を変えた方が効率的ですね。
CSSには他にも「詳細度」「上書き」など複雑なルールがありますので、ルールに則って記述を行う必要があります。なかなか難しいかもしれない ^^;

管理者にだけ表示を許可する