属性选择器，字面意思就是根据标签中的属性，选中当前的标签。

属性选择器 通常在表单控件中 使用比较多

根据属性查找

  1. /*用于选取带有指定属性的元素。*/
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Title</title>
  8.     <style type="text/css">
  9.         label[for]{
  10.             color: red;
  11.         }
  12.     </style>
  13.  
  14. </head>
  15. <body>
  16.     <div>
  17.         <form>
  18.             <div>
  19.                 <label for="user">用户名</label>
  20.                 <input type="text" id="user">
  21.             </div>
  22.  
  23.         </form>
  24.     </div>
  25. </body>
  26. </html>

根据属性和值查找

  1. /*用于选取带有指定属性和值的元素。*/
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Title</title>
  8.     <style type="text/css">
  9.         label[for="user"]{
  10.             color: red;
  11.         }
  12.     </style>
  13.  
  14. </head>
  15. <body>
  16.     <div>
  17.         <form>
  18.             <div>
  19.                 <label for="user">用户名</label>
  20.                 <input type="text" id="user">
  21.             </div>
  22.  
  23.         </form>
  24.     </div>
  25. </body>
  26. </html>

表单常用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Title</title>
  8.     <style type="text/css">
  9.         input[type="text"]{
  10.             color: red;
  11.         }
  12.     </style>
  13.  
  14. </head>
  15. <body>
  16.     <div>
  17.         <form>
  18.             <div>
  19.                 <label for="user">用户名</label>
  20.                 <input type="text" id="user">
  21.             </div>
  22.  
  23.         </form>
  24.     </div>
  25. </body>
  26. </html>

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

  1. CSS 选择器之基本选择器 属性选择器 伪类选择器

    CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.classNa ...

  2. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  3. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  4. 第49天学习打卡（CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型）

    推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...

  5. CSS选择器之基本选择器+属性选择器

    1.1      id选择器 #main{ font-size:12px; margin:0; padding:0; } 其中的#main就是id选择器,用于选择HTML页面中id = "m ...

  6. CSS-id选择器-类选择器-属性选择器

    Css基础 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 每个属性有一个值.属性和值被冒号分开. 下 ...

  7. CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）

    1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ]   选择具有 att 属性的 E 元素   例如:input [ value ...

  8. HTML[2种特殊选择器]_伪类选择器&属性选择器

    本文介绍两种特殊的选择器 1.伪类选择器 2.属性选择器 1.伪类选择器 ...: nth-of -type (x) x为同类型兄弟元素中的排名 例如: <body> <ul> ...

  9. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

随机推荐

  1. Python format格式化时使用‘’{‘’或者‘’}‘’

    用format格式化时,如果其中要用到‘’{‘’或者‘’}‘’,需要进行转义,否则报错 {{  ,}}使用同样的符号实现转义,而不是‘/’

  2. 牛客练习赛33 B tokitsukaze and RPG （类埃筛）

    链接:https://ac.nowcoder.com/acm/contest/308/B 来源:牛客网 tokitsukaze and RPG 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/ ...

  3. jquery.fancybox.js 解决只加载一次的问题

    问题描述:有一块图片区域,页面第一次加载的时候jQuery(".fancybox-button").fancybox({}); 使用ajax上传成功后显示在图片区域,再次jQuer ...

  4. java术语（PO/POJO/VO/BO/QO/DAO/DTO）

    一.概念理解 ​ 这些概念用于描述对象的类型:由于java是面向对象的语言:程序的世界就是各个对象之间的"交互":在交互的工程中会存在多个层次,每个层次中所拥有(关注)的内容都是不 ...

  5. shell之文本过滤（正则表达式）

    shell之文本过滤(正则表达式) 分类: linux shell脚本学习2012-09-14 12:59 213人阅读 评论(0) 收藏 举报 当从一个文件或命令输出中抽取或过滤文本时,可以使用正则 ...

  6. c++ string去除左右空格

    res.substr(res.find_first_not_of(' '),res.find_last_not_of(' ') + 1)

  7. vue多层传递$attrs

    今天在使用$attrs的时候遇到一个问题: 父组件: <PanelContainer name="正向舆情"> <PositiveOpinion opinion= ...

  8. 完美解决linux不能编辑sshd_cofig和实现xshell远程连接的问题

    第一步:我们使用命令行vim /etc/ssh/sshd_config   执行修改,强制保持  :wq!  系统不让我们修改这个文件 "/etc/ssh/sshd_config" ...

  9. Bugku 杂项 猜

    猜 说flag是一个人名字的全拼,直接搜图片

  10. SVN 没有弹出输入账号和密的界面

    在用TortoiseSVN的时候,点SVN Checkout输入URL之后没有提示要输入账号密码的弹出框,直接跳到下一个界面,解决办法: 因为你在初次登陆svn的时候,点了保存密码的复选框,所以只要清 ...