CSSの優先順位

以下のコードで末尾のもののうち
color: #ffffff;が適用されず、 color: #3b3b3b;が適用されてしまいます。
CSSの原則上は、「idセレクタやclassセレクタなどの具体的・局所的なセレクタは、タイプセレクタや全称セレクタのような全般的なセレクタより優先される」と理解しているため、原因が分かりません。

もし、分かる方がいればご教示を願います。

.finance > tbody th {
background-color: #2980b9;
color: #ffffff;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #3b3b3b;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  background: #f8f8ff;
}



table {
	border: 1px solid #aaa;
	border-collapse: collapse;
	border-spacing: 0;
	border-radius: 6px;
}
table th,
table td {
	padding: .5em 2em;
	border: 1px solid #aaa;
         background: #f6f6f6;
}

.basic > thead th {
	background-color: #ea6153;
        color: #ffffff;
        }
.market > thead th {
	background-color: #27ae60;
        color: #ffffff;
        }

.finance > thead th {
	background-color: #2980b9;
        color: #ffffff;
        }

.finance >  tbody th {
	background-color: #2980b9;
    color: #ffffff;
        }

htmlコード
<table class="finance">
	<thead>
		<tr>
			<th>&nbsp;</th>
            <th>第10期</th>
			<th>第11期</th>
			<th>第12期</th>
			
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>営業収益</th>
			<td>***</td>
			<td>***</td>
			<td>***</td>
		</tr>
		<tr>
			<th>営業利益</th>
			<td>***</td>
			<td>***</td>
			<td>***</td>
		</tr>
		<tr>
			<th>経常利益</th>
			<td>***</td>
			<td>***</td>
			<td>***</td>
		</tr>
        <tr>
			<th>当期純利益</th>
			<td>***</td>
			<td>***</td>
			<td>***</td>
		</tr>


	</tbody>
</table>

行動規範の内容に同意します

回答4件

ご提示のHTMLとCSSをコピーして試してみましたが、問題なく表示する事ができました。
ですので、セレクタの優先度とは全く違う部分が原因の様な気がします。

最後の.finance > tbody thのみが反映されていないという事であれば、

セレクタの閉じ括弧が確実についているか
HTML側のタグについても正しく開いて閉じられているか
全角スペースなど余計な文字が含まれていないか

などを、該当のテーブル以外の箇所も含めて確かめて頂くと良いかもしれません。

念のため、私が試したコードを以下にメモしておきます。
間違いなく表示できている事をご確認頂けますと幸いです。

html
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4	<meta charset="UTF-8">
5	<title>Sample</title>
6	<style>
7		body {
8			font-family: "Helvetica Neue", Helvetica, Arial;
9			font-size: 14px;
10			line-height: 20px;
11			font-weight: 400;
12			color: #3b3b3b;
13			-webkit-font-smoothing: antialiased;
14			font-smoothing: antialiased;
15			background: #f8f8ff;
16		}
17		table {
18			border: 1px solid #aaa;
19			border-collapse: collapse;
20			border-spacing: 0;
21			border-radius: 6px;
22		}
23		table th,
24		table td {
25			padding: .5em 2em;
26			border: 1px solid #aaa;
27			background: #f6f6f6;
28		}
29		.basic > thead th {
30			background-color: #ea6153;
31			color: #ffffff;
32		}
33		.market > thead th {
34			background-color: #27ae60;
35			color: #ffffff;
36		}
37		.finance > thead th {
38			background-color: #2980b9;
39			color: #ffffff;
40		}
41		.finance > tbody th {
42			background-color: #2980b9;
43			color: #ffffff;
44		}
45	</style>
46</head>
47<body>
48	<table class="finance">
49		<thead>
50			<tr>
51				<th>&nbsp;</th>
52				<th>第10期</th>
53				<th>第11期</th>
54				<th>第12期</th>
55			</tr>
56		</thead>
57		<tbody>
58			<tr>
59				<th>営業収益</th>
60				<td>***</td>
61				<td>***</td>
62				<td>***</td>
63			</tr>
64			<tr>
65				<th>営業利益</th>
66				<td>***</td>
67				<td>***</td>
68				<td>***</td>
69			</tr>
70			<tr>
71				<th>経常利益</th>
72				<td>***</td>
73				<td>***</td>
74				<td>***</td>
75			</tr>
76			<tr>
77				<th>当期純利益</th>
78				<td>***</td>
79				<td>***</td>
80				<td>***</td>
81			</tr>
82		</tbody>
83	</table>
84</body>
85</html>

投稿2016/10/13 05:48

gzrita

総合スコア236

SugiuraY

2016/10/13 06:01

ご提示のstyle部分をコピーしたら確かにできたですがコードの差分を出すアプリケーションを使っても、まったく違いが分かりません。。一旦、適用できたことについて、御礼申しあげます。ただ、根本的な問題点はなぞです。。 correct .finance > tbody th { background-color: #2980b9; color: #ffffff; } errror .finance > tbody th { background-color: #2980b9; color: #ffffff; }

SugiuraY

2016/10/13 06:02

すみません、errorはこちらですね .finance > tbody th { background-color: #2980b9; color: #ffffff; }

行動規範の内容に同意します

ベストアンサー

Win7のfirefox、chrome、IE11ではちゃんと効いていますね…

投稿2016/10/13 05:37

gin

総合スコア2722

gin

2016/10/13 05:53

そういえば「.finance > tbody th」の「background-color: #2980b9;」は効いてるんですか？効いているなら「background-color: #2980b9;□」(□は全角スペース)とかなってたりしたらその下の「color」が効かなくなります。

SugiuraY

2016/10/13 06:04

ご回答有難うございます。ご指摘の点、問題ないようです。

gin

2016/10/13 06:09

結局「background-color」は効いているということですか？

SugiuraY

2016/10/13 06:14

background-color: #2980b9; は効いておりました。。。従って、問題はご指摘のとおりです。お力添え、有難うございます。宜しくお願い申し上げます。

行動規範の内容に同意します

tbodyの前に半角の空白があるのかと思いましたが、いかがでしょうか。
下記訂正コードを記します。

.finance > tbody th {
    background-color: #2980b9;
    color: #ffffff;
        }

投稿2016/10/13 05:42

holic

総合スコア134

SugiuraY

2016/10/13 06:03

ご回答有難うございます。上記の返信のとおり、解決はしたのですが、ご指摘のスペースも含めて差分はないように思われます。

行動規範の内容に同意します

.financeのところ、tbody th ではなくtbody tdでは？

投稿2016/10/13 05:28

NS-DOS

総合スコア110

SugiuraY

2016/10/13 05:31

ご回答有難うございます。いえ、thであっていると思います。 htmlの構造を加筆いたします。宜しくお願い申し上げます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

CSSの優先順位

関連した質問