CSS3-属性选择器

蔚落 2023-07-02 03:19 9阅读 0赞

#### 属性选择器 ####

通过标签中存在的属性来选择特定的 HTML 元素

语法：

`element[Attribute_Name]`

*  `element` HTML 元素
 *  `Attribute_Name` 属性名

<table> 
 <thead> 
  <tr> 
   <th align="left">分类</th> 
   <th align="left">描述</th> 
   <th align="left">示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">E[att]</td> 
   <td align="left">选择属性为 att 的 E 元素</td> 
   <td align="left">input[name]</td> 
  </tr> 
  <tr> 
   <td align="left">E[att = “val”]</td> 
   <td align="left">选择 att 的属性值为 val 的 E 元素</td> 
   <td align="left">input[autocomplete=“on”]</td> 
  </tr> 
  <tr> 
   <td align="left">E[att^=“val”]</td> 
   <td align="left">选择具有 att 属性且属性值以 val 开头的 E 元素</td> 
   <td align="left">input[class^=“first”]</td> 
  </tr> 
  <tr> 
   <td align="left">E[att$=“val”]</td> 
   <td align="left">选择具有 att 属性且属性值以 val 结尾的 E 元素</td> 
   <td align="left">input[class$=“last”]</td> 
  </tr> 
  <tr> 
   <td align="left">E[att*=“val”]</td> 
   <td align="left">选择具有 att 属性且属性值含有 val 的 E 元素</td> 
   <td align="left">div[class*=“left”]</td> 
  </tr> 
  <tr> 
   <td align="left">E[att~=“val”]</td> 
   <td align="left">选择具有 att 属性且属性值为 val 或val与多个属性值用空格隔开的 E 元素</td> 
   <td align="left">a[class~=“red”]</td> 
  </tr> 
  <tr> 
   <td align="left">E[att|=“val”]</td> 
   <td align="left">选择具有 att 属性且属性值为 val 或属性值之间用 “-” 隔开且属性值val在 “-” 前的 E 元素</td> 
   <td align="left">a[class|=“red”]</td> 
  </tr> 
 </tbody> 
</table>

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3-属性选择器

属性选择器通过标签中存在的属性来选择特定的 HTML 元素语法： `element[Attribute_Name]` `element` HTML 元素

蔚落/ 2023年07月02日 03:19/ 0 赞/ 10 阅读

相关 css 属性选择器_CSS选择器：属性选择器

css 属性选择器 ![cssmasterthumb][] The following is an extract from our book, [CSS Master][

本是古典何须时尚/ 2022年12月03日 09:59/ 0 赞/ 338 阅读

相关 css3属性选择器

下面的介绍都已p元素为例来写： 1. p\[target\] 选择出有target属性的所有p元素 2. p\[target=\_blank\] 选择出 targ

左手的ㄟ右手/ 2022年11月15日 11:25/ 0 赞/ 224 阅读

相关 CSS 属性选择器

attribute 表示属性，诸如 id、class、role 等，自定义的属性也可以。 value 表示对应值。 \[attribute=value\] 选择器用

旧城等待，/ 2022年09月26日 03:11/ 0 赞/ 266 阅读

相关 css3属性选择器

1.css3属性选择器 E\[attr^=’val’\] 属性attr的值为以‘val’开头的元素 E\[attr$=’val’\]属性attr的值为以 ‘val’结尾

Dear 丶/ 2022年07月27日 10:50/ 0 赞/ 262 阅读

相关 CSS3 选择器——属性选择器

上一切在《[CSS3选择器——基本选择器][CSS3]》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CS

淡淡的烟草味﹌/ 2022年06月10日 05:24/ 0 赞/ 391 阅读

相关 CSS3 选择器——基本选择器

[CSS的选择器][CSS]，我想大家并不会陌生吧，因为天天在使用，但对于[CSS3的选择器][CSS]，要运用的灵活到位，我想对很多朋友还是一定的难度，特别是CSS3中的:n

我就是我/ 2022年06月10日 05:24/ 0 赞/ 423 阅读

相关 CSS属性选择器

属性选择器：基本选择器\[ 属性 \] \[属性 = 值\] \[属性 ~= 值\] 这个属性包含这个值就行 id = “123 ww” \[id ~= ww\

待我称王封你为后i/ 2022年04月03日 12:13/ 0 赞/ 295 阅读

相关 CSS3 选择器

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。） <tabl

阳光穿透心脏的1/2处/ 2022年01月30日 16:11/ 0 赞/ 306 阅读

相关 CSS3选择器

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 文章目录 1.介绍 2.选择器

野性酷女/ 2021年12月10日 03:25/ 0 赞/ 370 阅读