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 - SetWinEventHook的用法

    #include <Windows.h> #include <iostream> #include <thread> #include <tchar.h> ...

  2. 分发函数singledispatch

    import functools @functools.singledispatch() def myfunc(arg): print("default myfunc({!r})" ...

  3. python selenium list index out of range

    常见错误原因 常见错误原因 其他错误原因 场景 使用selenium循环打开并跳转到新的网页,然后关闭新的窗口,然后回到原来窗口,这时候获取list中的值,报错: list index out of ...

  4. python部署-nginx部署带docker的https请求

    使用带docker的服务器配置https需要两层web服务器 首先例如使用https://www.Se7eN_HOU.com进行首页访问,首先会先进入到主服务器里面,经过主服务器的Nginx Web服 ...

  5. 【Azure 存储服务】存储在Azure Storage Table中的数据，如何按照条件进行删除呢？

    问题描述 如何按条件删除 Storage Table 中的数据,如果Table中有大量的条记录需要删除,Java代码如何按条件删除 Table中的数据(Entity)? (通过Azure Storag ...

  6. docker 安装 es-head 以及Content-Type header请求头错误解决

    拉取es-head镜像,启动 docker pull mobz/elasticsearch-head:5 docker run -itd --name es-head -p 9100:9100 mob ...

  7. Linux 系统错误码 errno 剖析

    一.errno 介绍 1.1 errno 简介 Linux 中系统调用的错误都存储于错误码 errno 中.errno 由操作系统维护,存储就近发生的错误,即下一次的错误码会覆盖掉上一次的错误. er ...

  8. 一个简易的ORM框架的实现(一)

    一个简易的ORM框架的实现 ORM ORM---操作数据库---对象关系映射 ORM(Object Relational Mapping)框架采用元数据来描述对象与关系映射的细节.只要提供了持久化类与 ...

  9. 【leetcode 1799 N次操作后的最大分数和】状态压缩

    回溯会超时,状态压缩 class Solution { public int maxScore(int[] nums) { int len = nums.length; int size = 1 &l ...

  10. 崩溃bug日志总结1

    目录介绍 1.1 java.lang.UnsatisfiedLinkError找不到so库异常 1.2 java.lang.IllegalStateException非法状态异常 1.3 androi ...