Question

是否可以在html元素上使用多个类来仅显示一个类并使用css隐藏其他类？

在实践中，我有一个wp网站，必须根据区域设置（fr / en），屏幕尺寸和dpi显示不同的徽标。

这是我的HTML

<div id='site-logo' class='logo'>
<img class='logo-fr logo-desktop logo-hidpi' src='http://path/logo_fr-2x.png'>
<img class='logo-fr logo-mobile logo-hidpi' src='http://path/logo_fr_mobile-2x.png'>
<img class='logo-en logo-desktop logo-hidpi' src='http://path/logo_en-2x.png'>
<img class='logo-en logo-mobile logo-hidpi' src='http://path/logo_en_mobile-2x.png'>
<img class='logo-fr logo-desktop logo-lodpi' src='http://path/logo_fr.png'>
<img class='logo-fr logo-mobile logo-lodpi' src='http://path/logo_fr_mobile.png'>
<img class='logo-en logo-desktop logo-lodpi' src='http://path/logo_en.png'>
<img class='logo-en logo-mobile logo-dpi' src='http://path/logo_en_mobile.png'>

这是相关的css：

/*Scalable logos*/
#site-logo {
  display: flex;
  max-width: 331px;
  max-height: 235px;
  margin-top: 20% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#site-logo img{
  display: block;
  z-index: 2;
  max-height: 100%;
  max-width: 100%;
}

/*Logo FR*/
:lang(fr) > .logo-en img{
  display: none;
}

/*Logo EN*/
:lang(en) > .logo-fr img{
  display: none;
}

/* Hide lo-dpi logos for Hi-dpi screens*/
@media  only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi){
  .logo-lodpi img{
    display: none;
  }
}

/* Hide hi-dpi logos for Lo-dpi screens*/
@media  only screen and (-webkit-max-device-pixel-ratio: 1.3),
only screen and (-o-max-device-pixel-ratio: 13/10),
only screen and (max-resolution: 120dpi){
  .logo-hidpi img{
    display: none;
  }
}

/* Hide desktop logos for small screens (mobile etc...)*/
@media (max-width:768px) {
  .logo-desktop img{
    display: none;
  }
}

/* Hide mobile logos for large screens (desktop)*/
@media (min-width:769px) {
  .logo-mobile img{
    display: none;
  }
}

...在webkit浏览器上没有显示任何徽标，在firefox上没有显示8。

我更喜欢一个纯粹的css解决方案，因为我正在为这个项目学习css（在尝试用css更改img的content之后，我使用了“交叉”类）适用于webkit而不是firefox）并使用background作为site-logo::after伪元素（但它不会弯曲）。

如果你想到一个更简单的解决方案，我肯定会使用它，但我很好奇是否可以这样做...

如何使用多个类隐藏所有元素，但仅使用css

0 个答案: