css选择器 - 1

柔光的暖阳◎ 2023-07-04 08:50 9阅读 0赞

## \[attribute\] ##

<table> 
 <thead> 
  <tr> 
   <th>例子</th> 
   <th>例子描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>[target]</code></td> 
   <td>选择带有 target 属性所有元素。</td> 
  </tr> 
 </tbody> 
</table>

## \[attribute=value\] ##

<table> 
 <thead> 
  <tr> 
   <th>例子</th> 
   <th>例子描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>[target=_blank]</code></td> 
   <td>选择 target="_blank" 的所有元素。</td> 
  </tr> 
 </tbody> 
</table>

## \[attribute~=value\] ##

<table> 
 <thead> 
  <tr> 
   <th>例子</th> 
   <th>例子描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>[title~=flower]</code></td> 
   <td>选择 title 属性<strong>包含</strong>单词 “flower” 的所有元素。</td> 
  </tr> 
 </tbody> 
</table>

## \[attribute\*=value\] ##

<table> 
 <thead> 
  <tr> 
   <th>例子</th> 
   <th>例子描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>a[src*="abc"]</code></td> 
   <td>选择其 src 属性中包含 “abc” 子串的每个 元素。</td> 
  </tr> 
 </tbody> 
</table>

`[attribute~=value]` 和 `[attribute*=value]` 的相同点和区别：

## \[attribute|=value\] ##

<table> 
 <thead> 
  <tr> 
   <th>例子</th> 
   <th>例子描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>[lang|=en]</code></td> 
   <td>选择 lang 属性值<strong>以 “en” 开头</strong>的所有元素。</td> 
  </tr> 
 </tbody> 
</table>

## \[attribute^=value\] ##

<table> 
 <thead> 
  <tr> 
   <th>例子</th> 
   <th>例子描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>a[src^="https"]</code></td> 
   <td>选择其 src 属性值以 “https” 开头的每个 元素。</td> 
  </tr> 
 </tbody> 
</table>

`[attribute|=value]` 和 `[attribute^=value]` 的相同点和区别：

## \[attribute$=value\] ##

<table> 
 <thead> 
  <tr> 
   <th>例子</th> 
   <th>例子描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>a[src$=".pdf"]</code></td> 
   <td>选择其 src 属性以 “.pdf” 结尾的所有 元素。</td> 
  </tr> 
 </tbody> 
</table>