关键词：
【中文标题】是否有一个 css 选择器可以选择当前元素之外的元素？ [复制]【英文标题】：Is there a css selector which selects an element outside the current element? [duplicate] 【发布时间】：2016-02-27 18:53:42 【问题描述】：代码比文字更能解释
<div class="parent">
<span class="child"></span>
</div>
<div class="outside"></div>
我想做的事
.child:hover ? .outside
? 是我要查找的选择器
【问题讨论】：
不，不是.child:hover。您可以在 .parent:hover 上选择 .outside。如果你的.child 覆盖了父级的整个空间（我怀疑它是span），那么.child:hover 将有效地等同于.parent:hover。
我对此表示怀疑。 CSS 选择器通常不会以需要向外遍历 DOM 的方式工作（因此之前的同级选择器支持不佳）。
选择器表示元素之间的结构关系。没有可以想象的关系可以在这里使用单个组合器来表达（除了，也许，.child:hoverexisting 在文档树的某处）。
让我们看看这个w3.org/TR/css3-selectors/#selectors
@BoltClock 听起来更像是一个答案而不是评论；）
【参考方案1】：
选择器表示元素之间的结构关系。当您为“外部”另一个元素的元素请求选择器时，您正在寻找一个组合器，它说“这个元素出现在这个另一个元素的包含范围之外”。
没有这样的组合器。
您可以想象专门选择 .parent 的 .outside 兄弟姐妹，但随后您会遇到另一个问题，即 there is no parent selector 匹配 .parent 相对于 .child:hover 就像匹配 .child:hover 相对于 @ 987654328@（即.parent > .child:hover）。
另见：How do I select an element based on the state of another element in the page with CSS?
【讨论】：
【参考方案2】：最简单的方法是让 .parent 类成为需要悬停的元素。
那你就可以了
.parent:hover ~ .outside
【讨论】：
【参考方案3】：使用以下html 结构：
<div class="parent">
<span class="child"></span>
</div>
<div class="outside"></div>
由于CSS中没有可靠的父选择器，你可以5种方式选择.outsideonly：
-
直接。
如果它是
.parent的兄弟。
如果它是.parent 的子代。
如果它是.child的兄弟。
如果它是.child 的孩子。
由于.outside 既不是.child 的兄弟姐妹，也不是.parent 的孩子，因此您选择.outside 的唯一剩余关系是.parent 的兄弟姐妹。
如果您只想在将鼠标悬停在 .child 上时仅更改 .outside 的显示，这并不是您真正想要的。
当 CSS 已经可以处理任务时，我不喜欢使用 javascript 来影响演示，但在这种情况下，CSS 无法处理任务并且 javascript 是基本的：
var child = document.getElementsByClassName('child')[0];
var outside = document.getElementsByClassName('outside')[0];
function childHover()
outside.classList.toggle('childhover');
function initialiseChildHover()
child.addEventListener('mouseover',childHover,false);
child.addEventListener('mouseout',childHover,false);
window.addEventListener('load',initialiseChildHover,false);.parent
display: inline-block;
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 1);
.child
display: inline-block;
width: 100px;
height: 100px;
margin: 50px;
background-color: rgba(255, 255, 0, 1);
.outside
display: inline-block;
width: 150px;
height: 150px;
background-color: rgba(0, 255, 0, 1);
.outside.childhover
background-color: rgba(0, 0, 255, 1);
<div class="parent">
<span class="child"></span>
</div>
<div class="outside"></div>【讨论】：
css3选择器
基本规则：CSS3结构性伪类选择器—root:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>CSS3结构性伪类选择器—not:not选择器称为否定选... 查看详情
css都有哪些选择器
...过.类名获取元素权重：0010（通过class类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。）3.id选择器：通过#id名获取元素权重：0100（通过id名来选择... 查看详情
如何用css选择器查询和风格化web元素
...不一致的，不过你可以利用网上的说明来检测某个选择器是否能在你的目标浏览器使用。通用通用选择器允许你在整个页面中使用样式。基本上说来，一个样式并不指定具体的元素，类等，所以它适用于页面内的所有元素。这对... 查看详情
css选择器
css选择器选择器有很多种方式，核心分为三种：1.元素选择器；2.id选择器；3.class选择器。1.元素选择器元素选择器一般用于通用的CSS定义，在局部或某个单一样式不适用。除非你的网站非常小，小到整个页面的元素标签不超过5... 查看详情
css选择器——属性选择器和基于元素结构关系的选择器
...器，于是css2引入了属性选择器。3.属性选择器 a)根据是否存在该属性来选择 如果希望选择有某个属性的元素，例如要选择有class属性的所有h1元素，使其文本为银色，可以这样写：/*根据单个属性来选择*/h1[class]{color:s... 查看详情
前端-css-2-选择器
基本选择器首先来说一下，什么是选择器。在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设... 查看详情
css之标签选择器
标签（空格分隔）：标签选择器选择器定义：在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们... 查看详情
前置所有 CSS 选择器
...allCSSselectors【发布时间】：2012-06-2501:08:38【问题描述】：是否有一个文本过滤器或javascript/jquery函数可以在样式表中的所有css选择器前面加上一些东西？我试图用twitterbootstrap只影响一个div，但它正在影响它之外的侧边栏，有没有... 查看详情
1css概念
CSS CSS指层叠样式表 层叠样式表：一个样式可以给多个元素使用，一个元素可以有多个样式 什么是样式： 控制元素的展示 为什么用css 是为了解决内容与表现分离的问题 css语法格式选择器k:v;k:v;k:v;...学习css主要就是两部分1... 查看详情
不是 CSS 选择器
...NotCSSselectors【发布时间】：2010-10-1802:38:42【问题描述】：是否有某种“非”CSS选择器？例如，当我在我的CSS中编写以下行时，具有类classname的标记内的所有输入字段都将具有红色背景。.classnameinputbackground:red;如何选择类classname标... 查看详情
是否有 CSS“haschildren”选择器？ [复制]
】是否有CSS“haschildren”选择器？[复制]【英文标题】：IsthereaCSS"haschildren"selector?[duplicate]【发布时间】：2012-08-2518:36:16【问题描述】：可能重复：IsthereaCSSparentselector?是否有一个css选择器我只能在子元素存在时使用？考虑... 查看详情
是否有可以在 Firefox 中测试 CSS 选择器的插件？
】是否有可以在Firefox中测试CSS选择器的插件？【英文标题】：Isthereanaddonwhichyoucantestcssselectorsinfirefox?【发布时间】：2011-01-1314:33:57【问题描述】：我想知道Firefox中是否有这样的插件，您可以在其中测试css路径以检查它们是否找... 查看详情
010.css选择器
...。根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。选择器会根据该元素的ID属性中的内容匹配元素。元素ID属... 查看详情
css各类选择器总结(代码片段)
首先来说一下，什么是选择器。在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式... 查看详情
web前端——css选择器
... 选择器，说白了就是html的标签或者其相关特性，在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以... 查看详情
css之选择器
选择器：选择一个元素（标签）的方法。有以下6种选择器 一、选择器的类型 1、id选择器 定义：通过id选择元素（选择到的是一个元素）。id在页面上具有唯一性。 语法：#id名称{要添加的样... 查看详情
是否有可以在 C# 中使用的类似 jQuery 的 CSS/HTML 选择器？
】是否有可以在C#中使用的类似jQuery的CSS/HTML选择器？【英文标题】：IsthereajQuery-likeCSS/HTMLselectorthatcanbeusedinC#?【发布时间】：2010-12-0712:40:46【问题描述】：我想知道是否有可以在C#中使用的类似jQuery的css选择器。目前，我正在使... 查看详情
css
...p元素等于one的p元素的值。。。。。。id选择器id名称只能一个元素，只能对应一个页面层级选择器主要有上下选择器，可以上下标签对应使用。后代选择器和子代选择器对应父元素下的子元素 查看详情