如何使用內部樣式表將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