老师，[data-dpr="2"] input这个是之前学的属性选择器，
但是ppt里的写法是input放在前面，后面是条件，我照着样子改了，但是却不生效？以哪里的写法为准呢？
正在回答
同学你好，body[data-dpr="2"]这种写法表示选择拥有data-dpr属性值2的body元素，但实际data-dpr是添加在html标签上的，如下所示：
所以同学这种写法是不可以实现效果的。老师调整了下写法，帮助同学更好的理解，如下所示
单独写的[data-dpr="2"]表示选择拥有该属性的所有元素，由于只在html标签上添加该属性，所以选择的就是html标签，后面的body， a、input元素使用空格隔开，表示使用后代选择器选择html下的元素。
同学可以测试理解下，祝学习愉快~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<!-- <meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
<title>通用适配应用-test</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/flexible-test.js"></script>
</head>
<body>
<header class="header-container">
<div class="navbar">
<!-- 三部分 -->
<div class="navbar-left">
<i class="iconfont icon-scan"></i>
</div>
<div class="navbar-center">
<!-- 三部分 -->
<div class="searchBox">
<div class="searchBox-prepend">
<i class="iconfont icon-search"></i>
</div>
<input type="text" class="searchBox-input" placeholder="开学季有礼，好货5折起">
<div class="searchBox-append">
<i class="iconfont icon-close"></i>
</div>
</div>
</div>
<div class="navbar-right">
<i class="iconfont icon-msg"></i>
</div>
</div>
</header>
</body>
</html>
*{
box-sizing: border-box;
margin:0;
padding:0;
}
body{
font-size: 12px;
color:#5d655d;
}
a{
font-size: 12px;
color:#686868;
text-decoration: none;
}
input{
font-size: 12px;
border:none;
background:none;
outline: none;
}
/*[data-dpr="2"] input 有空格 */
body[data-dpr="2"],
a[data-dpr="2"],
input[data-dpr="2"]{
font-size: 24px;
}
body[data-dpr="3"],
a[data-dpr="3"],
input[data-dpr="3"]{
font-size: 36px;
}
li{
list-style: none;
}
img{
vertical-align: top;
border:none;
width:100%;
}
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星