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. win32 - ReadDirectoryChangesW的使用

    任务:创建一个进程,并在进程内创建一个文本,再创建另一个进程来监控第一个进程内的文本变化 //Process 1 #include <windows.h> #include <ios ...

  2. Conda简单教程

    目录 什么是Conda 安装Conda 虚拟环境管理 模块管理 何时使用Conda 什么是Conda Conda是Python中用于管理包和虚拟环境的一大利器. 使用Conda可以非常便利的使用数据科 ...

  3. Vulnhub内网渗透DC-7靶场通关

    个人博客: xzajyjs.cn DC系列共9个靶场,本次来试玩一下一个 DC-7,下载地址. 下载下来后是 .ova 格式,建议使用vitualbox进行搭建,vmware可能存在兼容性问题.靶场推 ...

  4. 如何渲染最原始的yuv视频数据？

    一.整体思路 我们在用纹理增加细节那篇文章中提到过,要将图片渲染在屏幕上,首先要拿到图片的像素数组数据,然后将像素数组数据通过纹理单元传递到片段着色器中,最后通过纹理采样函数将纹理中对应坐标的颜色值采 ...

  5. 【Azure 环境】ADAL(Azure Active Directory Authentication Library )迁移到MSAL(Microsoft Authentication Library)相关问题

    问题一:根据微软官方网站对ADAL(包含ADAL.js, ADAL.NET, ADAL4J)的声明 https://docs.microsoft.com/zh-cn/azure/active-dire ...

  6. C++特殊类的设计与单例模式

    #pragma once // 1. 设计一个不能被拷贝的类/* 解析:拷贝只会放生在两个场景中:拷贝构造函数以及赋值运算符重载,因此想要让一个类禁止拷贝, 只需让该类不能调用拷贝构造函数以及赋值运算 ...

  7. Java 多态性的使用

    1 package com.bytezreo.duotai3; 2 3 /*** 4 * 5 * @Description 练习多态性的使用 6 * @author Bytezero·zhenglei ...

  8. LTS1.3秘钥导出和身份验证计算过程

    具体的参照描述协议规范文档   TLS1.3  RCF:8446 最新一版 协议描述的密钥推导计算流程图: TLS1.3内部非复杂程度难以想象.到底CPN Tools能否支撑分析TLS,我现在从新要整 ...

  9. C 语言字符串操作总结

    C 语言字符串操作总结 一.字符串操作 size_t 是一个无符号整型. 1.1 strcpy 函数原型:char *strcpy(char *dest, const char *src). 功 能: ...

  10. 解密prompt系列26. 人类思考vs模型思考：抽象和发散思维

    在Chain of Thought出来后,出现过许多的优化方案例如Tree of thought, Graph of Thought, Algorithm of Thought等等,不过这些优化的出发 ...