CSS選擇器（class/ID/後代/群組）
class選擇器
html
<body>
<div class="primary-box">
<h2>Primary Box</h2>
<p>Some text <em>in the box</em>.</p>
</div>
<div class="secondary-box">
<h2>Secondary Box</h2>
<p>Some text <em>in the box</em>.</p>
</div>
css
.primary-box{ }
.secondary-box{ }
ID選擇器
html
<div id="monkey">
<p>I am. a monkey.</p>
</div>
CSS
#monkey{ }
後代選擇器
CSS
.primary-box em {
font-style: italic;
color: #6fd6f5;
}
html
<body>
<div class="primary-box">
<h2>Primary Box</h2>
<p>Some text <em>in the box</em>.</p>
</div>
<div class="secondary-box">
<h2>Secondary Box</h2>
<p>Some text <em>in the box</em>.</p>
</div>
css
.primary-box{ }
.secondary-box{ }
ID選擇器
html
<div id="monkey">
<p>I am. a monkey.</p>
</div>
CSS
#monkey{ }
後代選擇器
CSS
.primary-box em {
font-style: italic;
color: #6fd6f5;
}
群組選擇器
CSS
.inner-box h3,.inner-box p{
font-size: 24px;
color: #b2acac;}
留言
張貼留言