发表于： 2019-03-07 19:56:19
1 672
今天完成的事情：
1完成了css任务十
明天计划的事情：
1修改css任务十input的radio样式
2做任务八九十总结
3开始css任务十一
收获：
扩展选择器在hover的运用
a:hover
{
background-color:yellow;
}
这个是最普通的用法了，只是通过a改变了style
用法2:
使用a 控制其他块的样式：
- 使用a控制a的子元素 b：
.a:hover .b { background-color:blue;
}
- 使用a控制a的兄弟元素 c(同级元素)：
.a:hover + .c { color:red;
}
- 使用a控制a的就近元素d：
.a:hover ~ .d { color:pink;
}
总结一下：
1. 中间什么都不加 控制子元素； 后代选择器2. ‘+’ 控制同级元素（兄弟元素）； 兄弟选择器3. ‘～’ 控制就近元素； 兄弟选择器
兄弟选择器的局限：
前面的可以控制后面的同级选择器 ，但是后面的不可以控制前面的选择器
列:
<div class="bard col-md-2 col-6 ">
<span class="strip"> <span class="circle">4</span></span>
<span class="customization">4.确认下单</span>
</div>
后面的同级选择器不可以控制前面的同级选择器
.customization:hover + .strip{
background-color: blue;
}
前面的同级选择器可以控制后面的同级选择器
.strip:hover + .customization{
color: aliceblue;
background-color: aqua;
}
nput定义同一块 按钮（单选或者多选）时 的name 必须一样
例：下列三个按钮为单选按钮（因为type=radio 又因为是同一块 所以name必须一样）
<div class="col-md-2">
<input type="radio" name="optradio" id="duikou">
<label style="line-height: 100px;margin:0;" for="duikou">对口箱</label>
</div>
<div class="col-md-2">
<input type="radio" name="optradio" id="feiji">
<label style="line-height: 100px;margin:0;" for="feiji">飞机盒</label>
</div>
<div class="col-md-2">
<input type="radio" name="optradio">
<label style="line-height: 100px;margin:0;">天地盖</label>
</div>
<label> 标签的 for 属性应当与相关元素的 id 属性相同。 例上述的input的id 与label的for
返回列表
评论