css3属性选择器
1. 利用属性选择器就可以不用借助于类或者id选择器
<style>
/*1. 必须是 input 但是同时具有 value 这个值 */
input[value] {
color: aqua;
}
</style>
<body>
<input type="text" value="请输入用户名">
<input type="text">
</body>效果图：
2. 属性选择器还可以选择属性=值的某些元素
<style>
/* 2.属性选择器还可以选择属性=值的某些元素(重点) */
input[type=text] {
color: pink
}
</style>
<body>
<input type="text" name="" id="">
<input type="password" name="" id="">
</body>效果图：
3. 属性选择器可以选择属性值开头的某些元素
<style>
/* 3.属性选择器可以选择属性值开头的某些元素 */
div[class^=icon] {
color: red;
}
</style>
<body>
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
</body>效果图：
4. 属性选择器可以选择属性值结尾的某些元素
<style>
/* 4.属性选择器可以选择属性值结尾的某些元素 */
section[class$=data] {
color: royalblue;
}
</style>
<body>
<section class="incon1-data">我是安其拉</section>
<section class="incon2-data">我是哥斯拉</section>
<section class="incon3-ico">那我是谁</section>
</body>效果图：
5. 只要属性中有 n3 都选出来
<style>
/* 5.只要属性中有 n3 都选出来 */
section[class*=n3] {
color: rgb(65, 225, 145);
}
</style>
<body>
<section class="incon1-data">我是安其拉</section>
<section class="incon2-data">我是哥斯拉</section>
<section class="incon3-ico">那我是谁</section>
</body>效果图：
扫一扫
300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
