鱼C论坛

 找回密码
 立即注册
查看: 3889|回复: 4

[已解决]CSS选择器

[复制链接]
发表于 2017-9-30 22:59:20 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
给某一个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;
        
}

可是打开这个文件 审查元素里面并没有需要的样式
求大神解答
最佳答案
2017-10-1 10:37:34
比如
.header .login .login-pic
所有的这个都要有空格
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-10-1 10:37:34 | 显示全部楼层    本楼为最佳答案   
比如
.header .login .login-pic
所有的这个都要有空格
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-10-1 14:00:08 | 显示全部楼层

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

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


想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-10-1 16:45:25 | 显示全部楼层
alltolove 发表于 2017-10-1 10:37
比如
所有的这个都要有空格

是的 我找到问题所在了 。。谢谢
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-10-1 16:45:45 | 显示全部楼层
不二如是 发表于 2017-10-1 14:00
像这种样式最终呈现和你想的不一样,很大一部分原因:“优先级”

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

谢谢
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 19:50

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表