【CSS3】CSS3 属性选择器 ( CSS3 简介 | 属性选择器 | 属性选择器权重 )

韩曙亮

发布于 2023-04-24 11:25:27

6550

发布于 2023-04-24 11:25:27

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

一、CSS3 简介

CSS3 是在 CSS2 基础上进行扩展后的样式 ;

在移动端对 CSS3 的支持要比 PC 端支持的更好 , 建议在移动端开发时 , 多使用 CSS3 ;

PC 端老版本浏览器不支持 CSS3 , 尤其是 IE 9 及以下的版本 , 基本无法使用 CSS3 ;

CSS3 提供了三种选择器 :

属性选择器
结构伪类选择器
伪元素选择器

二、CSS3 属性选择器权重

CSS3 提供了三种选择器 :

属性选择器
结构伪类选择器
伪元素选择器

属性选择器 , 伪类选择器的权重 , 与类选择器权重相同 , 都是 10 ;

参考【CSS】CSS 特性 ③ ( CSS 优先级 | 权重叠加计算公式 ) 本博客中的权重公式 ;

权重叠加计算公式示例 : 根据下面的基础选择器权重表格 , 进行权重叠加计算 ;

CSS 选择器	选择器优先级 - 权重计算
继承父标签的样式 , * 通配符选择器	0,0,0,0
标签选择器	0,0,0,1
类选择器 / 伪类选择器 / 属性选择器	0,0,1,0
ID 选择器	0,1,0,0
标签的行内样式 style 属性	1,0,0,0
样式后添加 !important	权重无穷大

三、CSS3 属性选择器

CSS3 属性选择器可以使用特定的 CSS 属性和属性值来选择特定的 HTML 标签元素 ;

CSS3 属性选择器 :

E[att] 选择器 : E 指的是 HTML 标签元素 , att 指的是标签中定义的属性 ; 该选择器的作用是 , 将定义了 att 属性的 E 标签都选择出来 ;
E[att=“val”] 选择器 : 选择 att 属性值为 val 的 E 标签元素 ;
E[att^=“val”] 选择器 : 选择 att 属性值为以 val 开头的 E 标签元素 ;
E[att$=“val”] 选择器 : 选择 att 属性值为以 val 结尾的 E 标签元素 ;
E[att*=“val”] 选择器 : 选择 att 属性值为包含 val 的 E 标签元素 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button[disabled] {
            /* 选择定义了 disabled 属性的 button 元素 */
            background-color: pink;
        }
        
        input[type="search"] {
            /* 选择 type 属性为 search 的 input 元素 */
            background-color: pink;
        }
        
        div[class^="icon"] {
            /* 选择 class 属性值以 icon 开头 的 div 元素 */
            background-color: yellow;
        }
        
        div[class$="age"] {
            /* 选择 class 属性值以 age 结尾 的 div 元素 */
            background-color: skyblue;
        }
        
        div[class*="pic"] {
            /* 选择 class 属性值包含 pic 的 div 元素 */
            background-color: green;
        }
    </style>
</head>

<body>
    <button>按钮</button>
    <button disabled="disabled">被禁用的按钮</button><br>

    <input type="text" name="" id="" value="文本框">
    <input type="search" name="" id="" value="搜索框"><br>

    <div class="icon1">图标1</div>
    <div class="pic2">图标2</div>
    <div class="image">图标3</div>
</body>

</html>

显示效果 :