@document

Question

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

在示例中，我的CSS将是这样的：

li < a.active {
    property: value;
}

显然有很多方法可以通过JavaScript实现这一点，但我希望CSS Level 2本身存在某种解决方法。

我尝试设置样式的菜单正在由CMS喷出，所以我无法将活动元素移动到<li>元素...（除非我主题菜单创建模块，我是而不是）。

有什么想法吗？

Answer 1

目前无法在CSS中选择元素的父级。

如果有办法，那么它将出现在当前的CSS选择器规范中：

与此同时，如果您需要选择父元素，则必须使用JavaScript。

Selectors Level 4 Working Draft包含:has()伪类，其作用与jQuery implementation相同。截至2019年， this is still not supported by any browser 。

使用:has()可以解决原始问题：

li:has(> a.active) { /* styles to apply to the li tag */ }

Answer 2

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

但是，由于您似乎已经拥有.active课程，将该课程移至li（而不是a）会不会更容易？这样，您只能通过css访问li和a。

Answer 3

您可以使用此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>

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

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

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

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

Answer 4

正如其他几个人所提到的，没有办法仅使用CSS来设置元素的父/的样式，但以下内容适用于jQuery：

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

Answer 5

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

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

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

本文Why we don't have a parent selector详细解释了这一点。

Answer 6

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

li.active > a {
    property: value;
}

Answer 7

是的：:has()

浏览器支持：none

Answer 8

尝试将a切换为block显示，然后使用您想要的任何样式。 a元素将填充li元素，您可以根据需要修改它的外观。不要忘记将li填充设置为0。

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}

Answer 9

CSS选择器“General Sibling Combinator”可以用于您想要的内容：

E ~ F {
    property: value;
}

这匹配任何前面带有F元素的E元素。

Answer 10

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

Answer 11

我知道OP正在寻找一个CSS解决方案，但使用jQuery实现起来很简单。在我的情况下，我需要找到包含在子<ul>中的<span>标记的<li>父标记。 jQuery具有:has选择器，因此可以通过它包含的子节点识别父节点：

$("ul:has(#someId)")

将选择具有id someId 的子元素的ul元素。或者回答原始问题，类似下面的内容应该可以做到（未经测试）：

$("li:has(.active)")

Answer 12

这是选择器级别4 规范中讨论最多的方面。使用此选择器将能够通过在给定选择器（！）后使用感叹号根据其子元素设置元素。

例如：

body! a:hover{
   background: red;
}

如果用户将鼠标悬停在任何锚点上，

将设置红色背景颜色。

但我们必须等待浏览器的实施:(

Answer 13

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

a.active h1 {color:red;}

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

a.active h2 {color:blue;}

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

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

Answer 14

如果后代具有焦点，则伪元素:focus-within允许选择父元素。

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

Browser support for focus-within

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>

Answer 15

目前没有父选择器＆amp;它甚至没有在W3C的任何谈话中讨论过。您需要了解浏览器如何评估CSS以实际了解我们是否需要它。

这里有很多技术解释。

Jonathan Snook explains how CSS is evaluated

Chris Coyier on the talks of Parent selector

Harry Roberts again on writing efficient CSS selectors

但是Nicole Sullivan has some interesting facts on positive trends。

这些人都是前端开发领域的顶级人才。

Answer 16

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

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%; }

Updated demo and the rest of code

Another example如何在文本输入中使用它 - 选择父字段集

Answer 17

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

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

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

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

Here's a demo of $parent和another $parent demo that works in IE8，以及a screenshot in case you don't have IE8 around to test with。

EQCSS还为所选元素前的元素添加了meta-selectors $prev，仅为那些与元素查询匹配的元素添加$this等等。

Answer 18

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

但是，你也可以这样做。

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

<强>的jQuery

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

如果你想使用jQuery实现这一点，这里是jQuery parent selector

的参考

Answer 19

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

Answer 20

简短的回答是否，我们在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;

Answer 21

