親テーマstyle.cssの一部をリセットしたい

Question

テーマ「twentyseventeen」の子テーマを作成しています。
functions.phpに親・子テーマのstyle.cssも読み込むように設定し、
親テーマのstyle.css→子テーマのstyle.css→外部のcss（header.phpにて読み込み）
を読み込んでいます。

変更したい箇所を子テーマのstyle.cssに書き込み、その他のカスタムを外部cssに記載しているのですが、
カスタムする際にh1などのmarginなどを一度リセットしたいのですが、
子テーマにてどのように記載すればリセットされますでしょうか？
該当部分を「initial」に変更するとリセットされるかと思い記載しているのですが、
その後に外部cssで設定したstyleが反映されなくなります。

下記の場合だと、h3のpaddingが0になっています。

↓
1.子テーマ style.css（/**/内は、親テーマstyle.css）
2.反映したいHTML
3.外部css

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
	padding-top: initial;/*親テーマ 0*/
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	line-height: 1.4;
	margin: initial;/*親テーマ 0 0 0.75em*/
	padding: initial;/*親テーマ 1.5em 0 0*/
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
	padding-top: initial;/*親テーマ 1em*/
}

<div class="music_block">
<div class="brand_img">
<a href="/URL/"><img src="/images/brand_img01.jpg" /></a></div>
<div class="brand_info">
<h3 class="brand_name"><a href="/URL/">●●●</a></h3>
■■■■<br />
■■■■
</div>
</div>

.music_block{
    padding: 0.5em 2em;
    margin: 2em 0.75em;
    color: #5d627b;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.brand_info{
	display:block;
	vertical-align:top;
	float:right;
	width:76%;
	padding:7px;
	text-align:left;
}
.brand_img{
	float:left;
	width:20%;
}
h3.brand_name{
    	position:relative;
    	padding-top:9px 15px;
    	font-weight: bold;
    	font-size: 18px;
    	background-color: #51A2C1;
    	color: #fff;
    	border-radius:3px;
    	-webkit-border-radius:3px;
    	-moz-border-radius:3px;
    }
     
h3.brand_name:before{
    	content:''; 
    	height:25px; 
    	width:2px; 
    	display:block; 
    	position:absolute; 
    	top:5px; 
    	left:4px; 
    	background-color:#fff;
    	border-left: 4px solid #fff;
    	border-radius:3px;
    	-webkit-border-radius:3px;
    	-moz-border-radius:3px;
    }
h3.brand_name a{
	color: #fff;
}

外部cssの記載が間違っているのでしょうか？

他の方の参考サイトも拝見しながら理解しようとはしているのですが、
作業していて親テーマのstyle.cssが引っかかることがちょくちょくあり、
それであれば子テーマstyle.cssに全てコピーして修正してしまい、
親テーマstyle.cssを読み込まないようにすれば楽だろうな……と思ってしまいますね泣

リセットの方法が間違っているのか、外部css表記がそもそも間違っているのか、
ご確認頂けますようお願い致します。

Answer 1

「initial」に対応していないブラウザがあります。

【Can I use... Support tables for HTML5, CSS3, etc】
http://caniuse.com/#feat=css-initial-value

また、「initial」は「初期値」であり、「リセット」とは厳密には違います。（初期値はブラウザによって違う可能性もあります）

デベロッパーツールで地道に親テーマの値を勘案しながら上書きするのが良いと思います。

【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回 詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2
smart-phone

Comments

[koro703]

お返事いただきまして、ありがとうございます。

リセットでは無かったんですね！
親テーマの上書きをしていこうと思うのですが、
例えば下記のような場合はどうするのが適切なのでしょうか？

●親要素
h1:first-child{
padding-top: 0;
}

●上書き要素「h1 class="sample-title"」
h1.sample-title:first-child{
padding-top: 1em;
}　　
h1.sample-title{
padding-top: 1em;
}　　

こういう感じになりますでしょうか？

[kei344]

CSSの読み込みが出来ているのであればその書き方でも良いと思います。

[koro703]

ありがとうございます。
その方法でやっていきたいと思います。