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

这两行在一个段落中。职位名称为粗体，字体为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>

在这种情况下，我通常使用span。

 <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;
 }

假设帖子是动态馈送的（例如，从数据库），这样做的一种方法是将您的项目排列到每个帖子的特定内容部分，例如：

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

然后，您可以将目标CSS应用于posting类。请注意，这也使用了正确的元素来实现它们的目的——两个标题包含在页面上内容的隔离分区中。

样本FIDDLE

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

.p----选择class＝"的所有元素；p〃；

p.p——选择class＝"的所有p（段落元素）；p〃；

pp.p---全选；pp〃；具有class＝"的标签；p"这是无效的，因为不存在任何类似的标签。

这里你需要的是使用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/

每行使用类

<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;
            }

相关内容

最新更新

热门标签：