Trình duyệt của tôi không phù hợp với CSS của tôi (nhưng jQuery làm)

Question

Hãy xem xét các lớp:

.bio-target-measure { 
 
    opacity: 1; 
 
} 
 
.bio-target-measure:not(.lowerThird-25.lowerThird-active):not(.lowerThird-50.lowerThird-active):not(.lowerThird-100.lowerThird-active):not(.middleThird-25.middleThird-active):not(.middleThird-50.middleThird-active):not(.middleThird-100.middleThird-active):not(.upperThird-25.upperThird-active):not(.upperThird-50.upperThird-active):not(.upperThird-100.upperThird-active):not(.bud-25.bud-active):not(.bud-50.bud-active):not(.bud-100.bud-active) { 
 
    opacity: 0 !important; 
 
}

<div class="mark bio-target-measure upperThird-100" title="Muestra 
 
     Plaga: Oidio 
 
     ID: [4] 
 
     Tercios: [&quot;upperThird&quot;]" style="width:100.0%;height:100%;color:white;background-color:#6a6200;">Test</div>

Và những cuộc gọi jQuery:

var measures = $('.bio-target-measure'); 
measures.length; // evaluates to 1. 
measures.is('.bio-target-measure:not(.lowerThird-25.lowerThird-active):not(.lowerThird-50.lowerThird-active):not(.lowerThird-100.lowerThird-active):not(.middleThird-25.middleThird-active):not(.middleThird-50.middleThird-active):not(.middleThird-100.middleThird-active):not(.upperThird-25.upperThird-active):not(.upperThird-50.upperThird-active):not(.upperThird-100.upperThird-active):not(.bud-25.bud-active):not(.bud-50.bud-active):not(.bud-100.bud-active)'); 
// evaluates to true. 

var emptyMeasures = $('.bio-target-measure:not(.lowerThird-25.lowerThird-active):not(.lowerThird-50.lowerThird-active):not(.lowerThird-100.lowerThird-active):not(.middleThird-25.middleThird-active):not(.middleThird-50.middleThird-active):not(.middleThird-100.middleThird-active):not(.upperThird-25.upperThird-active):not(.upperThird-50.upperThird-active):not(.upperThird-100.upperThird-active):not(.bud-25.bud-active):not(.bud-50.bud-active):not(.bud-100.bud-active)'); 
emptyMeasures.length; // evaluates to 1. 

Nhưng opacity cho yếu tố như vậy, đáp ứng bộ chọn cho opacity: 0 !important; (như nó đã được nhìn thấy bằng cách sử dụng jQuery), là 1. Google Ch của tôi trình duyệt rome (47.0.2526.106, Ubuntu 15.04, 64bits) chỉ sử dụng chỉ quy tắc đầu tiên (chỉ chỉ là để làm rõ: quy tắc với độ mờ 0 không phải là hiện tại nhưng được ghi đè: hoàn toàn vắng mặt trong trận đấu).

Câu hỏi: là: không quy tắc (như tôi đã sử dụng nó) một bộ chọn CSS hợp lệ? Tôi biết nó hoạt động trong jQuery, nhưng tôi hỏi về CSS.

Answer 1

Theo sau nhận xét của @ Harry, bạn không thể có bộ chọn kết hợp trong số :not() của mình. (Bằng chứng được cung cấp bởi @TJCrowder: :not, simple selector, sequence of selectors)

Trong một trường hợp như thế này, bạn sẽ cần phải làm lại logic của bạn:

.bio-target-measure.lowerThird-25:not(.lowerThird-active), 
.bio-target-measure.lowerThird-50:not(.lowerThird-active), 
... 

Điều này có thể được thực hiện dễ dàng hơn rất nhiều sử dụng LESS hoặc tương tự phiên bản cấp cao hơn của CSS:

.bio-target-measure { 
    &.lowerThird-25, &.lowerThird-50, &.lowerThird-100 { 
     &:not(.lowerThird-active) { 
      opacity: 0 !important; 
     } 
    } 
    /* define similar blocks for middleThird and upperThird */ 
} 

Ở trên sẽ biên dịch thành bộ chọn phức tạp được đề xuất trong khối mã đầu tiên, trong khi dễ đọc hơn nhiều.

Answer 2

Trong thực tế, những gì @NietTheDarkAbsol trả lời là -half- câu trả lời mong đợi: Bộ chọn của tôi không hợp lệ trong CSS (có, trong jQuery).

Tuy nhiên, việc ghi lại logic cũng cần phải duy trì mối quan hệ lớp học. Điều này có nghĩa:

Một .bio mục tiêu-biện pháp không đáp ứng 4 điều kiện sau đồng thời, phải có một độ mờ đục của 0:

• .lowerThird- (25 | 50 | 100). lowerThird chủ động
• .middleThird- (25 | 50 | 100) .middleThird chủ động
• .upperThird- (25 | 50 | 100) .upperThird chủ động
• .bud- (25 | 50 | 100) .bud-active

Bộ chọn trong câu trả lời của anh ta tạo ra 0 khi ít nhất một của bộ lọc -active tương ứng không được đặt. Vì nhiều bộ lọc -active có thể có sẵn cho mỗi nhãn hiệu nên giải pháp phải được viết lại theo cách mặc định âm (tức là độ mờ là 0 theo mặc định và sẽ không bằng 0 khi có các lớp bổ sung).Các kịch bản sass là như thế này:

.bio-target-measure { 
    @each $lowerThird in 0, 25, 50, 100 { 
    @each $middleThird in 0, 25, 50, 100 { 
     @each $upperThird in 0, 25, 50, 100 { 
     @each $bud in 0, 25, 50, 100 { 
      $lowerThirdClass: '.lowerThird-#{$lowerThird}.lowerThird-active'; 
      $middleThirdClass: '.middleThird-#{$middleThird}.middleThird-active'; 
      $upperThirdClass: '.upperThird-#{$upperThird}.upperThird-active'; 
      $budClass: '.bud-#{$bud}.bud-active'; 

      @if $lowerThird == 0 { $lowerThirdClass: ''; } 
      @if $middleThird == 0 { $middleThirdClass: ''; } 
      @if $upperThird == 0 { $upperThirdClass: ''; } 
      @if $bud == 0 { $budClass: ''; } 

      $sum: $lowerThird + $middleThird + $upperThird + $bud; 
      @if $sum > 50 { 
      $sum: 100; 
      } 

      &#{$lowerThirdClass}#{$middleThirdClass}#{$upperThirdClass}#{$budClass} { 
      opacity: $sum/100; 
      } 
     } 
     } 
    } 
    } 
}