锐单电子商城 ， 一站式电子元器件采购平台！

  • 电话：400-990-0325

购物车

第六章 属性选择器

时间：2022-11-22 04:00:00 0871匹配哪种连接器

我们通常提到的 属性选择器 是指 [type = "radio"] 这类选择器，实际上 这是一个简称。

指的是 “属性值匹配选择器”； 正式文件：

类选择器 和 ID 都属于选择器 属性选择器。 应为本质上 类选择器 是 匹配 HTML 中 class 的属性值， ID 选择器 是 匹配 HTML 中的 Id 属性值。

ID选择器 和 类选择器

ID选择器 和 类选择器 都属于 属性选择器， 看他们的身份起来 高贵而 特殊， 毕竟 HTML 原生属性那么多， 就 id 和 class 两个属性 有专门的选择器； 实际上 正式因为他们 足够的普通 才有此待遇。几乎 所有的 HTML 元素都有 name type 这些常见属性； 但是 他两 主要出现在 控件 元素上。 如果所有的 元素 的 name 都比较 有意义的话。 相信 也会有 他两的 专属 属性选择器

ID选择器 和 类选择器 虽然性质一致， 都属于 属性选择器。 但他们的实际表现 却有明显差异

1. 语法不同

ID 选择器 前面的字符是 #， 类选择器的字符是 .

/* ID 选择器 */ #foo { } /* 类选择器 */ .foo { }

2. 优先级不同

ID 选择器 比 类选择器 优先级 高一级， 在实际开发中 以类选择器主。 所以不玩就不能有 不要使用 ID选择器

列表类容 1
  #cs-li {   color: red; } .cs-li {   color: blue; }

同时用 ID选择器 和 类选择器 设置颜色； 但是 类选择器 不能覆盖 ID选择器

3. 独特性和可重复性

ID 具有唯一性， 而 天生就有类 重复使用；

 .cs-button { } .cs-button-primary { }

但是 ID 选择器 不能这样使用

 #cs-button { }                           /* 无效 */ #cs-button-primary { }                   /* 无效 */

无论是 使用 JavaScript 的选择器 API 获取元素， 还是使用 CSS 的 ID 选择设置样式， 对于 ID， 其语义不能重复； 单实际开发的时候， 语义重复也可以；这并不影响功能

   //长度为 2 document.querySelecorAll('#cs-button').length; /* 可同时设置  按钮1 和  按钮2 的样式 */ #cs-button { }

但不建议这样使用，但不建议这样使用！ 应为 ID 选择器 主要是提供 JavaScript 使用的

属性值 选择器直接匹配：

属性值 直接匹配 选择器包括下面4 种：

  • [attr]

  • [attr="val"]

  • [attr~="val"]

  • [attr|="val"]

这四类 选择器的兼容性 都不错，前面两种 大家看的比较多。后面两种 见的人 估计少一些

[attr]

表示 只要包含指定的 属性就匹配， 特别适合一些 HTML 布尔属性， 这些布尔属性 只要有属性值！无论值的 内容是什么， 大家都认为这样的属性是 true; 例如 以下输入框的写法 都是警用:

此时， 若要使用属性选择器 判断输入框是否 禁用， 直接用下面的选择器 就可以了。 无需关系 具体属性值 到底是什么:

[disabled] {}

说到 disabled 就不得不提 另一个常见的布尔属性 checked, 两者看上去都很不错 其实也有类似 差别不小！一般不建议使用！ checked

[attr="val"]

[attr=''value''] 是属性值 选择器完全匹配， 例如单选 或者 复选框：

[type="radio"]    {} [type="checkbox"] {}

或者

    , 元素的 type 值

    /* 小写字母序号 */ ol[type="a"]  {}  /* 罗马序号小写 */ ol[type="i"] {}


menu[type="content"] {}
menu[type="toolbar"] {}

    或者自定义 属性值的 完整匹配

    [data-type="1"] {}

    其他注意事项

    （1）  不区分单引号 和 双引号， 单引号和双引号 都是合法的：

    [type="radio"] {}
[type='radio'] {}

    （2）引号都是 可以省略的： 但是 在省略 引号的时候  有空格 等 ； 需要用到 转义

    [type=radio]    {}
[type=checkbox] {}




[class=cs-button\0020cs-button-primary]
//或者
[class="cs-button cs-button-primary"]

    （3）[type=email]    [type=text]   [type=url]   [type=tel]  [type=range]  浏览差异比较大 不建议使用

    （4）如下 HTML

    


[value="20"]  {}
此时  如果我们改变 输入框的值为 10，无论是手动还是是用 javascript 更改，属性选择器都依然 按照[value="20"]渲染：

除非：我们使用 serAttribute 方法改变属性：
input.setAttribute("value",10);
此时 属性选择器会按照 [value="10"] 渲染

     

     

    [attr~="val"]

    [attr~='"val"] 是 属性值单词 完全匹配选择器， 专门用来匹配属性中的单词， 其中 ~= 用来连接属性 和 属性值。

    有些属性值 （如 class 属性，rel 属性 或者 一些自定义属性） 包含多个关键词， 这是 可以使用空格 分割这些关键词  例如：

    连接

此时 就可借助改 选择器实施匹配  例如：
[rel~="noopener"] {}
[rel~="nofollow"] {}

    匹配的属性值 不能是 空字符串； 例如下面这种选择器 一定 不会匹配任何元素； 应为它的属性值 是空的 字符串：

    /*  无任何匹配 */
[rel~=""] { }

    如何匹配的属性值 只是部分字符串， 那么也是无效的。 例如 假设有选择器 [arrt~="val"], 则下面两段  HTML 都不匹配：

    但是  如果字符串 前后 有空格 或者连续多个 空格分隔； 则可匹配

    另外， 属性值  单词完全匹配选择器对 非ASC|| 范围的字符（如中文） 也是有效的 例如：

    [attr~=帅] {}

下面的 HTML 是可以匹配的：


    我是帅锅

     

    使用场景及优势：

    属性值 单词完全匹配选择器 非常适合包含多种组合属性的场景， 例如：

    此时，最佳实践就是 使用属性值单词完全匹配选择器：

    [data-align]            { left:50%; top:50%; }
[data-align~="top"]     { top:0; }
[data-align~="right"]   { right:0; }
[data-align~="bottom"]  { bottom:0; }
[data-align~="left"]    { left:0; }

    这样的 CSS 代码 足够精简 且互不干扰，有专门命名空间 代码可读性强  且选择器的 优先级和类名 一致 很好管理

     

    [attr|="val"]

    [attr|="val"]  是属性值  起始片段完全匹配 选择器，表示 具有 attr 属性的元素， 其值要么 正好是 val, 要么外加 短横线 - 开头

    

    



    



    

---------------------------------------------------------------------

    这个选择器 必须 严格遵循 开头匹配的规则

    另外这个 选择器 最初设计初衷是 自语言匹配， 用在元素的  hrelang  属性

 

 

 

 

相关文章