CSS không hoạt động

Tôi không làm việc nhiều với CSS, nhưng bất cứ khi nào tôi làm, tôi liên tục bị choáng ngợp bởi CSS hiện đại dễ dàng hơn nhiều so với 5 năm trước

Tôi đang thực hiện một dự án phụ vào cuối tuần này và bộ chọn giả :not() đã giúp cuộc sống của tôi dễ dàng hơn rất nhiều

Bộ chọn giả :not() làm gì

Bộ chọn giả :not() cho phép bạn chọn các phần tử, nhưng loại trừ những phần tử phù hợp với một bộ bộ chọn bổ sung. Chuyển vào bộ chọn để bỏ qua làm đối số

Ví dụ: điều này sẽ làm cho các liên kết có màu tím, nhưng không làm cho các liên kết có lớp .not-purple

a:not(.not-purple) {
	color: rebeccapurple;
}

<a href="#">I will be purplea>
<a class="not-purple" href="#">I will be my normal colora>

Một ví dụ thực tế

Ví dụ: dự án phụ của tôi có các lớp .app-logged-in và .app-logged-out hiển thị hoặc ẩn các phần tử tùy thuộc vào việc phần tử cha

<a href="#">I will be purplea>
<a class="not-purple" href="#">I will be my normal colora>

0 có lớp

<a href="#">I will be purplea>
<a class="not-purple" href="#">I will be my normal colora>

1 trên đó hay không

Trong lịch sử, nó trông như thế này

.is-logged-in .app-logged-out,
.app-logged-in {
	display: none;
}

.is-logged-in .app-logged-in {
	display: block;
}

Ở đây, tôi đang đặt các thành phần của mình thành không hiển thị, sau đó buộc chúng hiển thị lại khi đáp ứng một số điều kiện nhất định

Sử dụng :not(), tôi có thể đơn giản hóa mẫu này. Thay vì ẩn phần tử .app-logged-in theo mặc định và hiển thị nó nếu có

<a href="#">I will be purplea>
<a class="not-purple" href="#">I will be my normal colora>

1, tôi chỉ có thể ẩn nó nếu lớp

<a href="#">I will be purplea>
<a class="not-purple" href="#">I will be my normal colora>

1 không có trên phần tử

<a href="#">I will be purplea>
<a class="not-purple" href="#">I will be my normal colora>

0

Trong CSS, chúng ta thường cần ký vào bài đăng mà chúng ta muốn chọn một phần tử, nhưng không phải trong các trường hợp cụ thể - chẳng hạn như nếu phần tử đó có một lớp nhất định. Trong những trường hợp này, chúng ta có thể sử dụng bộ chọn :not() để làm điều đó. Hãy xem nó hoạt động như thế nào

CSS không phải bộ chọn

Bộ chọn CSS :not() được hầu hết các trình duyệt hỗ trợ rộng rãi. Cách nó hoạt động là chúng ta tạo một bộ chọn, sau đó chỉ định nó không nên là gì. Ví dụ: giả sử bạn có HTML sau

________số 8_______

Chúng tôi có một loạt các div ở đây và một số không nên có màu đỏ. Nếu chúng ta muốn tất cả các div nói chung trên trang của chúng ta có màu đỏ, ngoại trừ các phần tử

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

1, thì chúng ta có thể sử dụng

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

2 để đảm bảo chúng vẫn không có màu đỏ

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

Đây là một ví dụ khác. Theo mặc định, tất cả các thành phần sẽ có phông chữ Arial - ngoại trừ các thành phần

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

3

<div class="old-fashioned">Old Fashioned Textdiv>
<div>Some Textdiv>

CSS của chúng tôi, nơi chỉ các phần tử không phải

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

3 sử dụng phông chữ Arial, trông như thế này

div:not(.old-fashioned) {
    font-family: Arial, sans-serif;
}

CSS không phải bộ chọn Tăng tính đặc hiệu

Bạn có thể đã quen với khái niệm về tính đặc hiệu trong CSS, trong đó một số bộ chọn nhất định “ghi đè” những bộ chọn khác. Ví dụ: một

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

5 có độ đặc hiệu thấp hơn một

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

6, do đó, mọi thuộc tính CSS của

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

6 sẽ ghi đè lên các thuộc tính của

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

5 trên cùng một phần tử

Bộ chọn

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

9 cũng ảnh hưởng đến tính đặc hiệu. Ví dụ: nếu bạn có

<div class="old-fashioned">Old Fashioned Textdiv>
<div>Some Textdiv>