虽然目前标准CSS中没有父选择器，但我正在开发一个名为 ax 的（个人）项目（即增强型CSS选择器语法/ ACSSSS ）其中有7个新选择者包括：

一个直接父选择器<（启用相反的选择>）
一个任何祖先选择器 ^（启用相反的选择[SPACE]）

ax 目前处于相对较早的BETA发展阶段。

在此处观看演示：

http://rounin.co.uk/projects/axe/axe2.html

（比较左边的两个列表用标准选择器设置，右边的两个列表用斧头选择器设置）

Answer 22

现在是2019年，latest draft of the CSS Nesting Module实际上是这样的。介绍@nest规则。

3.2。嵌套规则：@nest

虽然直接嵌套看起来不错，但它有些脆弱。不允许使用某些有效的嵌套选择器，例如.foo＆，并且以某些方式编辑选择器会使规则意外无效。同样，有些人发现嵌套很难在视觉上与周围的声明区分开。

为解决所有这些问题，此规范定义了@nest规则，该规则对如何有效嵌套样式规则施加了较少的限制。其语法为：

@nest = @nest <selector> { <declaration-list> }

@nest规则的功能与样式规则相同：它以选择器开头，并包含适用于选择器匹配的元素的声明。唯一的区别是@nest规则中使用的选择器必须包含嵌套，这意味着它在某个位置包含嵌套选择器。如果所有单独的复杂选择器都包含嵌套，则选择器列表包含嵌套。

（从上面的URL复制并粘贴）。

此规范下的有效选择器示例：

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}
/* equivalent to
   .foo { color: red; }
   .foo > .bar { color: blue; }
 */

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}
/* equivalent to
   .foo { color: red; }
   .parent .foo { color: blue; }
 */

.foo {
  color: red;
  @nest :not(&) {
    color: blue;
  }
}
/* equivalent to
   .foo { color: red; }
   :not(.foo) { color: blue; }
 */

Answer 23

由于“ CSS工作组以前拒绝父选择器的提议的主要原因与浏览器性能和增量渲染问题有关，因此没有CSS（因此在CSS预处理器中）”是父选择器。

Answer 24

这是使用pointer-events和hover的黑客：

<!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>

Answer 25

否则您无法仅在css中选择父级。

但是，由于您似乎已经拥有.active课程，将该课程移至li（而不是a）会更容易吗？这样，您只能通过css访问li和a。

Answer 26

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

＆＃13;

      cells = document.querySelectorAll('div');
              [].forEach.call(cells, function (el) {
              //console.log(el.nodeName)
                if (el.hasChildNodes() && el.firstChild.nodeName=="A") {
                console.log(el)};
            });

＆＃13;

            <div>Peter</div>
            <div><a href="#">Jackson link</a></div>
            <div>Philip</div>
            <div><a href="#">Pullman link</a></div>

＆＃13;

Answer 27

试试这个...

此解决方案使用没有 Javascript 的纯 CSS2 规则，适用于所有浏览器，新旧浏览器。单击时，子 anchor 标记会激活其 active 伪类事件。然后它会简单地隐藏自己，允许 active 事件冒泡到父 li 标签，然后父 <ul> <li class="listitem"> <a class="link" href="#">This is a Link</a> </li> </ul> 标签重新设置自己的样式并以新样式再次显示他的锚子节点。孩子已经为父母设计了样式。

使用您的示例：

active

现在将这些样式与 a 上的 li 伪类一起应用，以在单击链接时重新设置父 a.link { display: inline-block; color: white; background-color: green; text-decoration: none; padding: 5px; } li.listitem { display: inline-block; margin: 0; padding: 0; background-color: transparent; } /* When this 'active' pseudo-class event below fires on click, it hides itself, triggering the active event again on its parent which applies new styles to itself and its child. */ a.link:active { display: none; } .listitem:active { background-color: blue; } .listitem:active a.link { display: inline-block; background-color: transparent; } 标签的样式：

