[UNITY二三事_002] UIToolkit--USS总结笔记

USS用法列表总结

Unity文档-USS 选择器

/*C# type选择器:按钮元素*/
Button {
    border-radius: 33px;
    width: 100px;
}

/*Pseudo-Class(伪类) ":hover"*/
Button:hover {
    border-radius: 11px;
    width: 100px;
}

/*根伪类*/
:root {
    height: 300px;
}

/*name选择器:名为"Cancel"的元素*/
#Cancel {
    width: 190px;
    border-width: 2px;
    border-color: DarkRed;
    background-color: LightGreen;
}

/*class选择器:添加了此class的元素*/
.ClassName{
    background-color: yellow;
    height: 55px;
}

/*通用选择器*/
*{
    background-color: lightblue;
}

/*Descendant(后代)选择器(中间有个空格!):第一个选择器的结果,第二个选择器匹配其所有后代元素*/
#descendant1 .descendant2 {
    background-color: yellow;
}

/*Child选择器:第一个选择器的结果,第二个选择器只匹配其直接子节点元素*/
#child1 > .child2 {
    background-color: yellow;
}

/*Multiple选择器:选择满足所有选择器的元素*/
.multiple1.multiple2 {
    background-color: yellow;
}

USS写法规范总结

Unity文档-BEM编写规范

BEM命名规则, <块名称> _ _ <元素名称> - - <修饰符>(注意横线数量):

• 块名称：块是有意义的独立实体或控件。例如，menu、button、list-view
• 元素名称：块的一部分，没有独立含义，并且在语义上与其块相关。元素名称用两个下划线追加到块名称之后。例如，menu__item、button__icon 或 list-view__item
• 修饰符：一个可更改块或元素外观或行为的标记。修饰符用两个短划线追加到块或元素名称之后。例如，menu–disabled、menu__item–disabled、button–small 或 list-view__item–selected。