var sum = bigInts.Aggregate(BigInteger.Add);
Агрегат получает делегата метода, который получает два BigIntegers и возвращает BigInteger. Он использует значение по умолчанию BigInteger как начальное значение (0) и перебирает каждый BigInteger, вызывая BigInteger.Add с предыдущим результатом (0 будет первым результатом в первый раз, также называемым «семя») и текущим элементом.
В настоящее время нет способа выбрать родительский элемент элемента в CSS.
Если бы был способ сделать это, это было бы в любой из текущих спецификаций селекторов CSS:
Тем временем, вам придется прибегнуть к JavaScript, если вам нужно выбрать родительский элемент.
Рабочий блок для выбора уровня 4 включает псевдокласс класса :has()
, который работает аналогично реализации jQuery . По состоянию на 2018 год это все равно не поддерживается никаким браузером .
Используя :has()
, исходный вопрос можно было бы решить с помощью этого:
li:has(> a.active) { /* styles to apply to the li tag */ }
Как уже упоминалось в парах других, нет способа стилизовать родительский элемент элемента, используя только CSS, но следующее работает с jQuery :
$("a.active").parents('li').css("property", "value");
<
-syntax работал в 2009 году, но я обновил его (на 2013 год).
– Alastair
2 May 2013 в 06:10
:has()
jQuery : $("li:has(a.active)").css("property", "value");
. Он читается аналогично предложенному CSS 4 !
селектору. См. Также: :parent
селектор , .parents()
метод , .parent()
метод .
– Rory O'Kane
8 May 2013 в 23:12
.css("property", "value")
для стилирования выбранных элементов, вы обычно должны .addClass("someClass")
и иметь в своем CSS .someClass { property: value }
( через ). Таким образом, вы можете обозначить стиль с полной мощью CSS и любыми препроцессорами, которые вы используете.
– Rory O'Kane
8 May 2013 в 23: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;
Вы можете попытаться использовать гиперссылку в качестве родителя, а затем изменить внутренние элементы при наведении. Например:
a.active h1 {color:red;}
a.active:hover h1 {color:green;}
a.active h2 {color:blue;}
a.active:hover h1 {color:yellow;}
Таким образом вы можете изменить стиль во множестве внутренних тегов на основе опрокидывания родительского элемента.
a
только для определенных элементов, если вы хотите соответствовать стандартам XHTML. Например, вы не можете использовать div
внутри a
, не получая предупреждения о нарушении схемы.
– Ivaylo Slavov
24 July 2012 в 19:22
Селектор CSS « General Sibling Combinator » может быть использован для того, что вы хотите:
E ~ F {
property: value;
}
Это соответствует любому элементу F
, которому предшествует E
].
Я знаю, что OP искал решение для CSS, но его легко достичь с помощью jQuery. В моем случае мне нужно было найти родительский тег <ul>
для тега <span>
, содержащегося в дочернем <li>
. В jQuery есть селектор :has
, поэтому можно определить родителя с помощью его дочерних элементов:
$("ul:has(#someId)")
выберет элемент ul
, у которого есть дочерний элемент с id someId . Или, чтобы ответить на исходный вопрос, что-то вроде следующего должно сделать трюк (непроверенный):
$("li:has(.active)")
$yourSpan.closest("ul")
, и вы получите родительский UL вашего элемента span. Тем не менее, ваш ответ полностью оффтопический имхо. Мы можем ответить на все вопросы, связанные с CSS, с помощью решения jQuery.
– Robin van Baalen
18 July 2013 в 18:40
По крайней мере, вплоть до CSS3, включая CSS3, вы не можете выбрать это. Но это может быть сделано довольно легко в настоящее время в JS, вам просто нужно добавить немного ванильного 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;
}
установит красный цвет фона, если пользователь наводится на любой якорь.
Но нам нужно ждать реализации браузеров: (
a ~ li {
background: red
}
В css3 добавлен новый селектор, поэтому, если html выглядит так:
<ul>
<li>
<a>Some text</a>
</li>
</ul>
Фактически вы можете воздействовать на родителя элемента «a», который является «li» «
Нет, вы не можете выбрать родителя только в css.
Но поскольку у вас уже есть класс .active
, не было бы легче перенести этот класс на li
(вместо этого из a
)? Таким образом, вы можете получить доступ только к li
и a
только через css.
Попробуйте переключить отображение 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: ...
}
Кто-нибудь предложил что-то подобное? Просто идея для горизонтального меню ...
часть 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%; }
Обновлено демо и остальные кода
Другой пример , как использовать его с текстовыми вводами - выберите родительский набор полей
Я не думаю, что вы можете выбрать родителя только в css.
Но поскольку у вас уже есть класс .active
, не было бы легче перенести этот класс на li
(вместо a
)? Таким образом, вы можете получить доступ только к li
и a
только через css.
Вот взломать с помощью 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>
Насколько мне известно, не в CSS 2. CSS 3 имеет более надежные селектор, но не всегда реализуется во всех браузерах. Даже с улучшенными селекторами я не верю, что он выполнит именно то, что вы указали в своем примере.
Существует плагин, который расширяет CSS, чтобы включить некоторые нестандартные функции, которые действительно могут помочь при разработке веб-сайтов. Это называется EQCSS .
Одна из вещей, которые добавляет EQCSS, является родительским селектором. Он работает во всех браузерах IE8 и выше. Вот формат:
@element 'a.active' {
$parent {
background: red;
}
}
Итак, здесь мы открыли запрос элемента для каждого элемента a.active
, а для стилей внутри этого запроса такие вещи, как $parent
, имеют смысл, потому что есть контрольная точка , Браузер может найти родителя, потому что он очень похож на parentNode
в JavaScript.
Вот демонстрация $parent
и еще одной демонстрации $parent
, которая работает в IE8 , а также снимок экрана, если у вас нет IE8 для тестирования с помощью .
EQCSS также включает в себя метаселектора $prev
для элемента перед выбранным элементом, $this
только для тех элементов, которые соответствуют запросу элемента, и многое другое.
need
определяется требованиями веб-разработчиков, независимо от того, будет ли он в спецификации решаться другими факторами.
– nicodemus13
15 May 2014 в 10:04
Вы можете использовать этот скрипт .
*! > 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; }
Есть еще много возможностей; просто проверьте документацию плагина.
BTW, он работает в IE.
patent()
будет быстрее. Однако это тестирование потребности
– Dan
22 September 2011 в 20:30
#a!
вызывает ошибку, #a! p
работает), поэтому другие не будут работать ни из-за Uncaught TypeError: Cannot call method 'split' of undefined
: см. jsfiddle.net/HerrSerker/VkVPs
– HerrSerker
16 April 2013 в 16:33
Технически нет прямого способа сделать это, однако вы можете сортировать это с помощью jquery или javascript.
Howeve, вы также можете сделать что-то подобное.
a.active h1 {color:blue;}
a.active p {color: green;}
jQuery
$("a.active").parents('li').css("property", "value");
Если вы хотите достичь этого с помощью jQuery, здесь приведена ссылка для родительского селектора jQuery
Нет родительского селектора; так же, как нет предыдущего селектора. Одна из веских причин не иметь этих селекторов заключается в том, что браузер должен пройти через всех дочерних элементов элемента, чтобы определить, следует ли применять класс. Например, если вы написали:
body:contains-selector(a.active) { background: red; }
Затем браузеру придется подождать, пока он не загрузится, и все разобрались до </body>
, чтобы определить, должна ли страница быть красной или нет.
Эта статья Почему у нас нет родительского селектора , это подробно объясняет.
W3C исключил такой селектор из-за огромного влияния производительности на браузер.
Псевдоэлемент :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>
.color:focus-within .change
на .color:focus-within
. В моем случае я использую bootstrap nav-bar, которые добавляют класс к дочерним элементам, когда они активны, и я хочу добавить класс в родительский .nav-bar. Я думаю, что это довольно распространенный сценарий, когда у меня есть разметка, но компонент css + js является загрузочным (или другим), поэтому я не могу изменить поведение. Хотя я могу добавить tabindex и использовать этот css. Благодаря!
– cancerbero
29 June 2018 в 15:13
Это возможно с амперсандом в 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;
}
Хотя в настоящее время в стандартном CSS нет родительского селектора, я работаю над (личным) проектом с именем ax (т. е. расширенный синтаксис селектора CSS / ACSSSS ), который среди семи новых селекторов , включает в себя:
<
(который позволяет сделать противоположный выбор >
) ^
(который позволяет сделать противоположный выбор [SPACE]
) ax в настоящее время на относительно ранней стадии разработки BETA.
См. Демонстрацию здесь:
http://rounin.co.uk/projects/axe/axe2.html
(сравните два списка на в левом стиле со стандартными селекторами и двумя списками справа в стиле с селекторами топора)
<script src="https://rouninmedia.github.io/axe/axe.js"></script>
в самом конце вашего html-документа непосредственно перед </body>
.
– Rounin
12 July 2017 в 16:40
В CSS мы можем каскадировать свойства по иерархии, но не в противоположном направлении. Чтобы изменить родительский стиль в дочернем событии, вероятно, используйте jQuery.
$el.closest('.parent').css('prop','value');
нет способа сделать это в css2. вы можете добавить класс в li и ссылаться на a
li.active > a {
property: value;
}
В настоящее время нет родительского селектора & amp; он даже не обсуждается ни в одном из переговоров W3C. Вам нужно понять, как CSS оценивается браузером, чтобы на самом деле понять, нужна ли нам это или нет.
Здесь есть много технических объяснений.
Джонатан Снук объясняет как оценивается CSS .
Крис Койер на переговорах о селекторе родителей .
Гарри Робертс снова написал эффективные селектора CSS .
Но Николь Салливан имеет некоторые интересные факты о положительных тенденциях .
Эти люди - все высшие классы в области разработки интерфейса .
need
определяется требованиями веб-разработчиков, независимо от того, будет ли он в спецификации решаться другими факторами.
– nicodemus13
15 May 2014 в 10:04
!
сейчас:The subject of the selector can be explicitly identified by appending an exclamation mark (!) to one of the compound selectors in a selector.
– animuson♦ 29 January 2012 в 23:30$
выглядел лучше для меня ... добавленный!
можно упускать из виду более легко. – Christoph 13 February 2012 в 13:25:has()
, который все узнали и полюбили jQuery. Последний ED удалил все ссылки на индикатор объекта и заменил его псевдоним:has()
. Я не знаю точных причин, но CSSWG провела опрос некоторое время назад, и результаты должны были повлиять на это решение. Скорее всего, это совместимость с jQuery (поэтому он может использовать qSA без изменений), и потому, что синтаксис индикатора предмета оказался слишком запутанным. – BoltClock♦ 4 May 2014 в 15:28