CSS'de * ve * | * arasındaki fark nedir?

CSS'de, *herhangi bir öğeyle eşleşir.

Sıklıkla, tüm öğelerin eşleşmesi *|*yerine kullanılır *. Bu genellikle test amacıyla kullanılır.

CSS arasındaki *ve *|*CSS arasındaki fark nedir ?

Gereğince W3C Seçici Spec :

Evrensel seçici, isteğe bağlı bir ad alanı bileşenine izin verir. Aşağıdaki gibi kullanılır:

ns|*
ad alanındaki tüm öğeler ns

*|*
tüm elemanlar

|*
ad alanı olmayan tüm öğeler

*
varsayılan bir ad alanı belirtilmemişse, bu * | * ile eşdeğerdir. Aksi takdirde ns | * ile eşdeğerdir; burada ns varsayılan ad alanıdır.

Yani, hayır *ve *|*her zaman aynı değildir. Varsayılan bir ad alanı sağlanmışsa, *yalnızca o ad alanının bir parçası olan öğeleri seçer.

Aşağıdaki iki parçacığı kullanarak farklılıkları görsel olarak görebilirsiniz. *İlkinde varsayılan bir ad alanı tanımlanır ve böylece seçici bej renkli arka planı yalnızca bu ad alanının bir parçası olan öğeye uygularken *|*, kenarlık tüm öğelere uygulanır.

@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>

Aşağıda hiçbir varsayılan ad alanı tanımlanmış ve ikisi de çok olduğu pasajı *ve *|*tüm hususlar için de geçerlidir ve hepsi bu kadar bej arka plan ve siyah kenarlık hem olsun. Başka bir deyişle, varsayılan bir ad alanı belirtilmediğinde aynı şekilde çalışırlar.

* {
  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>

BoltClock'un yorumlarda ( 1 , 2 ) işaret ettiği gibi, başlangıçta yalnızca XHTML, SVG vb http://www.w3.org/1999/xhtml. Firefox bu davranışı izler ve tüm HTML5 kullanıcı aracılarında tutarlıdır. Bu cevapta daha fazla bilgi bulabilirsiniz .

*|*"herhangi bir ad alanındaki tüm öğeler" seçicisini temsil eder. W3C'ye göre , seçici ayrılmıştır:

ns | E

Burada ns ad alanı ve E ise elementtir. Varsayılan olarak hiçbir ad alanı bildirilmez. Dolayısıyla, bir ad alanı açıkça bildirilmedikçe *|*ve *aynı öğeleri seçecektir.

CSS'de * herhangi bir öğeyle eşleşir.

| , belirli öğeleri seçmek için kullanılır . Her ikisi de test amacımız için kullanılan seçicidir