4 属性选择器

属性选择器是通过元素的属性及属性值来选择元素的。下面介绍属性选择器的用法。

  1. 第一种用法
作用：选择含有指定属性的元素。

语法：[属性名]{}

示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>属性选择器</title>

    <style>

        input[type]{

            border: 1px solid red;

        }

    </style>

</head>

<body>

用户名：<input type="username">

密 码：<input type="password">

<br>

数据量：<input id="count">

</body>

</html>

运行结果：

  1. 第二种用法
作用：选择含有指定属性及指定属性值的元素。

语法：[属性名=属性值]{}

示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>属性选择器</title>

    <style>

        input[type="username"]{

            border: 1px solid blue;

        }

        input[type="password"]{

            border: 1px solid red;

        }

    </style>

</head>

<body>

用户名：<input type="username">

密 码：<input type="password">

<br>

数据量：<input type="count">

</body>

</html>

运行结果：

  1. 第三种用法
作用：选择含有指定属性及指定属性之开头的元素。

语法：[属性名^=属性值]{}

示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>属性选择器</title>

    <style>

        /*

        第一种方法：选择含有指定属性的元素。

            语法：[属性名]{}

        */

        input[type="username"]{

            border: 1px solid blue;

        }

        /*

        第二种用法：选择含有指定属性及指定属性值的元素。

            语法：[属性名=属性值]{}

        */

        input[type="password"]{

            border: 1px solid red;

        }

        /*

        第三种用法：选择含有指定属性及指定属性之开头的元素。

            语法：[属性名^=属性值]{}

        */

        div[id^="tit"]{

            color: red;

        }

        div[id^="sala"]{

            color: blueviolet;

        }

    </style>

</head>

<body>

用户名：<input type="username">

密 码：<input type="password">

<br>

数据量：<input type="count">

<div id="title">生而自由, 爱而无畏</div>

<div id="salary">5万元</div>

<div id="proname">大项目</div>

</body>

</html>
  1. 第四种用法
作用：选择含有指定属性及指定属性值结尾的元素。

语法：[属性名$=属性值]


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>属性选择器</title>

    <style>

        /*

        第一种方法：选择含有指定属性的元素。

            语法：[属性名]{}

        */

        input[type="username"]{

            border: 1px solid blue;

        }

        /*

        第二种用法：选择含有指定属性及指定属性值的元素。

            语法：[属性名=属性值]{}

        */

        input[type="password"]{

            border: 1px solid red;

        }

        /*

        第三种用法：选择含有指定属性及指定属性之开头的元素。

            语法：[属性名^=属性值]{}

        */

        div[id^="tit"]{

            color: red;

        }

        div[id^="sala"]{

            color: blueviolet;

        }

        /*

        第四种用法：选择含有指定属性及指定属性之开头的元素。

            语法：[属性名^=属性值]{}

        */

    </style>

</head>

<body>

用户名：<input type="username">

密 码：<input type="password">

<br>

数据量：<input type="count">

<div id="title">生而自由, 爱而无畏</div>

<div id="salary">5万元</div>

<div id="proname">大项目</div>

</body>

</html>

执行结果：

  1. 第五种用法
作用：选择含有指定属性，只要含有某个属性值的元素。

语法：[属性值*=属性名]{}


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>属性选择器</title>

    <style>

        /*

        第一种方法：选择含有指定属性的元素。

            语法：[属性名]{}

        */

        input[type="username"]{

            border: 1px solid blue;

        }

        /*

        第二种用法：选择含有指定属性及指定属性值的元素。

            语法：[属性名=属性值]{}

        */

        input[type="password"]{

            border: 1px solid red;

        }

        /*

        第三种用法：选择含有指定属性及指定属性之开头的元素。

            语法：[属性名^=属性值]{}

        */

        div[id^="tit"]{

            color: red;

        }

        div[id^="sala"]{

            color: blueviolet;

        }

        /*

        第四种用法：选择含有指定属性及指定属性之开头的元素。

            语法：[属性名^=属性值]{}

        */

        div[id$="name"]{

            color: orange;

        }

        /*

        第五种用法：选择含有指定属性，只要含有某个属性值的元素。

            语法：[属性值*=属性名]{}

        */

        [title*="login"]{

            background-color: #616161;

        }

    </style>

</head>

<body>

用户名：<input type="username" title="login">

密 码：<input type="password" title="login">

<br>

数据量：<input type="count">

<div id="title">生而自由, 爱而无畏</div>

<div id="salary">5万元</div>

<div id="proname" title="project">大项目</div>

</body>

</html>

执行结果：

总结如下：

