Czy pseudo-Klasa: not() może mieć wiele argumentów?
Próbuję wybrać input
Elementy wszystkich type
S z wyjątkiem radio
i checkbox
.
Wiele osób pokazało, że można umieścić wiele argumentów w :not
, ale używanie type
i tak nie działa.
form input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
Jakieś pomysły? 5 answers
Dlaczego: nie używać tylko dwóch :not
:
input:not([type="radio"]):not([type="checkbox"])
tak, jest to celowe
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-18 18:23:04
Jeśli używasz SASS w swoim projekcie, zbudowałem ten mixin, aby działał tak, jak wszyscy tego chcemy:
@mixin not($ignorList...) {
//if only a single value given
@if (length($ignorList) == 1){
//it is probably a list variable so set ignore list to the variable
$ignorList: nth($ignorList,1);
}
//set up an empty $notOutput variable
$notOutput: '';
//for each item in the list
@each $not in $ignorList {
//generate a :not([ignored_item]) segment for each item in the ignore list and put them back to back
$notOutput: $notOutput + ':not(#{$not})';
}
//output the full :not() rule including all ignored items
&#{$notOutput} {
@content;
}
}
Można go używać na 2 sposoby:
Opcja 1: Lista ignorowanych elementów w linii
input {
/*non-ignored styling goes here*/
@include not('[type="radio"]','[type="checkbox"]'){
/*ignored styling goes here*/
}
}
Opcja 2: Lista ignorowanych pozycji w zmiennej jako pierwsza
$ignoredItems:
'[type="radio"]',
'[type="checkbox"]'
;
input {
/*non-ignored styling goes here*/
@include not($ignoredItems){
/*ignored styling goes here*/
}
}
Outputted CSS dla każdej z opcji
input {
/*non-ignored styling goes here*/
}
input:not([type="radio"]):not([type="checkbox"]) {
/*ignored styling goes here*/
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-03 02:09:51
Począwszy od CSS 4 używanie wielu argumentów w selektorze :not
staje się możliwe (zobacz tutaj).
W CSS3, selektor :not pozwala tylko na 1 selektor jako argument. W selektorach poziomu 4 może przyjmować listę selektorów jako argument.
Przykład:
/* In this example, all p elements will be red, except for
the first child and the ones with the class special. */
p:not(:first-child, .special) {
color: red;
}
Niestety, obsługa przeglądarki jest ograniczona . Na razie działa tylko w Safari.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-27 20:38:58
Miałem z tym jakiś problem i metoda "X: not (): not ()" nie działała dla mnie.
W końcu uciekłem się do tej strategii:
INPUT {
/* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
/* styles that reset previous styles */
}
To nie jest prawie tak zabawne, ale działało dla mnie, gdy: not() był pugnacious. Nie jest idealny, ale solidny.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-22 16:17:08
Jeśli zainstalujesz wtyczkę" cssnext " Post CSS , możesz bezpiecznie zacząć używać składni, której chcesz użyć w tej chwili.
Użycie cssnext zmieni to:
input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
Do tego:
input:not([type="radio"]):not([type="checkbox"]) {
/* css here */
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-03 00:46:37