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

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

根据属性查找

/*用于选取带有指定属性的元素。*/
<!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">

    <title>Title</title>

    <style type="text/css">

        label[for]{

            color: red;

        }

    </style>

</head>

<body>

    <div>

        <form>

            <div>

                <label for="user">用户名</label>

                <input type="text" id="user">

            </div>

        </form>

    </div>

</body>

</html>

根据属性和值查找

/*用于选取带有指定属性和值的元素。*/
<!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">

    <title>Title</title>

    <style type="text/css">

        label[for="user"]{

            color: red;

        }

    </style>

</head>

<body>

    <div>

        <form>

            <div>

                <label for="user">用户名</label>

                <input type="text" id="user">

            </div>

        </form>

    </div>

</body>

</html>

表单常用

<!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">

    <title>Title</title>

    <style type="text/css">

        input[type="text"]{

            color: red;

        }

    </style>

</head>

<body>

    <div>

        <form>

            <div>

                <label for="user">用户名</label>

                <input type="text" id="user">

            </div>

        </form>

    </div>

</body>

</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. IsDate(expression)函数

    IsDate 函数 返回 Boolean 值指明某表达式是否可以转换为日期. IsDate(expression) expression 参数可以是任意可被识别为日期和时间的日期表达式或字符串表达式. ...

  2. es相关查询接口

    1.查看指定es中所有的索引 GET http://IP:9200/_cat/indices?v 2.修改指定索引的相关配置信息 PUT http://IP:9200/index_name/_sett ...

  3. Spring Boot 2.x整合mybatis及druid数据源及逆向工程

    1逆向工程 1)db.properties #============================# #===== Database sttings =====# #=============== ...

  4. canvas在图片上生成文字

    newImage(text) {                 // 生成图片                 var imageBox = document.getElementById(&quo ...

  5. day1 instance,round,divmod,imput, 字符串

      >>> a = '123' >>> isinstance(a, str) True >>> b = 1 >>> type(b ...

  6. 小程序-登录-token

    1.前端调用wx.login()获取code值 2.前端通过调用wx.getUserInfo获取iv.rawData.signature.encryptedData等加密数据,传递给后端 3.服务器通 ...

  7. css语法以及css选择器

    CSS语法 CSS的标准语法主要由两方面构成一是 选择器.二是 声明框. 一.选择器      通过选择器可以选定页面指定的元素,并将声明块中的样式应用在选择器选中的元素中去. 二.声明框       ...

  8. apache Internal Server Error 解决方法

    https://blog.csdn.net/qq_33684377/article/details/78536548 https://blog.csdn.net/LJFPHP/article/deta ...

  9. IDEA集成Mybatis打印日志插件

    MyBatis Log Plugin :把 mybatis 输出的sql日志还原成完整的sql语句. 如下图所示,点击Tools>MyBatis Log Plugin 然后运行程序后,就会看到对 ...

  10. uploadify上传插件参数的一些设置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...