E[att]          匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。

                比如“[cheacked]”。以下同。）   p[title] { color:#f00; }

E[att=val]      匹配所有att属性等于“val”的E元素   div[class=”error”] { color:#f00; }

E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素

                td[class~=”name”] { color:#f00; }

E[attr^=val]    匹配属性值以指定值开头的每个元素

                div[class^="test"]{background:#ffff00;}

E[attr$=val]    匹配属性值以指定值结尾的每个元素    div[class$="test"]{background:#ffff00;}

E[attr*=val]    匹配属性值中包含指定值的每个元素    div[class*="test"]{background:#ffff00;}

4 CSS属性选择器的更多相关文章

  1. IE7浏览器下CSS属性选择器二三事

    一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...

  2. CSS 属性选择器的深入挖掘

    CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...

  3. CSS：CSS 属性 选择器

    ylbtech-CSS:CSS 属性 选择器 1.返回顶部 1. CSS 属性 选择器 具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id. 注意:IE7和IE8需 ...

  4. CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别

    CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别 总结: "value 是完整单词" 类型的比较符号: ~=, |= "拼接字符串" 类型的比较 ...

  5. CSS属性选择器温故-4

    1.属性选择器就是通过元素属性来找到元素 2.属性选择器语法 CSS3遵循了惯用的编码规则,通配符的使用提高了样式表的书写效率,也使CSS3的属性选择器更符合编码习惯 3.浏览器兼容性 CSS选择器总 ...

  6. CSS 属性选择器(八)

    一.属性选择器 属性选择使用中括号进行标识,中括号内包含属性名,属性值或者属性表达式 如h1[title],h1[title="Logon"], 二.属性选择器分类 2.1.匹配属 ...

  7. CSS笔记（二）CSS属性选择器

    对带有指定属性的HTML元素设置样式. 参考: http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp 选择器 描述 [att ...

  8. 前端学习 -- Css -- 属性选择器

    属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]: ...

  9. 使用这些 CSS 属性选择器来提高前端开发效率

    属性选择器非常神奇.它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题.但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用.在本文中,我们将讨论它们是如何运行的,并 ...

  10. css 属性选择器

    css2的属性选择器 1.[class~="flower"]:选中有flower的class class="flower ss" class="ss ...

随机推荐

  1. 【Android 逆向】【ARM汇编】 arm64部分知识

    arm64寄存器更多 X0-X30 SP CPSR PC 64位 W0-W30 32位 PC寄存器的值禁止修改 参数放在 X0-X7/W0-W7 结果放在 X0 函数返回 RET 相当于 bl lr ...

  2. 使用SecScanC2构建P2P去中心化网络实现反溯源

    个人博客: xzajyjs.cn 前言 这款工具是为了帮助安全研究人员在渗透测试过程中防止扫描被封禁.保护自己免溯源的一种新思路.其利用到了区块链中的p2p点对点去中心化技术构建以来构建代理池. 工具 ...

  3. 【Azure 应用服务】App Service 默认开放端口说明, 如何禁用Web app的端口号？ 

    问题描述 基于安全的角度来考虑,在网站上线之前用户会对自己的网站进行安全扫描,以防网站因为某些漏洞而被非法攻击. 而在扫描过程中,会发现除了 80 和 443 之外的一些其他端口也被开放了.例如:45 ...

  4. C#多线程(5)：资源池限制

    目录 Semaphore.SemaphoreSlim 类 Semaphore 类 示例 示例说明 信号量 SemaphoreSlim类 示例 区别 Semaphore.SemaphoreSlim 类 ...

  5. Linux 多进程服务配置 systemd

    目录 Linux 多进程服务配置 systemd sysvinit和systemd 多进程保活 创建配置文件(设定重试次数) 多进程服务管理 链式启动(服务依赖) 指定关闭进程方式 - ExecSto ...

  6. C++ //deque容器 构造函数 //deque赋值操作 //deque大小操作 //重新指定大小 //deque没有容量概念 //deque插入和删除 //deque 容器数据存取 ////deque 排序 sotr算法

    1 //deque容器 构造函数 //deque赋值操作 //deque大小操作 //重新指定大小 2 //deque没有容量概念 //deque插入和删除 //deque 容器数据存取 3 //// ...

  7. Codeforces Round 770 (Div. 2)（数学异或奇偶性）

    B. Fortune Telling 拿到题目看数据范围之后就知道暴力显然是来不及的. 那么只能找性质. \(考虑x和x+3的不同 \quad 奇偶性不同\) \(然后考虑两种操作对于一个数的奇偶性的 ...

  8. WPF之XAML语法

    目录 树形结构 对象属性赋值语法 使用标签的Attribute 使用属性元素 扩展:标记扩展(Markup Extensions) 扩展:使用TypeConverter 类映射Atribute与Pro ...

  9. ESP8266 SPI 开发之软件驱动代码分析

    一 基本概述 esp8266的SPI代码流程非常的清晰,主要有三部分构成: spi_init 配置 spi_trans 配置 data_transfer 配置这三块组成. 在这里,笔者就针对spi的这 ...

  10. day28--Java泛型01

    Java泛型01 1.泛型的理解和好处 看一个需求: 请编写程序,在ArrayList中添加三个Dog对象 Dog对象含有name和age,并输出name和age(要求使用getXXX()) 先用传统 ...