速查表

• CSS选择器速查表
• 优先级

基本概念

• attribute 是html tag上的属性名 比如 class，lang，id

属性选择器

[attribute]

• element[attribute]意思是找所有具有指定attribute的指定element
• [attribute]意思是找所有具有指定attribute的不限element

[attribute|=value] VS [attribute^=value]

• 两者都必须是以value作为attribute的开头，务必是开头
  • 关键词是en ，那么"1en"这种就根本不是开头
• |= 要求需要必须是严格相等
• ^= 要求是模糊相等即可 attribute以class为例

[class|="en"] ===> 1. class="en" 2. class="en-1" 3. class="en-abc"
[class^="en"] ===> 1. class="en" 2. class="en1"

[attribute$=value]

• 以value结尾的attribute

[class$="test"] ===> 1. class="first_test" 2. class="1test"

[attribute~=value] VS [attribute*=value]

• 都表示含有value
• ~=是严格相等， 而*=则是模糊相等

[title~=flower] ===> 1. title="klematis flower" √ 
===> 2. title="flowers" ×

[title*=flower] ===> 1. title="klematis flower" √ 
===> 2. title="flowers"  √