CSS优先级混乱

对于正确的CSS优先级设置，我搜索了一下，没有找到类似的排序。我隐约记得很久以前有人在评论中发布了关于CSS优先级的帖子，但我一点也不记得了。因此，我问这个问题——其中一部分是为了得到我的答案——并将这个答案存档，以备将来参考（也包括我自己，以防再次发生这种情况）

以下是我的片段：

.ContainerTitle{
背景：#fff；
浮动：左；
填充：15px；
左侧填充：15px；
边框：实心1px#000；
字体大小：大号；
颜色：#000；
文本对齐：左对齐；
光标：指针；
过渡：所有.1放松；
}
.下载这个，
.看这个{
显示：内联块；
填充：20px；
垫底：10px；
边框：实心1px#fff；
宽度：40px；
}
/*下面的问题在这里帮助*/
.showHint{
边缘顶部：20px；
背景#f1f1；
}
.ViewThis:hover.showHint:after{
内容：'*提示：在线查看'；
}
.下载此：悬停。显示提示：之后{
内容：'*提示：下载'；
}
/*以上问题在这里帮助*/
.下载这个{
背景：#1D9C73；
颜色：#fff；
}
.看这个{
背景#7D529E；
颜色：#fff；
}
下载这个：悬停，
.查看此：悬停{
边框：实心1px#000；
背景：#fff；
}
.下载这个：悬停{
颜色：#1D9C73；
}
.查看此：悬停{
颜色：#7D529E；
}
.集装箱运输：之前，
.下载这个：之前，
.查看此项：之前{
字体系列：Fontsome；
字体风格：普通；
字体大小：正常；
文字装饰：继承；
左侧填充：6px；
右边填充：8px；
字体大小：32px；
}
.集装箱运输：以前{
内容：'\f0f6'；
字体大小：24px；
}
下载这个：在{
内容：'\f019'；
}
.查看此项：之前{
内容：'\f06e'；
}

教学大纲：
注:

它不起作用，因为

.showHint

不是

的后代。查看此

。您需要使用：

例如：

.ContainerTitle{
背景：#fff；
浮动：左；
填充：15px；
左侧填充：15px；
边框：实心1px#000；
字体大小：大号；
颜色：#000；
文本对齐：左对齐；
光标：指针；
过渡：所有.1放松；
}
.下载这个，
.看这个{
显示：内联块；
填充：20px；
垫底：10px；
边框：实心1px#fff；
宽度：40px；
}
/*下面的问题在这里帮助*/
.showHint{
边缘顶部：20px；
背景#f1f1；
}
.ViewThis:hover~.showHint:after{
内容：'*提示：在线查看'；
}
.DownloadThis:hover~。showHint:after{
内容：'*提示：下载'；
}
/*以上问题在这里帮助*/
.下载这个{
背景：#1D9C73；
颜色：#fff；
}
.看这个{
背景#7D529E；
颜色：#fff；
}
下载这个：悬停，
.查看此：悬停{
边框：实心1px#000；
背景：#fff；
}
.下载这个：悬停{
颜色：#1D9C73；
}
.查看此：悬停{
颜色：#7D529E；
}
.集装箱运输：之前，
.下载这个：之前，
.查看此项：之前{
字体系列：Fontsome；
字体风格：普通；
字体大小：正常；
文字装饰：继承；
左侧填充：6px；
右边填充：8px；
字体大小：32px；
}
.集装箱运输：以前{
内容：'\f0f6'；
字体大小：24px；
}
下载这个：在{
内容：'\f019'；
}
.查看此项：之前{
内容：'\f06e'；
}

教学大纲：
注:

它不起作用，因为

.showHint

不是

的后代。查看此

。您需要使用：

例如：

.ContainerTitle{
背景：#fff；
浮动：左；
填充：15px；
左侧填充：15px；
边框：实心1px#000；
字体大小：大号；
颜色：#000；
文本对齐：左对齐；
光标：指针；
过渡：所有.1放松；
}
.下载这个，
.看这个{
显示：内联块；
填充：20px；
垫底：10px；
边框：实心1px#fff；
宽度：40px；
}
/*下面的问题在这里帮助*/
.showHint{
边缘顶部：20px；
背景#f1f1；
}
.ViewThis:hover~.showHint:after{
内容：'*提示：在线查看'；
}
.DownloadThis:hover~。showHint:after{
内容：'*提示：下载'；
}
/*以上问题在这里帮助*/
.下载这个{
背景：#1D9C73；
颜色：#fff；
}
.看这个{
背景#7D529E；
颜色：#fff；
}
下载这个：悬停，
.查看此：悬停{
边框：实心1px#000；
背景：#fff；
}
.下载这个：悬停{
颜色：#1D9C73；
}
.查看此：悬停{
颜色：#7D529E；
}
.集装箱运输：之前，
.下载这个：之前，
.查看此项：之前{
字体系列：Fontsome；
字体风格：普通；
字体大小：正常；
文字装饰：继承；
左侧填充：6px；
右边填充：8px；
字体大小：32px；
}
.集装箱运输：以前{
内容：'\f0f6'；
字体大小：24px；
}
下载这个：在{
内容：'\f019'；
}
.查看此项：之前{
内容：'\f06e'；
}

教学大纲：
注:

它不起作用，因为

.showHint

不是

的孩子。请下载此

或

。查看此

使用tilde（通用同级）选择器，然后选择

.ContainerTitle

范围内的下一个（和所有）

.showHint

元素

.ViewThis:hover ~ .showHint:after {
  content: '*Hint: View Online';
}
.DownloadThis:hover ~ .showHint:after {
  content: '*Hint: Download';
}

---

查看我的

它不工作，因为

.showHint

不是

的孩子。下载此

或

。查看此

使用tilde（通用同级）选择器，然后选择

.ContainerTitle

范围内的下一个（和所有）

.showHint

元素

.ViewThis:hover ~ .showHint:after {
  content: '*Hint: View Online';
}
.DownloadThis:hover ~ .showHint:after {
  content: '*Hint: Download';
}

---

查看我的

您需要下一个同级和常规同级选择器。读一读

.ContainerTitle{
背景：#fff；
浮动：左；
填充：15px；
左侧填充：15px；
边框：实心1px#000；
字体大小：大号；
颜色：#000；
文本对齐：左对齐；
光标：指针；
过渡：所有.1放松；
}
.下载这个，
.看这个{
显示：内联块；
填充：20px；
垫底：10px；
边框：实心1px#fff；
宽度：40px；
}
/*下面的问题在这里帮助*/
.showHint{
边缘顶部：20px；
巴克