Day5~6 类选择器的派生选择器不work

2019-10-14  本文已影响0人  反复练习的阿离很笨吧

做day5~6的作业时,第一个小作业中想将前两个板块的元素改成行内的:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>うまるちゃん</title>
    <link rel="stylesheet" type="text/css" href="css/style_1.css" />
</head>
<body>
    <div>
        <h1>うまるちゃん</h1>
    </div>
    <div>
        <h2>設定</h2>
        <h3 class="inline">お名前</h3>
        <p class="inline">土間 埋 (どま うまる)</p>
        <h3 class="inline">化名</h3>
        <p class="inline">U.M.R</p>     
        <h3 class="inline">住所</h3>
        <p class="inline">タイヘイとアパート『コーポ吉田』の201号室</p>
    </div>
    <div>
        <h2>経験</h2>
        <h3 class="inline">学校</h3>
        <p class="inline">名門・荒矢田(あらやだ)高校</p>
    </div>
    <div>
        <h2>個人情報</h2>
        <h3>好きな食べ物</h3>
        <li>コーラ</li>
        <li>お菓子</li>
        <li>唐辛子</li>
        <h3>ペット</h3>
        <p>ハム次郎、哈姆三郎</p>
    </div>
    <div>
        <h2>登場人物</h2>
        <h3>兄</h3>
        <p>土間 大平(どま たいへい)</p>
        <h3>友人</h3>
        <li>海老名 菜々(えびな なな)</li>
        <li>橘・シルフィンフォード(たちばな・シルフィンフォード)</li>
        <li>本場 切絵(もとば きりえ)</li> 
    </div>
    </html>

就这样,我给display需要变成inline的标签带上了class,本来,简简单单,写个类选择器就好了,但是,我写选择器的时候画蛇添足,类选择器+派生选择器,然后就毫无作用:

body {
    font-family: sans-serif;
}
p, h3, li { 
    font-size: 14px;
}
.inline p { 
    display: inline;
}
.inline h3 {    
    display: inline;
}

具体我没想出来为啥,但是只写成类选择器就work了:

body {
    font-family: sans-serif;
}
p, h3, li { 
    font-size: 14px;
}
.inline {   
    display: inline;
}

CSS学习笔记:inline和inline-block的区别
inline和inline-block的区别
px-em-rem-different
设置行距

上一篇下一篇

猜你喜欢

热点阅读