更新（2017年4月）

Question

我正在研究一个概念验证 - 一个用javascript编写的模块，它扩展了传统CSS的功能。

我对目前为止所做的事情感到满意（虽然还有很多工作要做），而且我已经达到了一个合适的阶段，我需要回顾并仔细检查一下并没有错过任何想法 - 显而易见的。

请查看下面的样式标记。左侧的两个示例使用传统CSS进行样式设置。右边的两个示例使用我编写的模块进行样式化 - 我称之为 ACSSSS （增强型CSS选择器语法）或 ax 短。

问题：是否可以单独使用传统的CSS实现右侧两个示例的演示？（如果是这样，怎么样？）

更新（2017年4月）

我第一次发布此问题后两个月，@Ferrybig在下面的评论中指出，在任何StackSnippet中，我需要通过{链接到外部 ax 脚本{1}}连接。全部固定！您现在可以打开下面的代码段，查看所有 ax 选择器。

https://

/******************
GENERAL STYLE RULES
******************/

body, div, h2, ul {
transition: all .75s ease-out;
}

div {
display: inline-block;
width: 190px;
margin: 6px;
padding: 12px;
border: 1px dashed rgb(127,127,127);
text-align: center;
vertical-align: top;
}

h2 {
line-height: 36px;
margin: 0;
font-size: 18px;
font-family: arial, helvetica, sans-serif;
}

ul {
padding-left: 12px;
color: rgb(255,255,255);
text-align: left;
background-color: rgb(0,0,127);
border: 6px solid rgb(0,0,0);
border-radius: 15px;
box-shadow: 4px 4px 4px rgba(127,127,127, 0.5);
list-style: none;
}

li {
height: 48px;
max-height: 48px;
font-size: 24px;
line-height: 48px;
margin-left: -12px;
padding-left: 12px;
transition: all 0.5s ease-out;
}

li:first-of-type {
border-radius: 9px 9px 0 0;
}

li:last-of-type {
border-radius: 0 0 9px 9px;
}

li:hover {
margin-left: -12px;
padding-left: 12px;
cursor: pointer;
}

.axe-info {
position: absolute;
top: 0;
left: 0;
height: 24px;
line-height: 24px;
font-size: 18px;
color: rgb(255,255,255);
text-align: center;
padding: 12px 24px;
border-radius: 24px;
opacity: 0;
transform: translateX(-600px);
transition: all 0.75s linear;
}

.axe-info strong {
font-size: 26px;
}

.rainbow-list li:hover ~ li,
.priority-list li:hover ~ li {
color: rgba(255,255,255,0.5);
}

div + hr {
margin-top: 120px;
}

hr ~ ol li {
height: auto;
max-height: none;
}

code {
display: inline-block;
padding: 0 12px;
}

/***********
RAINBOW LIST
************/

.rainbow-list li:hover {
background-color: red;
}

.rainbow-list li:hover + li {
background-color: orange;
}

.rainbow-list li:hover + li + li {
background-color: yellow;
}

.rainbow-list li:hover + li + li + li {
background-color: green;
}

.rainbow-list li:hover + li + li + li + li {
background-color: blue;
}

.rainbow-list li:hover + li + li + li + li + li {
background-color: indigo;
}

/************
PRIORITY LIST
*************/

.priority-list li:hover {
font-size: 36px;
background-color: rgba(255,255,255,0.6);
}

.priority-list li:hover + li {
background-color: rgba(255,255,255,0.3);
font-size: 30px;
}

.priority-list li:hover + li + li {
font-size: 24px;
}

.priority-list li:hover + li + li + li {
background-color: rgba(0,0,0,0.3);
font-size: 18px;
}

.priority-list li:hover + li + li + li + li {
background-color: rgba(0,0,0,0.6);
font-size: 12px; 
}

.priority-list li:hover + li + li + li + li + li {
background-color: rgba(0,0,0,0.9);
font-size: 6px; 
}

/*********************
RAINBOW LIST WITH AXE
*********************/

.rainbow-list-with-axe li:hover ? li ? li ? li ? li ? li ? li,
.rainbow-list-with-axe li:hover {
background-color: red;
}

.rainbow-list-with-axe li:hover ? li ? li ? li ? li ? li,
.rainbow-list-with-axe li:hover + li {
background-color: orange;
}

.rainbow-list-with-axe li:hover ? li ? li ? li ? li,
.rainbow-list-with-axe li:hover + li + li {
background-color: yellow;
}

.rainbow-list-with-axe li:hover ? li ? li ? li,
.rainbow-list-with-axe li:hover + li + li + li {
background-color: green;
}

