在一个div中分组css标签 [英] Group css tags within a single div

问题描述

对于同一个div中的不同标签，我有一堆不同的CSS编辑，并想知道是否有方法将它们分组在一个div下？这是我现在所拥有的：

  #nav {
 margin：8px auto 0px auto; 
 border：1px纯黑色; 
 border-radius：5px; 
 box-shadow：3px 3px rgba（0,0,0,0,0.4）; 
} 
 
 #nav li {
 display：inline; 
 padding：10px; 
} 
 
 #nav ul {
 list-style-type：none; 
 padding：0px; 
 margin：10px 5px auto 5px; 
 height：20px; 
 line-height：10px 
} 
 
 #nav a {
 text-decoration：none; 
} 
  

我试图将它们放在单个#nav的大括号内，但它确实如果我正确地解释你的问题，这个快捷方式在纯CSS中是不可能的。

您可能需要查看SASS或LESS，它们是CSS的元语言，这意味着有效的CSS是有效SASS / LESS的子集。这两个支持结构

  #nav {
 thing：example; 
 .child {more：styles; } 
 .extra {style：great; } 
} 
  

这会被解释为CSS

  #nav {
 thing：example; } 
 
 #nav .child {more：styles;} 
 
 #nav .extra {style：great;} 
  

I have a bunch of different CSS edits for different tags within the same div and want to know if there is a way to group them under one div? This is what I have right now:

#nav{
    margin: 8px auto 0px auto;
    border: 1px solid black;
    border-radius: 5px;
    box-shadow: 3px 3px rgba(0,0,0,0,0.4);
}

#nav li{
    display: inline;
    padding: 10px;  
}

#nav ul{
    list-style-type: none;
    padding: 0px;
    margin: 10px 5px auto 5px;
    height: 20px;
    line-height: 10px
}

#nav a{
    text-decoration: none;
}

I tried putting them within the braces of a single #nav, but it did not work.

解决方案

If I interpret your question correctly, that shortcut is impossible in pure CSS. You may want to look into SASS or LESS, which are metalanguages of CSS, meaning that valid CSS is a subset of valid SASS/LESS. Both of these support constructs where

#nav{ 
    thing: example; 
    .child { more: styles; }
    .extra { style: great; } 
}

which would be interpreted into CSS as

#nav {
    thing: example; }

#nav .child { more: styles;}

#nav .extra { style: great;}

这篇关于在一个div中分组css标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！