CSS "and" 및 "or"

CSS "and" 및 "or"

입력된 유형을 스타일링하는 데 있어 적잖은 문제가 있습니다.나는 다음과 같은 것을 가지고 있었습니다.

.registration_form_right input:not([type="radio")
{
 //Nah.
}

하지만 저도 체크박스 스타일은 하고 싶지 않습니다.

시도해 봤습니다.

.registration_form_right input:not([type="radio" && type="checkbox"])
.registration_form_right input:not([type="radio" && "checkbox"])
.registration_form_right input:not([type="radio") && .registration_form_right input:not(type="checkbox"])

사용방법&&? 그리고 나는 사용할 필요가 있습니다.||곧 있으면 그 사용법도 똑같을 것 같습니다.

업데이트:
사용법을 아직 모릅니다.||그리고.&&정확하게W3 문서에서는 아무것도 찾을 수 없었습니다.

&&는 여러 선택기를 문자열로 연결하여 작동합니다.

<div class="class1 class2"></div>

div.class1.class2
{
  /* foo */
}

또 다른 예:

<input type="radio" class="class1" />

input[type="radio"].class1
{
  /* foo */
}

||는 여러 선택기를 쉼표 라이크 소로 구분하여 작동합니다.

<div class="class1"></div>
<div class="class2"></div>

div.class1,
div.class2
{
  /* foo */
}

AND()&&):

.registration_form_right input:not([type="radio"]):not([type="checkbox"])

OR (||):

.registration_form_right input:not([type="radio"]), 
   .registration_form_right input:not([type="checkbox"])

속성 선택 방법a그리고.b의X요소:

X[a][b]

속성 선택 방법a오어b의X요소:

X[a],X[b]

그:notpseudo-class는 IE에서 지원되지 않습니다.그 대신에 이런 것을 원합니다.

.registration_form_right input[type="text"],
.registration_form_right input[type="password"],
.registration_form_right input[type="submit"],
.registration_form_right input[type="button"] {
  ...
}

일부 중복은 있지만 호환성을 높이려면 비용이 적게 듭니다.

혹시라도 나처럼 갇혀있는 사람이 있을 경우를 대비해서요.게시물과 약간의 타격과 시험을 거친 후에 이것은 나에게 효과가 있었습니다.

input:not([type="checkbox"])input:not([type="radio"])

만약 우리가 찾고 싶다면,div 이 두 가지를 모두 포함하고 있는그리고 그것은 그들의 안에.value속성, 다음과 같이 두 조건을 간단히 연결할 수 있습니다.

div[value*="this"][value*="that"] 

우리가 원하는 경우에는div 이것 중 하나를 포함하고 있는또는 다음과 같이 두 조건 사이에 쉼표를 사용할 수 있습니다.

div[value*="this"], div[value*="that"] 

참고: 원하는 만큼의 조건을 사용할 수 있습니다.이는 예에서 볼 수 있는 것처럼 2로 제한되는 것이 아닙니다.

&와 :not을 사용하여 "OR"의 동작을 어떻게든 재현할 수 있습니다.

SomeElement.SomeClass [data-statement="things are getting more complex"]  :not(:not(A):not(B))     {
    /* things aren't so complex for A or B */
}

더 많은 선택지를 써서 쉼표로 나누는 것을 싫어하시나 봐요?

.registration_form_right input:not([type="radio"]),  
.registration_form_right input:not([type="checkbox"])  
{  
}

그리고 이건 그렇고요.

not([type="radio" && type="checkbox"])  

제가 보기에는 "이 두 가지 유형이 모두 없는 입력"에 가깝습니다. :)

주의의 말.여러 개를 함께 묶기notselectors는 결과적인 selector의 특이성을 높여서 재정의하기가 더 어렵습니다. 기본적으로 not이 모두 있는 selector를 찾아서 새 selector에 복사 paste해야 합니다.

A not(X or Y)선택자는 특정성이 부풀려지지 않도록 하는 것이 좋겠지만, 저는 우리가 이 답변에서처럼 반대되는 것들을 결합하는 것을 고수해야 할 것이라고 생각합니다.

언급URL : https://stackoverflow.com/questions/2797091/css-and-and-or