std::ostream get_log(bool str) {
    if (str) return std::ostream(new std::stringbuf());
     // else
    std::filebuf* f = new std::filebuf();
    f->open("log", std::ios_base::out);
    return std::ostream(f);
}

您现在应该会看到绿色背景的链接在点击时更改为列表项的蓝色背景。

转向

点击。

Answer 28

有什么想法吗？

如果

CSS 4向后退中添加一些 hook ，将会很有趣。直到（尽管不建议）使用checkbox和/或radio input s 来中断是可能的事物连接的通常方式，通过这种方式还可以使CSS在正常范围之外运行...

/* Hide things that may be latter shown */
.menu__checkbox__selection,
.menu__checkbox__style,
.menu__hidden {
  display: none;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0); /* Old MS opacity */
}


/* Base style for content and style menu */
.main__content {
  background-color: lightgray;
  color: black;
}

.menu__hidden {
  background-color: black;
  color: lightgray;
  /* Make list look not so _listy_ */
  list-style: none;
  padding-left: 5px;
}

.menu__option {
  box-sizing: content-box;
  display: block;
  position: static;
  z-index: auto;
}

/* &#9660; - \u2630 - Three Bars */
/*
.menu__trigger__selection::before {
  content: '\2630';
  display: inline-block;
}
*/

/* &#9660; - Down Arow */
.menu__trigger__selection::after {
  content: "\25BC";
  display: inline-block;
  transform: rotate(90deg);
}


/* Customize to look more `select` like if ya like */
.menu__trigger__style:hover,
.menu__trigger__style:active {
  cursor: pointer;
  background-color: darkgray;
  color: white;
}


/**
 * Things to do when checkboxes/radios are checked
 */

.menu__checkbox__selection:checked + .menu__trigger__selection::after,
.menu__checkbox__selection[checked] + .menu__trigger__selection::after {
  transform: rotate(0deg);
}

/* This bit is something that ya may see elsewhere */
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
  display: block;
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100); /* MS!? */
}


/**
 * Hacky CSS only changes based off non-inline checkboxes
 * ... AKA the stuff you cannot unsee after this...
 */
.menu__checkbox__style[id="style-default"]:checked ~ .main__content {
  background-color: lightgray;
  color: black;
}

.menu__checkbox__style[id="style-default"]:checked ~ .main__content .menu__trigger__style[for="style-default"] {
  color: darkorange;
}


