Question

这两行在一个段落中。作业标题为粗体，字体为Arial。颜色是＃B22222。该公司是斜体，Arial Narrow，颜色是＃00008B。

我不知道如何将3个类选择器放在一个段落中。

<!DOCTYPE html>
<head>

    <title>Job Vacancy</title>
</head>

    <style type="text/css">
        .h1 {
            color:#ffffff;
            background-color:#20B2AA;
            text-align:center;
            }

        .p{
            font-type:arial;
            color:#B22222;
            weight:bold;
            }

        p.p{
            weight:italic;
            font-type:arial narrow;
            color:#00008B;
            }

        pp.p{
            color:#000000;
            font-type:arial narrow;
            }
    </style>
<body>

    <h1 class="h1">JOBS DATABASE</h1>
    <h2><u>Job Listings</h2></u>
    <p class="p">PHP Programmer<br/>OrangePro Solutions Sdn.Bhd.-- Midvalley, Kuala Lumpur</p> <!--should I put another class="p.p" in between <br/> and OrangePro?>

</body>
</html>

Answer 1

我通常会在这种情况下使用跨度。

 <p class="p"><span class="job_title">PHP Programmer</span>
 <br/>OrangePro Solutions Sdn.Bhd.-- Midvalley, Kuala Lumpur</p>

CSS

 span.job_title {
    color: orange; //or whatever
 }

但是既然你有一个换行符，你可以分成两个不同类别的段落。

 <p class="job_title">PHP Programmer</p>
 <p class="company_name">OrangePro Solutions Sdn.Bhd.-- Midvalley, Kuala Lumpur</p>

CSS：

 p.job_title {
   font-weight: bold; //etc..
 }

 p.company_name {
   color: #B22222;
 }

Answer 2

为每行使用class

<h1 class="h1">JOBS DATABASE</h1>
    <h2><u>Job Listings</h2></u>
    <p class="p"><div class="div1">PHP Programmer</div><div class="div2">OrangePro Solutions Sdn.Bhd.-- Midvalley, Kuala Lumpur<div></p> <!--should I put another class="p.p" in between <br/> and OrangePro?>




.p{
            font-type:arial;
            color:#B22222;
            weight:bold;
            }

        div1{
            weight:italic;
            font-type:arial narrow;
            color:#00008B;
            }

        div2{
            color:#000000;
            font-type:arial narrow;
            }

Answer 3

假设发布是动态提供的（例如来自数据库），一种方法是将您的项目安排到每个帖子的特定内容部分，例如：

<div class='posting'>
    <h1>PHP Programmer</h1>
    <h2>OrangePro Solutions Sdn.Bhd.--</h2>
    Job info.....    
</div>

然后，您可以将目标CSS应用于posting类。请注意，这也会将正确的元素用于其目的 - 页面上的内容分隔中包含两个标题。

示例 FIDDLE

Answer 4

首先，您需要了解您正在使用的选择器：

.p ----选择class =“p”
的所有元素
p.p ---用class =“p”
选择所有p（段落元素）
pp.p ---选择所有带有class =“p”的“pp”标签。 这是无效的，因为不存在任何像这样的标记。

这里你需要的是span使用不同类别的职位来使用职称：

<p class="p">
  <span class="title">PHP Programmer</span><br/>
  OrangePro Solutions Sdn.Bhd.-- Midvalley, Kuala Lumpur
</p>

CSS看起来像这样：

p.p {
 font-style:italic;
 color:#00008B;
}

p.p .title{
  color:#B22222;
  font-weight:bold;
  font-style:normal;
}

演示 http://jsfiddle.net/LS8nK/

如何使用内部样式表将2类选择器放在单个段落中

4 个答案: