Tôi có thể viết bộ chọn CSS chọn các phần tử KHÔNG có một lớp hoặc thuộc tính nhất định không?

645

Tôi muốn viết một quy tắc chọn CSS chọn tất cả các phần tử không có một lớp nhất định. Ví dụ: đưa ra HTML sau:

<html class="printable">
    <body class="printable">
        <h1 class="printable">Example</h1>
        <nav>
            <!-- Some menu links... -->
        </nav>
        <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
        <p class="printable">
            This page is super interresting and you should print it!
        </p>
    </body>
</html>

Tôi muốn viết một chọn mà chọn tất cả các yếu tố mà không có lớp "in" đó, trong trường hợp này, là những nav và một yếu tố.

Điều này có thể không?

LƯU Ý: trong HTML thực tế nơi tôi muốn sử dụng, sẽ có nhiều phần tử không có lớp "có thể in" hơn (tôi nhận ra cách khác trong ví dụ trên).

html  css  css-selectors 
— David Nordvall
nguồn

Câu trả lời:

899

Thông thường, bạn thêm một bộ chọn lớp cho lớp :not()giả như vậy:

:not(.printable) {
    /* Styles */
}

:not([attribute]) {
    /* Styles */
}

Nhưng nếu bạn cần hỗ trợ trình duyệt tốt hơn (IE8 và cũ không hỗ trợ :not()), bạn có lẽ tốt hơn tạo quy tắc phong cách cho các yếu tố đó làm có lớp "in". Nếu thậm chí điều đó không khả thi mặc dù bạn nói gì về đánh dấu thực tế của mình, bạn có thể phải thực hiện đánh dấu của mình xung quanh giới hạn đó.

Hãy ghi nhớ rằng, tùy thuộc vào các thuộc tính bạn thiết lập đang trong quy tắc này, một số trong số họ có thể hoặc được thừa hưởng bởi hậu duệ đó là .printable , hoặc ảnh hưởng đến họ một cách này hay cách khác. Ví dụ, mặc dù displaykhông được kế thừa, việc thiết lập display: nonetrên :not(.printable)sẽ ngăn nó và tất cả các hậu duệ của nó hiển thị, vì nó loại bỏ hoàn toàn phần tử và phần phụ của nó khỏi bố cục. Bạn có thể thường xuyên khắc phục điều này bằng cách sử dụng visibility: hiddenthay vào đó sẽ cho phép con cháu hiển thị hiển thị, nhưng các yếu tố ẩn sẽ vẫn ảnh hưởng đến bố cục như ban đầu. Tóm lại, chỉ cần cẩn thận.

— BoltClock
nguồn
4
Như một chút thông tin, hỗ trợ trình duyệt cho các khía cạnh không tin cậy về phương tiện truyền thông của CSS thường giống nhau trên các loại phương tiện - nếu một trình duyệt không hỗ trợ :not()trên màn hình, thì nó cũng không hỗ trợ in.
— BoltClock
19
Lưu ý rằng :not()chỉ cần một bộ chọn đơn giản , có nghĩa là nó không thể chứa các bộ chọn lồng nhau như :not(div .printable)- xem cú pháp Bộ chọn W3C
— Steve Eynon
1
Tôi chỉ thử nó cho .active a: not (.active a) không hoạt động với tôi. Nhưng, a: không (.active) đã làm!
— dùng2367418
Khi bạn nói rằng nó không làm việc cho bạn, có lẽ bạn có nghĩa là nó không làm việc cho bạn , phải không? Điều đó không có nghĩa là nó không hoạt động, nó có thể là một trường hợp cụ thể - các thuộc tính trong :not(.active)quy tắc của bạn có thể đơn giản bị ghi đè bởi các thuộc tính trong quy tắc có mức độ ưu tiên cao hơn.
— amn
1
@Kilves: Bạn có chắc chắn về điều đó? Các đặc trưng của :not()là lập luận của mình, mà có nghĩa là :not(div)cũng không kém phần đặc trưng cho div, :not(.cls)để .clsvà :not(#id)để #id.
— BoltClock
179 
:not([class])

Trên thực tế, điều này sẽ chọn bất cứ thứ gì không có lớp css ( class="css-selector") được áp dụng cho nó.

Tôi đã làm một bản demo jsfiddle

    h2 {color:#fff}
    :not([class]) {color:red;background-color:blue}
    .fake-class {color:green}
    <h2 class="fake-class">fake-class will be green</h2>
    <h2 class="">empty class SHOULD be white</h2>
    <h2>no class should be red</h2>
    <h2 class="fake-clas2s">fake-class2 SHOULD be white</h2>
    <h2 class="">empty class2 SHOULD be white</h2>
    <h2>no class2 SHOULD be red</h2>
Mở rộng đoạn trích

Điều này có được hỗ trợ không? Có: Caniuse.com (truy cập ngày 02 tháng 1 năm 2020) :

  • Hỗ trợ: 98,74%
  • Hỗ trợ một phần: 0,1%
  • Tổng cộng: 98,84%

Chỉnh sửa hài hước, tôi đã Googling cho ngược lại: không. Phủ định CSS?

selector[class]  /* the oposite of :not[]*/
— Milche P Parent
nguồn
109

Lớp :notgiả phủ định

Lớp giả CSS CSS phủ định :not(X), là một ký hiệu chức năng lấy một bộ chọn X đơn giản làm đối số. Nó phù hợp với một yếu tố không được đại diện bởi đối số. X không được chứa bộ chọn phủ định khác.

Bạn có thể sử dụng :notđể loại trừ bất kỳ tập hợp con các yếu tố phù hợp, được sắp xếp như bạn chọn các bộ chọn CSS bình thường.

Ví dụ đơn giản: loại trừ theo lớp

div:not(.class)

Sẽ chọn tất cả các divphần tử mà không có lớp.class

div:not(.class) {
  color: red;
}
<div>Make me red!</div>
<div class="class">...but not me...</div>
Mở rộng đoạn trích

Ví dụ phức tạp: loại trừ theo loại / phân cấp

:not(div) > div

Sẽ chọn tất cả các divyếu tố mà con của người khácdiv

div {
  color: black
}
:not(div) > div {
  color: red;
}
<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>
Mở rộng đoạn trích

Ví dụ phức tạp: bộ chọn chuỗi giả

Với ngoại lệ đáng chú ý là không thể xâu chuỗi / :notchọn bộ chọn và các phần tử giả, bạn có thể sử dụng kết hợp với các bộ chọn giả khác.

div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}
<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>
Mở rộng đoạn trích

Hỗ trợ trình duyệt , v.v.

:notlà một bộ chọn mức CSS3 , ngoại lệ chính về mặt hỗ trợ là IE9 +

Thông số kỹ thuật cũng làm cho một điểm thú vị:

các :not()giả cho phép selectors vô dụng phải được viết. Ví dụ :not(*|*), đại diện không có phần tử nào cả, hoặc foo:not(bar), tương đương với foonhưng với độ đặc hiệu cao hơn.

— SW4
nguồn
3
Đó là một câu trả lời siêu tốt và được kiểm tra kỹ lưỡng! #thumbsup
— Jonathan Bredo Christensen
Ok, ví dụ của bạn :not(div) > divsẽ chỉ làm việc với cha mẹ trực tiếp. Còn các ông nội khác thì sao?
— FindOut_Quran
Thông tin tuyệt vời! Đúng thứ tôi cần! Cảm ơn!
— Jamie
9

Cũng giống như đóng góp rằng các câu trả lời trên của: not () có thể rất hiệu quả ở dạng góc, thay vì tạo hiệu ứng hoặc điều chỉnh chế độ xem / DOM, 

input.ng-invalid:not(.ng-pristine) { ... your css here i.e. border-color: red; ...}

Đảm bảo rằng khi tải trang của bạn, các trường đầu vào sẽ chỉ hiển thị không hợp lệ (viền đỏ hoặc nền, v.v.) nếu chúng có dữ liệu được thêm vào (tức là không còn nguyên sơ) nhưng không hợp lệ.

— BaneStar007
nguồn
7

Thí dụ

  [class*='section-']:not(.section-name) {
    @include opacity(0.6);
    // Write your css code here
  }

// Độ mờ 0,6 tất cả "phần-" nhưng không phải "tên phần"

— Hakan
nguồn
2

Bạn có thể sử dụng :not(.class)bộ chọn như đã đề cập trước đó.

Nếu bạn quan tâm đến khả năng tương thích Internet explorer, tôi khuyên bạn nên sử dụng http://selectivizr.com/ .

Nhưng hãy nhớ chạy nó dưới apache nếu không bạn sẽ không thấy hiệu quả.

— MelkorNemesis
nguồn
3
Bạn có ý nghĩa gì khi chạy nó dưới apache? Selectivizr là một lib front end, nó không liên quan gì đến phần mềm máy chủ
— Kloar
Nó thực hiện yêu cầu ajax - không hoạt động nếu không có máy chủ http.
— MelkorNemesis
2

Sử dụng :not()lớp giả:

Để chọn tất cả mọi thứ trừ một yếu tố (hoặc yếu tố) nhất định. Chúng ta có thể sử dụng :not() lớp giả CSS . Lớp :not()giả yêu cầu một CSSbộ chọn làm đối số của nó. Bộ chọn sẽ áp dụng các kiểu cho tất cả các phần tử ngoại trừ các phần tử được chỉ định làm đối số.

Ví dụ:

/* This query selects All div elements except for   */
div:not(.foo) {
  background-color: red;
}


/* Selects all hovered nav elements inside section element except
   for the nav elements which have the ID foo*/
section nav:hover:not(#foo) {
  background-color: red;
}


/* selects all li elements inside an ul which are not odd */
ul li:not(:nth-child(odd)) { 
  color: red;
}
<div>test</div>
<div class="foo">test</div>

<br>

<section>
  <nav id="foo">test</nav>
  <nav>Hover me!!!</nav>
</section>
<nav></nav>

<br>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
Mở rộng đoạn trích

Chúng ta đã có thể thấy sức mạnh của lớp giả này, nó cho phép chúng ta tinh chỉnh thuận tiện các bộ chọn của mình bằng cách loại trừ các yếu tố nhất định. Hơn nữa, lớp giả này làm tăng tính đặc hiệu của bộ chọn . Ví dụ:

/* This selector has a higher specificity than the #foo below */
#foo:not(#bar) {
  color: red;
}

