如何用.CSS隐藏文本？

Question

如何用.CSS隐藏文本？

这是我们的代码。

<footer>    
      <p>Our Company, OFFICE: 555-1212</p>
      <div class="footer_License"><span>License #:</span> RB-21781</div> 
                          <p><a href="https://www.example.com/terms-of-service" target="_blank">Terms</a>
<a href="http://www.HideThis.com/real_estate_agents_sales_representatives.html#leads" target="_blank">Leads</a> by
<a href="http://www.sample.com/" target="_blank">HideThis<span id="hide-logo"><img src="/modules/free_home_valuation/images/Logo.png" alt="HideThis" /></span></a></p>
</footer>

我们想隐藏所有的东西，除了：

我们公司，办公室: 555-1212

许可证编号:RB-25555服务条款隐私政策

有什么建议吗？

Answer 1

最简单的方法是为您希望隐藏的元素分配一个类。

因为有多个元素和一些不在容器中的文本(比如a标记)，所以我包装了您希望隐藏在跨度中的元素，并在该跨度上添加了一个类(我称之为hideme)。

如果您希望删除hide类并显示信息，我添加了一个按钮和一些javascript代码来展示这是多么容易做到。

​

//Look closely - this is not jQuery
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
$('#showme').addEventListener('click', (e) => {
   const allHidden = $$('.hideme');
   allHidden.forEach((el) => {
      el.classList.remove('hideme');
   });
   console.log(e.target.innerText);
   
});

.hideme{display: none;}

<footer>
    <p>Our Company, OFFICE: 555-1212</p>
    <div class="footer_License">
        <span>License #:</span> RB-21781
    </div> 
    <p>
        <a href="https://www.example.com/terms-of-service" target="_blank">Terms of Service </a> &#124; 
        <a href="https://www.example.com/privacy-policy" target="_blank">Privacy Policy</a> &#124; 
        <span class="hideme">
            <a href="http://www.HideThis.com" target="_blank">Leads</a> by 
            <a href="http://www.sample.com/" target="_blank"> HideThis
                <span id="hide-logo"><img src="Logo.png" alt="HideThis" /></span>
            </a>
        </span>
    </p>
</footer>
<button id="showme">Show Me</button>

​

注意：

记住，超文本标记语言是围绕box model设计的，这意味着整个网页是一个包含其他框的框(容器)，这些框又包含其他框。所有东西要么是内容(文本/图像)，要么是容器，或者在容器中。您的工作是设计其中的内容，以便您可以在页面上最好地排列/显示它，或者根据需要显示/隐藏它。

Answer 2

您可以使用以下代码：

<style>
footer > p:first-child {
  display: none;
}
.footer_License {
  display: none;
}
footer > p > a:first-child
 {     
    display: none;
 }
</style>

在这里，first-child属性用于选择任何html元素的第一个元素cild，而>用于继续子元素，或者应该说选择标记的子元素。

Answer 3

footer > p:nth-of-type(2) > :not(:nth-child(-n + 2)) {
    display: none;
    /* visibility:hidden; */
}

这将隐藏第二段中除第一个和第二个子元素之外的任何元素。

根据“隐藏”的意思，选择“显示”或“可见性”。

​

footer > p:nth-of-type(2) > :not(:nth-child(-n + 2)) {
display:none;
}

<footer>    
      <p>Our Company, OFFICE: 555-1212</p>
      <div class="footer_License"><span>License #:</span> RB-21781</div> 
                          <p><a href="https://www.example.com/terms-of-service" target="_blank">Terms</a>
<a href="http://www.HideThis.com/real_estate_agents_sales_representatives.html#leads" target="_blank">Leads</a> by
<a href="http://www.sample.com/" target="_blank">HideThis<span id="hide-logo"><img src="/modules/free_home_valuation/images/Logo.png" alt="HideThis" /></span></a></p>
</footer>

​