鱼C论坛

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

[已解决]CSS选择器

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

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

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

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

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


  19.   </header>
复制代码


  1. *{
  2.         margin:0;
  3.         padding:0;
  4.         font-family:"微软雅黑";
  5.        
  6. }
  7. body{
  8.         min-width:1280px;
  9. }
  10. .header{
  11.         background-color:#FFFFFF;
  12.         height:56px;
  13. }
  14. .header.site-title{
  15.         float:left;
  16.         font-size:26px;
  17.         height:56px;
  18.        
  19. }
  20. .header.site-title.site-pic{
  21.         margin-left:55px;
  22.         vertical-align:middle;/*居中显示*/
  23. }
  24. .header.login.login-bottom{
  25.         position:absolute;
  26.         top:40px;
  27.         left:20px;
  28.         width:0px;
  29.         border-top:2px solid #EA6F6E;
  30.         transition:width .2s ease-in-out;
  31.         -webkit-transition:width .2s ease-in-out;
  32. }
  33. .header.login a{
  34.         color:color: #8e9197;
  35.         font-size:14px;
  36.         height:56px;
  37.         line-height:56px;
  38.         margin:0 30px 0 10px;
  39. }
  40. .header.login a :hover~.login-bottom{
  41.         width:55px;
  42. }
  43. .header.login.login-pic{
  44.         width:20px;
  45.         vertical-align:middle;
  46. }
  47. .header .nav-list{
  48.         float:right;
  49.         list-style:none;
  50.         position:relative;
  51. }
  52. .header.nav-list li{
  53.         float:left;
  54.         width:110px;
  55.         height:56px;
  56.         font-size:18px;
  57.         text-align:center;
  58.        
  59. }
  60. .header.nav-list.list-bottom{
  61.         height:52px;
  62.         width:110px;
  63.         position:absolute;
  64.         left:0px;
  65.         top:52px;
  66.         border-top:4px solid #ea6f6e;
  67.         transition: left .2s ease-in-out;
  68.         -webkit-transition: left .2s ease-in-out;
  69. }
  70. .header.nav-list li:nth-child(1):hover~.list-bottom{
  71.         left:0px;
  72. }
  73. .header.nav-list li:nth-child(2):hover~.list-bottom{
  74.         left:110px;
  75. }
  76. .header.nav-list li:nth-child(3):hover~.list-bottom{
  77.         left:220px;
  78. }
  79. .header.nav-list li:nth-child(4):hover~.list-bottom{
  80.         left:330px;
  81. }
  82. .header.nav-list li:nth-child(5):hover~.list-bottom{
  83.         left:440px;
  84. }
  85. .header.nav-list a{
  86.         color: #8e9197;
  87.         text-decoration:none;
  88.         height:56px;
  89.         width:100%;
  90.         line-height:56px;
  91.        
  92. }
复制代码


可是打开这个文件 审查元素里面并没有需要的样式
求大神解答
最佳答案
2017-10-1 10:37:34
比如
  1. .header .login .login-pic
复制代码

所有的这个都要有空格
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-10-1 10:37:34 | 显示全部楼层    本楼为最佳答案   
比如
  1. .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-3-29 08:36

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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