/* This selector is lower in the cascade but is overruled by the style above */
#foo {
  color: green;
}
<div id="foo">"Lorem ipsum dolor sit amet, consectetur adipiscing 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 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."</div>
Mở rộng đoạn trích

— Willem van der Veen
nguồn
0

Nếu bạn muốn một menu lớp cụ thể có CSS ​​cụ thể nếu thiếu lớp đăng nhập :

body:not(.logged-in) .menu  {
    display: none
}
— Hải Hải
nguồn
-1

Như những người khác đã nói, bạn chỉ cần đặt: không (. Class). Đối với các bộ chọn CSS, tôi khuyên bạn nên truy cập liên kết này, nó rất hữu ích trong suốt hành trình của tôi: https://code.tutsplus.com/tutorials/the-30-css-selector-you-must-memorize--net-16048

div:not(.success) {
  color: red;
}

Các lớp giả phủ định là đặc biệt hữu ích. Giả sử tôi muốn chọn tất cả các div, ngoại trừ một div có id chứa. Đoạn trích trên sẽ xử lý công việc đó một cách hoàn hảo.

Hoặc, nếu tôi muốn chọn mọi yếu tố (không được khuyên) ngoại trừ thẻ đoạn, chúng tôi có thể làm:

*:not(p) {
  color: green;
}
— HBhering
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.