调整浏览器大小时如何在DIV中隐藏一部分HTML文本?使用CSS)

Question

随着浏览器的缩小 - 即在iPad/手机等上，我想隐藏特定的文本。我知道我可以使用媒体查询来完全隐藏"文本栏"，但是如果我想删除例如"我们的利润帮助支持英国慈善机构"，当有人在手机上使用 iPad 或多段文本时，该怎么办？下面是 HTML 和 CSS

.HTML

<div class="topnav">
<a class="active" href="#home">Why Buy From Us?></a>
<a href="#news">Free Shipping On Orders Over £100</a> 
<a href="#contact">Our Profits Help Support UK Charities</a>
<a href="#about">A True Customer Focused Experience</a>
</div>

.CSS

.topnav {
background-color: #333;
overflow: hidden;
margin: auto;
text-align: center; 
}
.topnav a {
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 100%;
margin: auto;
}

媒体查询

@media only screen and (max-width: 1226px) {
.topnav {
display: none !important;
}
}
@media only screen and (max-width: 1226px) {
.topnav a {
display: none !important;
}
}

Answer 1

您可以使用元素的属性来定位元素以应用样式。

https://www.w3schools.com/css/css_attribute_selectors.asp

为了回答您的问题，我认为您可以在适用于iPad的css中执行以下操作：

a[href="#contact"] {
display: none
}