.rainbow-list-with-axe li:hover ? li ? li,
.rainbow-list-with-axe li:hover + li + li + li + li {
background-color: blue;
}

.rainbow-list-with-axe li:hover ? li,
.rainbow-list-with-axe li:hover + li + li + li + li + li {
background-color: indigo;
}

.rainbow-list-with-axe:hover ^ body {
background-color: rgba(0,255,0,0.2);
}

/*********************
PRIORITY LIST WITH AXE
*********************/

.priority-list-with-axe li:hover {
font-size: 36px;
background-color: rgba(255,255,255,0.6);
}

.priority-list-with-axe li:hover ? li,
.priority-list-with-axe li:hover + li {
background-color: rgba(255,255,255,0.3);
font-size: 30px;
}

.priority-list-with-axe li:hover ? li ? li,
.priority-list-with-axe li:hover + li + li {
font-size: 24px;
}

.priority-list-with-axe li:hover ? li ? li ? li,
.priority-list-with-axe li:hover + li + li + li {
background-color: rgba(0,0,0,0.3);
font-size: 18px;
}

.priority-list-with-axe li:hover ? li ? li ? li ? li,
.priority-list-with-axe li:hover + li + li + li + li {
background-color: rgba(0,0,0,0.6);
font-size: 12px; 
}

.priority-list-with-axe li:hover ? li ? li ? li ? li ? li,
.priority-list-with-axe li:hover + li + li + li + li + li {
background-color: rgba(0,0,0,0.9);
font-size: 6px; 
}

.rainbow-list-with-axe:hover < div + div ul {
background-color: red;
}

.rainbow-list-with-axe:hover < div ? div ? div ul {
background-color: orange;
}

.rainbow-list-with-axe:hover < div ? div ul {
background-color: green;
}

.priority-list-with-axe:hover < div ? div ? div ? div ul {
background-color: red;
}

.priority-list-with-axe:hover < div ? div ? div ul {
background-color: orange;
}

.priority-list-with-axe:hover < div ? div ul {
background-color: green;
}

.priority-list-with-axe:hover ^ body {
background-color: rgba(255,0,0,0.1);
}

/******************
BOTH LISTS WITH AXE
*******************/

.rainbow-list-with-axe li:hover | li,
.priority-list-with-axe li:hover | li {
color: rgba(255,255,255,0.5);
}

.rainbow-list-with-axe:hover ? h2,
.priority-list-with-axe:hover ? h2 {
color: rgb(223,0,0);
font-size: 22px;
}

.rainbow-list-with-axe:hover < div,
.priority-list-with-axe:hover < div {
border: 1px solid gray;
}

.rainbow-list-with-axe:hover < div | div h2,
.priority-list-with-axe:hover < div | div h2 {
color: gray;
font-size: 12px;
}

.rainbow-list-with-axe:hover < div | div ul,
.priority-list-with-axe:hover < div | div ul {
border:6px dashed rgba(255,255,255,0.4);
}

.rainbow-list-with-axe:hover < div ! div,
.priority-list-with-axe:hover < div ! div {
transform: translateY(72px);
}

.rainbow-list-with-axe:hover < div % div ul,
.priority-list-with-axe:hover < div % div ul {
transform: scale(0.75);
}

.rainbow-list-with-axe:hover \ .axe-info,
.priority-list-with-axe:hover \ .axe-info {
opacity: 1;
}

.rainbow-list-with-axe:hover \ .axe-info {
background-color: rgb(0,91,0);
transform: translateX(184px);
}

.priority-list-with-axe:hover \ .axe-info {
background-color: rgb(191,0,0);
transform: translateX(420px);
}

来自原帖（2017年2月）

NB 我想在StackSnippet中展示它，但找到和访问样式表以及CSSOM的正确部分并不是非常简单来自StackSnippet界面，所以我提供了一个自定义链接。

示例： http://rounin.co.uk/projects/axe/axe2.html

Answer 1

好吧，有一个之前的元素选择器，从视觉上讲，使用flexbox及其order属性

完成这样的操作

body > div {
  display: flex;
  flex-direction: column;
}
div div {
  padding: 10px;
  background: lightblue;
}
div div:last-child {
  margin-bottom: 10px;
  order: -1;
}
div div:first-child:hover + div {
  background: lightgreen;
}

<div>
  <div>I'm second, hover me</div>
  <div>I'm first</div>
</div>

是否有可能使用传统的CSS实现这种演示？

更新（2017年4月）

来自原帖（2017年2月）

1 个答案: