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

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”的所有元素

pp ---用class =“p”选择所有p（段落元素）

pp.p ---选择所有带有class =“p”的“pp”标签。 这是无效的，因为没有这样的标签 。

你需要的是在不同类的跨度中使用span wrapp作业标题：

<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 个解决方案

解决方案1
2 2013-11-25 15:33:08

解决方案2
0 2013-11-25 15:35:20

解决方案3
0 2013-11-25 15:35:30

解决方案4
0 2013-11-25 15:37:24

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

问题描述

4 个解决方案

解决方案1 2 2013-11-25 15:33:08

解决方案2 0 2013-11-25 15:35:20

解决方案3 0 2013-11-25 15:35:30

解决方案4 0 2013-11-25 15:37:24

解决方案1
2 2013-11-25 15:33:08

解决方案2
0 2013-11-25 15:35:20

解决方案3
0 2013-11-25 15:35:30

解决方案4
0 2013-11-25 15:37:24