Sự khác biệt giữa * và * | * trong CSS là gì?

Trong CSS, *sẽ phù hợp với bất kỳ yếu tố nào.

Thường xuyên, *|*được sử dụng thay vì *để phù hợp với tất cả các yếu tố. Điều này thường được sử dụng cho mục đích thử nghiệm.

Sự khác biệt giữa *và *|*trong CSS là gì?

Theo Thông số chọn W3C :

Bộ chọn phổ quát cho phép một thành phần không gian tên tùy chọn. Nó được sử dụng như sau:

ns|*
tất cả các phần tử trong không gian tên ns

*|*
tất cả các yếu tố

|*
tất cả các yếu tố không có không gian tên

*
nếu không có không gian tên mặc định đã được chỉ định, thì điều này tương đương với * | *. Mặt khác, nó tương đương với ns | * trong đó ns là không gian tên mặc định.

Vì vậy, không *và *|*không phải lúc nào cũng giống nhau. Nếu một không gian tên mặc định được cung cấp thì *chỉ chọn các phần tử là một phần của không gian tên đó.

Bạn có thể thấy sự khác biệt bằng cách sử dụng hai đoạn dưới đây. Đầu tiên, một không gian tên mặc định được xác định và do đó, *bộ chọn chỉ áp dụng nền màu be cho phần tử là một phần của không gian tên đó trong khi *|*áp dụng đường viền cho tất cả các phần tử.

@namespace "http://www.w3.org/2000/svg";

* {
  background: beige;
}
*|* {
  border: 1px solid;
}

<a href="#">This is some link</a>

<svg xmlns="http://www.w3.org/2000/svg">
  <a xlink:href="#">
    <text x="20" y="20">This is some link</text>
  </a>
</svg>

Trong đoạn mã dưới đây, không có không gian tên mặc định nào được xác định và do đó cả hai *và *|*áp dụng cho tất cả các thành phần và vì vậy tất cả chúng đều có cả nền màu be và viền đen. Nói cách khác, chúng hoạt động theo cùng một cách khi không có không gian tên mặc định được chỉ định.

* {
  background: beige;
}
*|* {
  border: 1px solid;
}

<a href="#">This is some link</a>

<svg xmlns="http://www.w3.org/2000/svg">
  <a xlink:href="#">
    <text x="20" y="20">This is some link</text>
  </a>
</svg>

Như BoltClock chỉ ra trong các nhận xét ( 1 , 2 ), các không gian tên ban đầu chỉ được áp dụng cho các ngôn ngữ dựa trên XML như XHTML, SVG, v.v. nhưng theo thông số kỹ thuật mới nhất, tất cả các thành phần HTML (nghĩa là các thành phần trong không gian tên HTML) được đặt tên theo http://www.w3.org/1999/xhtml. Firefox tuân theo hành vi này và nó nhất quán trên tất cả các tác nhân người dùng HTML5. Bạn có thể tìm thêm thông tin trong câu trả lời này .

*|*đại diện cho bộ chọn "tất cả các thành phần trong bất kỳ không gian tên nào". Theo W3C , bộ chọn được chia thành:

ns | E

Trong đó ns là không gian tên và E là phần tử. Theo mặc định, không có không gian tên được khai báo. Vì vậy, trừ khi một không gian tên được khai báo rõ ràng *|*và *sẽ chọn các phần tử giống nhau.

Trong CSS, * sẽ khớp với bất kỳ yếu tố nào.

| được sử dụng để phù hợp với các yếu tố cụ thể chọn . Cả hai đều được chọn sử dụng cho mục đích thử nghiệm của chúng tôi