无法将HTML文本源作为CSS进行编辑

我被困在一个简单的任务中，将HTML源代码中的文本作为CSS进行编辑。我希望有人能帮助我，我相信这有一个非常简单的答案。我遇到困难的原因是，当我试图查看我试图编辑的网页的.css文件时，代码中似乎忽略了所有文本元素，如文本标题等。我对CSS一无所知，所以我很挣扎

以下是HTML源代码：

登记入住 退房

---

我认为最好是显示和隐藏，而不是删除，正如您所看到的，我添加了类Shw，hdn

<label class='text-contrast Shw'>Check-in</label>
<label class='text-contrast Hdn'>Date Range</label>
            <input autocomplete='off' required type='text' id='cf-query-start_date' class=' date form-control' value='' data-alt='#alt_cf-query-start_date' data-datepicker=''/>
                <input type='hidden' name='start_date' id='alt_cf-query-start_date' class='alt_date' value='2016-11-04'>
        </div>
        <div class='input-placeholder-group form-group mobile-browser mobidates end_date '>
            <label class='text-contrast'>Check-out</label>

---

如果您只能从CSS级别编辑内容，而无法编辑HTML文件，那么唯一合理的方法是：

.text-contrast {
  display: none;
}
.text-contrast:after {
  content: 'Date range';
}

但是请记住，它将应用于所有文本对比度元素，因此，如果代码中有更多的对比度元素，那么可能需要以某种方式更改HTML。

假设缺少的start div如下所示，您可以这样做

div.start_date label，/*此规则删除签入/签出标签*/ div.end_日期标签{ 显示：无； } div.start_date:：在{/*之前此规则添加日期范围*/ 内容：“日期范围” } 编辑 登记入住 退房

---

隐藏签出文本很容易：

.end_date .text-contrast {
  display: none;
}

我们缺少包含第一个.text对比度元素的div，但可以根据第二个div的.end\u日期假设它具有class.start\u日期或类似的值。因此，这应该适用于更改显示的文本：

.start_date .text-contrast {
  display: block;
  position: relative;
  text-indent: -9999px;
}
.start_date .text-contrast::before {
  content: 'Date range';
  position: absolute;
  text-indent: 0;
}

---

我不知道你想做什么-编辑HTML源代码，因为CSS听起来不像是一项简单的任务，或者似乎意义不大。你能再详细一点吗？是什么阻止您编辑粘贴的HTML源代码？发布缺少的start div，让我们看看可以做什么。听起来您想用CSS更改HTML源代码，但这基本上是无法做到的。就我所知，有一些东西像CSS编辑器，但没有任何东西能满足你的要求。你说的CSS编辑器是什么意思？您指的是某个特定的软件吗？如果是的话，哪一个？我编辑了我原来的文章，把前面的div部分包括进去。JS不是一个选项是正确的——我唯一的选项是CSS覆盖。到目前为止，我只能用提供的答案隐藏“签入”或“签出”；我还没能成功地替换。或者我可以在“签入”后再次显示新文本，而不是替换。如果OP可以向标记中添加类，为什么他们不简单地更新标记呢？我们可以使用javascript或jquery更改HTMl，但是我不认为在html内容中使用Css进行编辑JS没有被标记为在文章中，因此它可能不是OP的可行选项。签入和签出都共享相同的Css选择器，因此您的psuedo元素不会出现。您需要更具体的选择器来防止这种情况。这会将“日期范围”放在“签入”之前，而不会替换。它也不会隐藏“签出”。谢谢你的回复@温特弗罗斯特：当然行了，看看你在《失踪的html》中的最后一集吧posted@winterfrost用您添加到问题中的代码更新了我的答案对不起，我不明白。我对这一点在陡峭的学习曲线上是完全陌生的：-/@winterfrost您有两个div，一个是名为start_date的类，另一个是名为end_date的类，因此通过使用这些类，您不能取出签入/签出标签，然后使用pseudo:：beforeI使用它隐藏“签出”之前添加日期范围，但你其余的建议都不管用代码“.end_date.text对比度{位置：相对；文本缩进：-9999px；}哇。开始日期。文本对比度也需要显示：块；或显示：内联块，具体取决于页面布局，以便文本缩进属性发挥作用。我不确定是否理解您的意思。这将“日期范围”置于“签入”之上。我尝试了以下操作：。开始日期。文本对比度显示：块{position:relative；文本缩进：-999px；}。开始日期。文本对比度：：在{content:'date range'；位置：绝对；文本缩进：0；}之前使用此选项可隐藏“签入”和“签出”，但仍然无法在不缩进/隐藏的情况下替换“签入”。答案的第二部分没有帮助：。结束日期。文本对比度{position:relative；文本缩进：-9999px；}。开始日期。文本对比度{position:relative；文本缩进：-9999px；}编辑我的原始答案以向您显示显示位置：块；我本来打算去的。如果文本框与标签齐平，请将块更改为内联块。