Css div 和 h1 h2

Question

我试图让 3 个内容框全部内联，其中包含 h1 和 h2 标签。

我已经对这些框进行了排序，但似乎在设置 h1 和 h2 标签的样式时遇到了问题。他们只是不会风格。不确定 h1 和 h2

上的速记 css 是否正确

这是我的 CSS:

#day1, #day2, #day3 {width: 230px; height: 100px; margin-bottom:15px; background:#fff; word-wrap: break-word; display:inline-block; position:relative;}
#day1 {float: left;}
#day2 {margin-left: 15px; float: left;}
#day3 {float: right;}
#day1, #day2, #day3 h1 { font-size:18px; font-weight:200; color:#4778DE; padding:0 5px;}
#day1, #day2, #day3 h2 { font-size:12px; font-weight:200; color:#4778DE; padding:0 5px;}

#daybutton {position: absolute; display:inline-block; bottom:0; margin-left: 130px; margin-bottom:5px;}
#daybutton p { font-size:12px; color:#4d4d4d;}
#daybutton p a { font-size:14px; color:#4778DE; text-decoration:none;}
#daybutton p a:hover {color:#88B828; text-decoration:none;}

和 html:

<div id="day1">
<h1>Name Here</h1>
<h2>Job Title Here</h2>
<div id="daybutton">
<p><a href="#">Read more &gt;</a> </p>
</div>
</div>
<div id="day2">
<h1>Name Here</h1>
<h2>Job Title Here</h2>
<div id="daybutton">
<p><a href="#">Read more &gt;</a> </p>
</div>
</div>
<div id="day3">
<h1>Name Here</h1>
<h2>Job Title Here</h2>
<div id="daybutton">
<p><a href="#">Read more &gt;</a> </p>
</div>
</div>

Answer 1

您的选择器需要稍微调整一下。试试这个来替换第 5 + 6 行:

#day1 h1, #day2 h1, #day3 h1 { font-size:18px; font-weight:200; color:#4778DE; padding:0 5px;}
#day1 h2, #day2 h2, #day3 h2 { font-size:12px; font-weight:200; color:#4778DE; padding:0 5px;}