论坛 › Web开发 › CSS选择器

cwr1001 发表于 2017-9-30 22:59:20

CSS选择器

给某一个div 里面的 div 添加样式类选择器 不是 .父级的class名.子级别的class名吗
<!---导航--->
<header class="header" id ="top">
<div class ="site -title">
   <img class ="site-pic"src="img/header-logo.png" alt="site picture"/>
   New Life
</div>
<div class="login">
<img class ="login-pic" src="img/header-login-logo.png" /><a href ="#">Login</a>
<div class="login-bottom"></div>
</div>

<ul class="nav-list">
        <li class="li1"><a href="#">首页</a></li>
        <li class="li2"><a href="#">最新活动</a></li>
        <li class="li3"><a href="#">项目介绍</a></li>
    <li class="li4"><a href="#">爱心社区</a></li>
        <li class="li5"><a href="#">关于我们</a></li>
        <li class ="list-bottom"></li>
</ul>


</header>


*{
        margin:0;
        padding:0;
        font-family:"微软雅黑";
       
}
body{
        min-width:1280px;
}
.header{
        background-color:#FFFFFF;
        height:56px;
}
.header.site-title{
        float:left;
        font-size:26px;
        height:56px;
       
}
.header.site-title.site-pic{
        margin-left:55px;
        vertical-align:middle;/*居中显示*/
}
.header.login.login-bottom{
        position:absolute;
        top:40px;
        left:20px;
        width:0px;
        border-top:2px solid #EA6F6E;
        transition:width .2s ease-in-out;
        -webkit-transition:width .2s ease-in-out;
}
.header.login a{
        color:color: #8e9197;
        font-size:14px;
        height:56px;
        line-height:56px;
        margin:0 30px 0 10px;
}
.header.login a :hover~.login-bottom{
        width:55px;
}
.header.login.login-pic{
        width:20px;
        vertical-align:middle;
}
.header .nav-list{
        float:right;
        list-style:none;
        position:relative;
}
.header.nav-list li{
        float:left;
        width:110px;
        height:56px;
        font-size:18px;
        text-align:center;
       
}
.header.nav-list.list-bottom{
        height:52px;
        width:110px;
        position:absolute;
        left:0px;
        top:52px;
        border-top:4px solid #ea6f6e;
        transition: left .2s ease-in-out;
        -webkit-transition: left .2s ease-in-out;
}
.header.nav-list li:nth-child(1):hover~.list-bottom{
        left:0px;
}
.header.nav-list li:nth-child(2):hover~.list-bottom{
        left:110px;
}
.header.nav-list li:nth-child(3):hover~.list-bottom{
        left:220px;
}
.header.nav-list li:nth-child(4):hover~.list-bottom{
        left:330px;
}
.header.nav-list li:nth-child(5):hover~.list-bottom{
        left:440px;
}
.header.nav-list a{
        color: #8e9197;
        text-decoration:none;
        height:56px;
        width:100%;
        line-height:56px;
       
}

可是打开这个文件 审查元素里面并没有需要的样式
求大神解答

alltolove 发表于 2017-10-1 10:37:34

比如.header .login .login-pic
所有的这个都要有空格

不二如是 发表于 2017-10-1 14:00:08

像这种样式最终呈现和你想的不一样，很大一部分原因：“优先级”

看懂这篇帖子，你就懂了0 1 1 5 - 进阶版Css3选择器 |【索引-总结】

cwr1001 发表于 2017-10-1 16:45:25

alltolove 发表于 2017-10-1 10:37
比如
所有的这个都要有空格

是的 我找到问题所在了 。。谢谢

cwr1001 发表于 2017-10-1 16:45:45

不二如是 发表于 2017-10-1 14:00
像这种样式最终呈现和你想的不一样，很大一部分原因：“优先级”

看懂这篇帖子，你就懂了0 1 1 5 - 进 ...

谢谢

查看完整版本: CSS选择器