html 中不显示块引用和背景

Question

我正在尝试创建 HTML 的代码片段，如下所示：

我写了一些代码，但背景、斜体和左侧引号显示不正确。这是我尝试过的：

mission blockquote.style1 {
    font: 14px/20px italic;
    padding: 8px;
    background-color: #000000;
    border-top: 1px solid #e1cc89;
    border-bottom: 1px solid #e1cc89;
    margin: 5px;
    background-image: url(../images/openquote1.gif);
    background-position: top left;
    background-repeat: no-repeat;
    text-indent: 23px;
}

.mission blockquote.style1 span {
    display: block;
    background-image: url(images/openquote1.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
}

<div class=""mission>
    <h2>Mission</h2>
    <hr>
    <blockquote>
        <p class="style1">
            <span>Our mission is to grow with our customers by providing quality products,timely delievery & personalised services</span>
        </p>
    </blockquote>
</div>

Answer 1

现在不习惯这个

.mission blockquote.style1 span

根据你html习惯的

.mission blockquote .style1 span

.class-1.class-2 表示 <div class="class-1 class-2"></div>

.class-1 .class-2 表示 <div class="class-1"> <div class=".class2"></div>

============================================= =

.mission blockquote .style1 {
  font: 14px/20px italic;
  padding: 8px;
  background-color: #eee;
  border-top: 1px solid #e1cc89;
  border-bottom: 1px solid #e1cc89;
  margin: 5px;
  background-image: url(../images/openquote1.gif);
  background-position: top left;
  background-repeat: no-repeat;
  text-indent: 23px;
  }
.mission blockquote.style1 span {
     display: block;
     background-image: url(images/openquote1.gif);
     background-repeat: no-repeat;
     background-position: bottom right;
   }

<div class="mission">
<h2>Mission</h2>
<hr>
<blockquote><p class="style1"><span>Our mission is to grow with our customers by providing quality products,timely delievery & personalised services</span></p></blockquote>
</div>

Answer 2

为 css 规则添加适当的 space。

.mission blockquote .style1 {
  font: 14px/20px italic;
  padding: 8px;
//  background-color: #000000;
  border-top: 1px solid #e1cc89;
  border-bottom: 1px solid #e1cc89;
  margin: 5px;
  background-image: url(../images/openquote1.gif);
  background-position: top left;
  background-repeat: no-repeat;
  text-indent: 23px;
  }
.mission blockquote .style1 span {
     display: block;
     background-image: url(images/openquote1.gif);
     background-repeat: no-repeat;
     background-position: bottom right;
   }

<div class="mission">
<h2>Mission</h2>
<hr>
<blockquote><p class="style1"><span>Our mission is to grow with our customers by providing quality products,timely delievery & personalised services</span></p></blockquote>
</div>

Answer 3

如果您不在 blockquote 标签中使用 .style1 class，则需要在 .mission blockquote.style1 之间提供 space，如下所示： Demo

.mission blockquote .style1 {..}
.mission blockquote .style1 span {..}

否则像这样更改您的 HTML 结构：

 <blockquote class="style1">        
    <span>Our mission is to grow with our customers by providing quality products,timely delievery & personalised services</span>      
    </blockquote>

Answer 4

CSS 有规则和标准，如果你不遵守它们，你就不能指望 "magic" 会发生。

你没有：

遵循正确的选择器规则（mission blockquote.style1 与 .mission blockquote .style1 不同）
遵循正确的 font 属性规则（必须有字体系列，必须以正确的顺序排列）
使用正确的 html 结构（class=""mission 就是错误的）

最重要的是：

如果您需要引号，您需要将它们放在 HTML
如果您设置全黑背景，您将看不到任何东西

长话短说：花点时间编写正确的代码。

.mission blockquote .style1 {
  font: italic 14px/20px serif;
  padding: 8px;
/*      background-color: #000000;*/
  border-top: 1px solid #e1cc89;
  border-bottom: 1px solid #e1cc89;
  margin: 5px;
/*      background-image: url(../images/openquote1.gif);*/
  background-position: top left;
  background-repeat: no-repeat;
  text-indent: 23px;
  }
.mission blockquote .style1 span {
     display: block;
/*         background-image: url(images/openquote1.gif);*/
     background-repeat: no-repeat;
     background-position: bottom right;
   }

<div class="mission">
<h2>Mission</h2>
<hr>
<blockquote><p class="style1"><span>Our mission is to grow with our customers by providing quality products,timely delievery & personalised services</span></p></blockquote>
</div>

html 中不显示块引用和背景

Not displaying blockquote and background in html

html

css

blockquote

============================================= =