如何制定更好的CSS ID规则

debugcn 发表于 Dev

特莱金

我正在学习html + css并有疑问，可以为多个ID编写规则，例如我必须达到的目标

<!-- language: lang-css-->

 #menu-item-207 .menu-image-title {
   color: black !important;
 }
 #menu-item-207 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-206 .menu-image-title {
   color: black !important;
 }
 #menu-item-206 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-205 .menu-image-title {
   color: black !important;
 }
 #menu-item-205 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-204 .menu-image-title {
   color: black !important;
 }
 #menu-item-204 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-203 .menu-image-title {
   color: black !important;
 }
 #menu-item-203 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-202 .menu-image-title {
   color: black !important;
 }
 #menu-item-202 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-201 .menu-image-title {
   color: black !important;
 }
 #menu-item-201 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-200 .menu-image-title {
   color: black !important;
 }

我该如何适应呢？先感谢您！

羚羊

您可以使用逗号来组合多个选择器：

 #menu-item-207 .menu-image-title,
 #menu-item-206 .menu-image-title,
 #menu-item-205 .menu-image-title,
 #menu-item-204 .menu-image-title,
 #menu-item-203 .menu-image-title,
 #menu-item-202 .menu-image-title,
 #menu-item-201 .menu-image-title,
 #menu-item-200 .menu-image-title {
    color: black !important; 
 }  
 #menu-item-207 .menu-image-title:hover,
 #menu-item-206 .menu-image-title:hover,
 #menu-item-205 .menu-image-title:hover,
 #menu-item-204 .menu-image-title:hover,
 #menu-item-203 .menu-image-title:hover,
 #menu-item-202 .menu-image-title:hover,
 #menu-item-201 .menu-image-title:hover,
 #menu-item-200 .menu-image-title:hover {
     color: #0095d1 !important; 
 }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。