嵌套的CSS樣式？

Question

這樣的事情可能嗎？

.imgbox:hover{ .ui-resizable-se { /*some style */ } }

還是概念上的等效？ 基本上，只有當某一類的元素上空盤旋，然后這個類中的一些元素應該改變一些風格。

Answer 1

你可以這樣做：

.imgbox:hover .ui-resizable-se { /*some style */ }

LESS或SASS可以生成相同的內容。

Answer 2

當然可以是：

.imgbox:hover .ui-resizable-se { /*some style */ } 

Answer 3

不，CSS不允許嵌套。 您必須這樣寫：

.imgbox:hover .ui-resizable-se { /*some style */ }

但是，有許多可用的CSS預處理器可以在有效的CSS中轉換類似的內容。 最受歡迎的是LESS和SASS / SCSS 。

Answer 4

不是使用普通CSS，而是可以使用Sass這樣的CSS預處理器：

http://sass-lang.com/

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

產生：

/* CSS */

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}