name选择器 - 阮一峰css选择器




有一个CSS父选择器吗? (18)

CSS选择器“ General Sibling Combinator ”可以用于你想要的东西:

E ~ F {
    property: value;
}

这匹配任何以E元素开头的F元素。

如何选择<li>元素作为锚元素的直接父元素?

在示例中,我的CSS将是这样的:

li < a.active {
    property: value;
}

显然有一些方法可以使用JavaScript来实现这一点,但我希望CSS Level 2本身存在某种解决方法。

我尝试设置样式的菜单正在由CMS喷出,因此我无法将活动元素移动到<li>元素...(除非我主题菜单创建模块,我宁愿不这样做)。

有任何想法吗?


W3C排除了这样一个选择器,因为它会对浏览器产生巨大的性能影响。


从技术上讲,没有直接的方法可以做到这一点,你可以用jquery或javascript对它进行排序。

不过,你也可以这样做。

a.active h1 {color:blue;}
a.active p {color: green;}

jQuery的

$("a.active").parents('li').css("property", "value"); 

如果你想使用jQuery实现这一点,这里是jQuery父选择器的引用


伪元素:focus-within允许在后代具有焦点时选择父元素。

如果元素具有tabindex属性,则可以对其进行聚焦。

浏览器支持焦点内部

Tabindex

.click {
  cursor: pointer;
}

.color:focus-within .change {
  color: red;
}

.color:focus-within p {
  outline: 0;
}
<div class="color">
  <p class="change" tabindex="0">
    I will change color
  </p>
  <p class="click" tabindex="1">
    Click me
  </p>
</div>


在SASS中使用&符号是可能的:

h3
  font-size: 20px
  margin-bottom: 10px
  .some-parent-selector &
    font-size: 24px
    margin-bottom: 20px

CSS输出:

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

在css2中没有办法做到这一点。 你可以将类添加到li并引用a

li.active > a {
    property: value;
}

您可以使用此script

*! > input[type=text] { background: #000; }

这将选择文本输入的任何父级。 但是等等,还有更多。 如果需要,可以选择指定的父级:

.input-wrap! > input[type=text] { background: #000; }

或者在它处于活动状态时选择它:

.input-wrap! > input[type=text]:focus { background: #000; }

看看这个HTML:

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

您可以在input处于活动状态时选择span.help并显示它:

.input-wrap! .help > input[type=text]:focus { display: block; }

还有更多功能; 只需查看插件的文档。

顺便说一下,它适用于IE。


您可以尝试使用超链接作为父级,然后在悬停时更改内部元素。 像这样:

a.active h1 {color:red;}

a.active:hover h1 {color:green;}

a.active h2 {color:blue;}

a.active:hover h1 {color:yellow;}

这样,您可以根据父元素的翻转更改多个内部标记中的样式。


我认为你不能只选择css中的父级。

但是,由于您似乎已经拥有.active类, .active类移动到li (而不是a )会不会更容易? 这样你就可以只访问lia via css。


据我所知,不是在CSS 2中。 CSS 3具有更强大的选择器,但并非在所有浏览器中始终如一地实现。 即使使用改进的选择器,我也不相信它会完全符合您在示例中指定的内容。


有一个扩展CSS的插件,包括一些在设计网站时真正有用的非标准功能。 它被称为EQCSS

EQCSS添加的一个东西是父选择器。 它适用于IE8及更高版本的所有浏览器。 这是格式:

@element 'a.active' {
  $parent {
    background: red;
  }
}

所以在这里我们已经对a.active每个元素打开了一个元素查询,对于查询中的样式,像$parent这样的东西是有意义的,因为它有一个参考点。 浏览器可以找到父级,因为它与JavaScript中的parentNode非常相似。

这是一个$parent另一个在IE8中运行的$parent演示的演示,以及一个屏幕截图,以防你没有IE8来测试

EQCSS还包括选定元素之前元素的meta-selectors $prev ,仅包含与元素查询匹配的元素的$this等等。


有人提出这样的建议吗? 只是水平菜单的想法......

HTML的一部分

<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

CSS的一部分

/* hide parent backgrounds... */
.parent-background {
  display: none; }

/* ... and show it when hover on children */
.item:hover + .parent-background {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%; }

更新了演示和其余代码

另一个如何将其与文本输入一起使用的示例 - 选择父字段集


没有父选择器; 只是没有以前的兄弟选择器的方式。 没有这些选择器的一个很好的理由是因为浏览器必须遍历元素的所有子元素以确定是否应该应用类。 例如,如果您写道:

body:contains-selector(a.active) { background: red; }

然后浏览器必须等到它已加载并解析所有内容,直到</body>确定页面是否应为红色。

本文为什么我们没有父选择器详细解释它。



简短的回答是NO ,我们在CSS的这个阶段没有parent selector ,但如果你没有交换元素或类,第二个选项是使用JavaScript,如下所示:

var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));

activeATag.map(function(x) {
  if(x.parentNode.tagName === 'LI') {
    x.parentNode.style.color = 'red'; //your property: value;
  }
});

或者在您的应用程序中使用jQuery时更短的方法:

$('a.active').parents('li').css('color', 'red'); //your property: value;

至少包括CSS3在内,你不能选择那样的CSS3。 但是现在可以很容易地在JS中完成,你只需要添加一些vanilla JavaScript,注意代码很短。

      cells = document.querySelectorAll('div');
              [].forEach.call(cells, function (el) {
              //console.log(el.nodeName)
                if (el.hasChildNodes() && el.firstChild.nodeName=="A") {
                console.log(el)};
            });
            <div>Peter</div>
            <div><a href="#">Jackson link</a></div>
            <div>Philip</div>
            <div><a href="#">Pullman link</a></div>


这是Selectors Level 4规范中讨论最多的方面。 使用此选择器将能够通过在给定选择器(!)后使用感叹号根据其子项设置元素的样式。

例如:

body! a:hover{
   background: red;
}

如果用户将鼠标悬停在任何锚点上,则会设置红色背景颜色。

但是我们必须等待浏览器实现:(


这是使用hover pointer-events的hack:

<!doctype html>
<html>
	<head>
		<title></title>
		<style>
/* accessory */
.parent {
	width: 200px;
	height: 200px;
	background: gray;
}
.parent, 
.selector {
	display: flex;
	justify-content: center;
	align-items: center;
}
.selector {
	cursor: pointer;
	background: silver;
	width: 50%;
	height: 50%;
}
		</style>
		<style>
/* pertinent */
.parent {
	background: gray;
	pointer-events: none;
}
.parent:hover {
	background: fuchsia;
}
.parent 
.selector {
	pointer-events: auto;
}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="selector"></div>
		</div>
	</body>
</html>





css-selectors