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

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

根据属性查找

/*用于选取带有指定属性的元素。*/
<!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. 048：ORM模型基本的增删改查操作

    ORM对数据库的增删改查基本操作: 创建模型如下: 基本的增删改查如下:

  2. wepy 中文乱码

    <view class="loginTitle"> <view class="{{currentTab==0?'select':'default'}}& ...

  3. HDU 6205 card card card ( 思维 )

    题意 : 给定两个序列 a 和 b ,保证 a 数列的和 == b数列的和,从头到尾考虑 (a[i] - b[i]) 的前缀和,直到前缀和为负数则无法进行下去,所得的便是a[1~i]的和,现在有一个操 ...

  4. Are We Ready for SDN? Implementation Challenges for Software-Defined Networks

    Name of article:Are We Ready for SDN?  Implementation Challenges for  Software-Defined Networks Orig ...

  5. J - Mr.Panda and TubeMaster

    题解 我们可以把每个格子拆成两个点,一个表示横向的,一个表示纵向的,相邻的格子横向和纵向连边. 如果直接按照题意做的话,我们应当在横向和纵向的点之间连边,有限制的边设下界为1,然后跑可行流. 或者考虑 ...

  6. CG-CTF | 密码重置2

    跟则提示走,美滋滋: 1.找到邮箱: 2.下载备份: 3.PHP弱类型,string与int用的是“==” ........这一行是省略的代码........ if(!empty($token)&am ...

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

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

  8. pl/sql的安装使用详解

    一.  先安装  orcale10.1客户端 setup右键属性,按下图设置 net  manager 设置,不设置 pl/sql developer没办法连接 二.再安装 pl/sql develo ...

  9. vue2.0 之 douban （一）框架搭建 及 整体布局

    1.创建豆瓣项目 我们通过官方vue-cli初始化项目 vue init webpack douban 填写项目描述,作者,安装vue-router 初始化后,通过npm install安装依赖 cd ...

  10. 10.1 ‘The server's host key is not cached in the registry’

    10.1 ‘The server's host key is not cached in the registry’ This error message occurs when PuTTY conn ...