css 选择器表达式的计算顺序是怎样的

Question

请原谅我使用“css选择器表达式”这个词，因为我也不知道这个应该怎么称呼。
我想达到下面的效果不知道仅凭css选择器能不能实现

(.a+ div)>em {
    color :#ffffff;
}

文字描述就是class="a"后面的兄弟div元素内部的em子元素。
总之超过3个部件的css表达式写起来总是迷糊，不知道有没有类似与各类表达式中的“运算符优先级”这种东西，还是单纯的只能从左到右这种的。

有前辈对使用场景提出了质疑，其实是这样的

原本就是三个input由插件自动生成的开关。现在是f的文字颜色不太合适。

另外我提问的核心还是想题目所描述的，询问这个（类似）表达式是否有运算顺序，单讲这个活本身其实是无所谓的，告诉“改不了”也不是不行。所以希望从解决问题，而不是绕过问题来讨论。

Answer 1

div直接给个class不好吗...em直接给个class也不好吗...

---

单条css语句解析是从右向左的。

(.a+ div)>em {
    color :#ffffff;
}

可以理解为：
1、找到所有 em
2、找到所有 em 中 em的父元素是(.a+div)的 em

而css选择器有不同的权重划分。
权重：important > id > class/伪类/属性 > 元素/伪元素 > 通配符

相同目标 可以有多条css语句表示，每条css语句的权重是语句中所有选择器权重之和，权重越大优先级越高，如果权重相等后者会覆盖前者。

<p class="red">class权重高。我的颜色是粉色不是红色<p>

p {
   color: red;
}
.red {
   color: pink;
}

可以依靠多条css语句的不同权重来表现样式。

Answer 2

首先感谢大佬回答，原来解析顺序是从右到左。
我又重新看了下代码，其实加了括号反而会不识别，之前没加括号时，之所以不好使，是因为用了important。
我这也加个important 就好了。
所以下面这种其实就可以了

.a+ div>em {
    color :#ffffff;
}