Immediate Child selector in LESS

问题

Is there anyway to have LESS apply the immediate child selector ( > ) in its output?

In my style.less, I want to write something like:

.panel {
    ...
    > .control {
        ...
    }
}

and have LESS generate something like:

.panel > .control { ... }

回答1:

UPDATE

Actually, the code in the original question works fine. You can just stick with the > child selector.

---

Found the answer.

.panel {
    ...
    >.control {
        ...
    }
}

Note the lack of space between ">" and ".", otherwise it won't work.

回答2:

The official way:

.panel {
  & > .control {
    ...
  }
}

& always refers to the current selector.

See http://lesscss.org/features/#features-overview-feature-nested-rules

回答3:

The correct syntax would be following while using '&' would be redundant here.

.panel{
   > .control{
   }
}

According to less guidelines, '&' is used to parameterize ancestors (but there is no such need here). In this less example, &:hover is essential over :hover otherwise it would result in syntactic error. However, there is no such syntactic requirement for using '&' here. Otherwise all nestings would require '&' as they are essentially referring to parent.

回答4:

Also, If you are targeting the first child element, such as the first <td> of a <tr>, you could use something like this:

tr {
    & > td:first-child {font-weight:bold;}
}

this helps reduce class declarations when they aren't needed.

来源：https://stackoverflow.com/questions/8110286/immediate-child-selector-in-less