.menu__checkbox__style[id="style-one"]:checked ~ .main__content {
  background-color: black;
  color: lightgray;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content .menu__trigger__style[for="style-one"] {
  color: darkorange;
}


.menu__checkbox__style[id="style-two"]:checked ~ .main__content {
  background-color: darkgreen;
  color: red;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] {
  color: darkorange;
}

    
    <!--
      This bit works but will one day cause troubles,
      but truth is ya can stick checkbox/radio inputs
      just about anywhere and then call them by id with
      a `for` label, keep scrolling to see what I mean
    -->
    <input type="radio"
           name="colorize"
           class="menu__checkbox__style"
           id="style-default">
    <input type="radio"
           name="colorize"
           class="menu__checkbox__style"
           id="style-one">
    <input type="radio"
           name="colorize"
           class="menu__checkbox__style"
           id="style-two">


<div class="main__content">

  <p class="paragraph__split">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  </p>

  <input type="checkbox"
         class="menu__checkbox__selection"
         id="trigger-style-menu">
  <label for="trigger-style-menu"
         class="menu__trigger__selection"> Theme</label>

  <ul class="menu__hidden">
    <li class="menu__option">
      <label for="style-default"
             class="menu__trigger__style">Default Style</label>
    </li>

    <li class="menu__option">
      <label for="style-one"
             class="menu__trigger__style">First Alternative Style</label>
    </li>

    <li class="menu__option">
      <label for="style-two"
             class="menu__trigger__style">Second Alternative Style</label>
    </li>
  </ul>

  <p class="paragraph__split">
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

</div>

...很漂亮的毛钱，但是只要使用CSS和HTML，就可以通过链接从几乎任何地方触摸和重新触摸body和:root以外的任何东西id / for radio s 和checkbox 触发器的input和label属性;可能有人会在某个时候展示如何重新修饰它们。

另一个警告是，只能使用特定的input中的一个 id，第一个checkbox / radio 获胜< / em>切换状态... 但是，多个标签都可以指向同一个input，尽管那样会使HTML和CSS看起来都更粗大。

...我希望CSS 2本身具有某种解决方法...


不确定其他:选择器，但不确定CSS3之前的:checked选择器，如果我没记错的话，就像[checked]一样，这就是为什么您可以在上面的代码中找到它的原因，例如...

.menu__checkbox__selection:checked ~ .menu__hidden, .menu__checkbox__selection[checked] ~ .menu__hidden { /* rules: and-stuff; */ }

...但是诸如::after和:hover之类的东西我完全不确定那些最初出现在哪个CSS版本中。

以上所述，请不要在生产中使用它，甚至在玩笑时不要在生气中使用它，或者换句话说，仅仅因为可以完成某件事并不总是意味着应该。

Answer 29

@document

从技术上讲，它不是父选择器，但它将允许您选择页面URL，该页面URL在获得时将作为“父”。请记住，您需要为此提倡（有关更多说明，请参见此帖子的底部）。一旦网络作者可行，我将更新此帖子。

让我们说您要更改每个页面的导航标题的background-image。您的HTML通常如下所示：

<body>

<main id="about_"></main>

<header><nav></nav></header>

</body>

向id和head元素添加body属性不是专业的，并且与Web 3.0不兼容。但是，通过选择 URL ，您无需以任何方式添加任何HTML代码：

@document url('https://www.example.com/about/')
{
 body > header
 {
  background-image: url(about.png);
 }
}

因为您是专业人士（您是，不是吗？），您总是在将代码部署到实时服务器之前先对其进行本地测试。因此，静态网址无法在localhost，127.0.0.1，:1等上正常工作-默认情况下。这意味着如果您要成功测试和验证代码，则需要在CSS上运行服务器端脚本。这也意味着，如果允许用户在您的站点上运行CSS，则应确保其 CSS代码无法运行服务器端脚本。大多数会发现帖子的这部分有用的人可能不确定如何处理它，而这一切都取决于您如何组织工作环境。

始终在RAID 1、5、6、1 + 0或0 + 1上运行您的本地环境（通常误认为是不存在的“ RAID 10”，而0 + 1和1 + 0非常非常不同的野兽）。
请勿将您的工作（和个人文件）存储在与操作系统相同的驱动器上；无论您是否愿意，您都会重新格式化。
您的根路径应如下所示（在WAMP（Windows，Apache，MariaDB和PHP）服务器上）：D:\Web\Version 3.2\www.example.com\。
在PHP中，您将从$_SERVER['DOCUMENT_ROOT']开始（您可以通过if (substr($_SERVER['DOCUMENT_ROOT'],0,1) == '/') {}条件确定Linux操作系统）。
您保留较旧版本的副本，因为您需要查看工作副本，以防万一您忘记并弄乱了某些内容，从而进行了版本控制。

以下假设您的实时服务器使用www.（https://www.example.com/而不是https://example.com/）：

<?php
if (!isset($_SERVER['HTTP_HOST']))
{
//Client does not know what domain they are requesting, return HTTP 400.
}
else
{
 //Get the domain name.
 if (substr($_SERVER['HTTP_HOST'],0,4) === 'www.')
 {//Live Server
  $p0 = explode('www.',$_SERVER['HTTP_HOST'],2);
  $domain = $p0[1];
 }
 else
 {//localhost
  $p0 = explode('www.',$_SERVER['REQUEST_URI']);

  if (isset($p0[2]))
  {
   $p1 = explode('/',$p0[2],2);
   $domain = $p1[0];
  }
  else
  {
   $p1 = explode('/',$p0[1],2);
   $domain = $p1[0];
  }
 }


 //Now reconstruct your *relative* URL.
 if (isset($_SERVER['HTTPS'])) {$https = 'https';}
 else {$https = 'http';}

 $p0 = explode('www.',$_SERVER['HTTP_HOST']);

 if (stristr($_SERVER['HTTP_HOST'],'www.'))
 {
  $a = array('p1'=>$https.'://www.'.$domain, 'p2'=>'/');
 }
 else
 {
  $dir_ver = explode('/www.',$_SERVER['REQUEST_URI']);

  if ($_SERVER['HTTP_HOST']=='localhost' || $_SERVER['HTTP_HOST']==$_SERVER['SERVER_NAME'])
  {
   $p0 = explode($domain,$_SERVER['REQUEST_URI']);
   $a = array('p1'=>$https.'://'.$_SERVER['HTTP_HOST'], 'p2'=>htmlspecialchars($p0[0].$domain).'/');
  }
  else if (substr($_SERVER['HTTP_HOST'],0,7)=='192.168' || substr($_SERVER['HTTP_HOST'],0,4)=='127.')
  {
   $p0 = explode($domain,$_SERVER['REQUEST_URI']);
   $a = array('p1'=>$https.'://'.$_SERVER['HTTP_HOST'], 'p2'=>htmlspecialchars($p0[0].$domain).'/');
  }
 }

 print_r($a);
}
?>

$a将返回URL的两个部分。您的首页或网站的根URL将是/，因此，当您比较字符串时，about/或explode大约是split。这样一来，您将获得大约80％的方式（用于本地测试和实时测试），因此您可以在两个环境中运行相同的代码，并在CSS中使用它们来重构URL。

浏览器支持

截至2019年，只有Gecko 61+支持此功能，并且仅在标记后面。我已经提倡网络作者可以使用它。 David Baron是 CSS条件规则模块第3级的作者。实际CSS不存在“父选择器”的主要原因是由于对性能的影响。此方法将抵消性能影响。我还主张在HTML base元素存在的情况下应支持相对URL。如果您是在2019年或之后不久（在47,632年向大家问好！）阅读本文，请 first 引用以下URL：

Answer 30

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;
}

