[成都|]JS-|2018年12月23日的日报-技能树.IT修真院

发表于： 2018-12-23 21:02:42

1 823

今日完成的事：

今天写的任务10，遇到问题有两个，一个是hover的父元素，一开始自己写，还没学习父元素的时候，思路差不多，但写法有问题：

<html>

<body>

<style>

    #a {color : #FFFF00;}

    #a:hover > #b{color : #FF0000;}    

    #a:hover + #c{color : #00FF00;}

    #a:hover + #c > #b{color : #0000FF;}

</style>

<div id='a'>元素1

  <div id='b'>元素2</div>

</div>

<div id='c'>元素3

  <div id='b'>元素2</div>

</div>

</body>

</html>

大概就是这种写法，还有一个就是修改bootstrap的lable，搞了一下午，也大概搞了出来：

<input type="radio" name="paixu" id="item1" checked>
<label for="item" style="cursor:pointer"></label>

div>input
{
display: none;
}
div>label
{
position: relative;
margin-right: 2rem;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
border: 0.2rem solid rgb(214, 214, 214);
}
div>label::before
{
display: inline-block;
content: "";
position: relative;
left: -0.2rem;
top: -0.3rem;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
margin-right: 0.6rem;
vertical-align: bottom;
}
div>input:checked+label::before
{
background-color: rgb(29,122,217);
}
div>input:checked+label::after{
display: inline-block;
content: "";
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
position: absolute;
left: 0.45rem;
bottom: 0.35rem;
background-color: white;
}

上面的这个，就是单选框的修改方法，还有下拉菜单的修改方法：

<span class="font-forteen margin">查看详情</span>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">切换下拉菜单</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能</a></li>
<li><a href="#">另一个功能</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>

.btn-group>.btn, .btn-group-vertical>.btn
{
width: 2.4rem;
height: 3rem;
}
.btn
{
padding: 0%;
}
.dropdown-menu
{
min-width: 10rem;
width: 12.7rem;
top: 3rem;
left: -9.8rem;
}