0 trong mã của mình, mã đó vẫn được tính là có

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

6, do đó, độ đặc hiệu sẽ tăng lên nếu mã đó có

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

6. Điều này rất hữu ích để ghi nhớ khi sử dụng :not()

CSS không phải Bộ chọn và cấu trúc DOM

Một điều khó hiểu về :not(), là khi bạn cố gắng sử dụng nó để ngăn các kiểu áp dụng cho những thứ bên trong phần tử. Ví dụ: giả sử bạn có HTML sau

<div class="container">
    <form>
        <div class="input-element">
            <input type="text" />
        div>
    form>
    <div class="input-element">
        <input type="text" />
    div>
div>

Giả sử bạn chỉ muốn áp dụng một kiểu cho các phần tử

<div class="old-fashioned">Old Fashioned Textdiv>
<div>Some Textdiv>

5 không nằm trong các phần tử

<div class="old-fashioned">Old Fashioned Textdiv>
<div>Some Textdiv>

6. Đơn giản, phải không?

div :not(form) input {
    border: 2px solid red;
}

Chỉ điều này sẽ không hoạt động và lý do tại sao :not() đó được áp dụng ở mọi cấp độ - và chúng tôi gói gọn từng đầu vào trong

<div class="old-fashioned">Old Fashioned Textdiv>
<div>Some Textdiv>

8. Điều đó có nghĩa là

<div class="old-fashioned">Old Fashioned Textdiv>
<div>Some Textdiv>

9 được áp dụng cho

<div class="old-fashioned">Old Fashioned Textdiv>
<div>Some Textdiv>

8, và nó thực sự không phải là một hình thức. Vì vậy, cả hai phần tử

<div class="old-fashioned">Old Fashioned Textdiv>
<div>Some Textdiv>

5 sẽ có viền đỏ. Để tránh điều đó, bạn cần xóa phần tử bao bọc và đặt đầu vào là phần tử con trực tiếp của biểu mẫu

<div class="container">
    <form>
        <input type="text" />
    form>
    <input type="text" />
div>

Bằng cách đó, đầu vào trong biểu mẫu, sẽ không kế thừa các kiểu từ

div:not(.old-fashioned) {
    font-family: Arial, sans-serif;
}

2

Hỗ trợ CSS không phải bộ chọn

Điều quan trọng cần lưu ý là có hai phiên bản của bộ chọn :not() - một phiên bản chỉ chấp nhận một bộ chọn CSS đơn giản, duy nhất và bản cập nhật mới hơn cho :not() chấp nhận bất kỳ bộ chọn CSS nào

Tất cả các trình duyệt đều hỗ trợ các bộ chọn :not() đơn, đơn giản, giống như những bộ chọn chúng tôi đã sử dụng cho đến nay, bao gồm cả Internet Explorer. Tuy nhiên, không phải tất cả các trình duyệt đều hỗ trợ bộ chọn phức tạp. Với các bộ chọn đơn giản trong

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

9, bạn có thể thực hiện tất cả những việc sau

• div:not(.old-fashioned) {
      font-family: Arial, sans-serif;
  }
  

  7

• div:not(.old-fashioned) {
      font-family: Arial, sans-serif;
  }
  

  8

• div:not(.old-fashioned) {
      font-family: Arial, sans-serif;
  }
  

  9

• <div class="container">
      <form>
          <div class="input-element">
              <input type="text" />
          div>
      form>
      <div class="input-element">
          <input type="text" />
      div>
  div>
  

  0

Tuy nhiên, những thứ như sau chỉ khả dụng với các bộ chọn phức tạp

• <div class="container">
      <form>
          <div class="input-element">
              <input type="text" />
          div>
      form>
      <div class="input-element">
          <input type="text" />
      div>
  div>
  

  1

• <div class="container">
      <form>
          <div class="input-element">
              <input type="text" />
          div>
      form>
      <div class="input-element">
          <input type="text" />
      div>
  div>
  

  2

• <div class="container">
      <form>
          <div class="input-element">
              <input type="text" />
          div>
      form>
      <div class="input-element">
          <input type="text" />
      div>
  div>
  

  3

May mắn thay, hỗ trợ cho các bộ chọn phức tạp vẫn còn khá cao. Trình duyệt duy nhất không hỗ trợ bộ chọn phức tạp hiện nay là Internet Explorer và một số trình duyệt di động

Cái nào không phải là loại bộ chọn của CSS?

Những gì không phải là giả

Cách thêm giả

Empty có phải là trạng thái nút trong CSS không?