Answer 31

只需变通。

.div {
  height: 400px;
  width: 400px;
  background: white;
  pointer-events: none;
  padding: 40px;
}

.h1 {
  pointer-events: auto;
}

.div:hover {
  background: blue;
}

<div class ="div">
    <h1 class="h1">
        Amit Chauhan
    </h1>
</div>

Answer 32

我会雇用一些JS代码来做到这一点。例如在ReactJS中，当您遍历数组时，将另一个类添加到父组件，这表明它包含您的孩子：

<div className={`parent ${hasKiddos ? 'has-kiddos' : ''}`}>
    {hasKiddos && kiddos.map(kid => (
        <div key={kid.id} className="kid">kid</div>
    ))}
</div>

然后简单地：

.parent {
    color: #000;
}

.parent.has-kiddos {
    color: red;
}

Answer 33

仅当我们在父元素中有一个<input>元素时，才可以基于子元素更改父元素。当输入获得焦点时，其相应的父元素会受到CSS的影响。

以下示例将帮助您了解如何在CSS中使用:focus-within。

.outer-div {
  width: 400px;
  height: 400px;
  padding: 50px;
  float: left
}

.outer-div:focus-within {
  background: red;
}

.inner-div {
  width: 200px;
  height: 200px;
  float: left;
  background: yellow;
  padding: 50px;
}

<div class="outer-div">
  <div class="inner-div">
    I want to change outer-div(Background color) class based on inner-div. Is it possible?
    <input type="text" placeholder="Name" />
  </div>
</div>

Answer 34

在CSS中，我们可以在层次结构中级联到属性，但不能在相反的方向上级联。要修改子事件的父样式，可能使用jQuery。

$el.closest('.parent').css('prop','value');

有一个CSS父选择器吗？

34 个答案:

@document

浏览器支持