收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 3504|回复: 11

[求助] 几个不常见CSS写法的疑问!求高手解读~~

  [复制链接]
发表于 2012-6-5 09:59:26 | 显示全部楼层 |阅读模式
这是看Bootstrap中的CSS文件中的几个疑问!

第一:@media (min-width: 768px) and (max-width: 979px) 这是什么意思?
@media (min-width: 768px) and (max-width: 979px) {
  .visible-tablet {
    display: block;
  }
  .hidden-tablet {
    display: none;
  }
  .hidden-desktop {
    display: block;
  }
  .visible-desktop {
    display: none;
  }
}


第二:中间的那个">" 是什么意思? 是下一级的意思吗?
.row-fluid > .span11 {
    width: 91.436464082%;
  }



第三: 中间的那个"+" 是什么意思?
.navbar .dropdown-menu li + li a {
    margin-bottom: 2px;
  }

第四: [class*="span"]  是什么意思?
.row-fluid > [class*="span"]
发表于 2012-6-5 10:03:06 | 显示全部楼层
貌似是css2吧。。一直用最原始的css的飘过
回复 支持 反对

使用道具 举报

发表于 2012-6-5 10:08:40 | 显示全部楼层
第一个可以顾名思义嘛。
其他是css高级选择器用法,楼主你不会百度吗,或者css3手册你都不手头常备?
>是子级选择器,儿子级别,不是孙子级别。
+是紧接着的后面的元素。
*表示全匹配。class*="span"表示属性class全匹配有span的元素。
回复 支持 反对

使用道具 举报

发表于 2012-6-5 10:12:59 | 显示全部楼层
css选择器全部过一遍就了解了
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-6-5 10:20:12 | 显示全部楼层
xmlovedoudou 发表于 2012-6-5 10:08
第一个可以顾名思义嘛。
其他是css高级选择器用法,楼主你不会百度吗,或者css3手册你都不手头常备?
>是 ...

*表示全匹配。class*="span"表示属性class全匹配有span的元素。

这个是不是相当于 .abc span{....}  与此写法作用一样呢?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-6-5 10:25:03 | 显示全部楼层
UED 发表于 2012-6-5 10:12
css选择器全部过一遍就了解了

都是CSS3的选择器吗?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-6-5 10:28:28 | 显示全部楼层
  1. CSS选择器
  2. 2010-03-30 02:46:13
  3. 一、基本选择器
  4. 序号 选择器 含义
  5. 1. * 通用元素选择器,匹配任何元素
  6. 2. E 标签选择器,匹配所有使用E标签的元素
  7. 3. .info class选择器,匹配所有class属性中包含info的元素
  8. 4. #footer id选择器,匹配所有id属性等于footer的元素



  9. 实例:
  10. * { margin:0; padding:0; }
  11. p { font-size:2em; }
  12. .info { background:#ff0; }
  13. p.info { background:#ff0; }
  14. p.info.error { color:#900; font-weight:bold; }
  15. #info { background:#ff0; }
  16. p#info { background:#ff0; }

  17. 二、多元素的组合选择器
  18. 序号 选择器 含义
  19. 5. E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔
  20. 6. E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
  21. 7. E > F 子元素选择器,匹配所有E元素的子元素F
  22. 8. E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F



  23. 实例:
  24. div p { color:#f00; }
  25. #nav li { display:inline; }
  26. #nav a { font-weight:bold; }
  27. div > strong { color:#f00; }
  28. p + p { color:#f00; }


  29. 三、CSS 2.1 属性选择器
  30. 序号 选择器 含义
  31. 9. E[att] 匹配所有具有att属性的E元素,不考虑它的值
  32. 10. E[att=val] 匹配所有att属性等于“val”的E元素
  33. 11. E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
  34. 12. E[att|=val] 匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值
  35. 以“val”开头的E元素,主要用于lang属性,比如“en”、“en-us”、“en-gb”等等



  36. 实例:
  37. p[title] { color:#f00; }
  38. div[class=error] { color:#f00; }
  39. td[headers~=col1] { color:#f00; }
  40. p[lang|=en] { color:#f00; }
  41. blockquote[class=quote][cite] { color:#f00; }


  42. 四、CSS 2.1中的伪类
  43. 序号 选择器 含义
  44. 13. E:first-child 匹配父元素的第一个子元素
  45. 14. E:link 匹配所有未被点击的链接
  46. 15. E:visited 匹配所有已被点击的链接
  47. 16. E:active 匹配鼠标已经其上按下、还没有释放的E元素
  48. 17. E:hover 匹配鼠标悬停其上的E元素
  49. 18. E:focus 匹配获得当前焦点的E元素
  50. 19. E:lang(c) 匹配lang属性等于c的E元素



  51. 实例:
  52. p:first-child { font-style:italic; }
  53. input[type=text]:focus { color:#000; background:#ffe; }
  54. input[type=text]:focus:hover { background:#fff; }
  55. q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; }


  56. 五、 CSS 2.1中的伪元素
  57. 序号 选择器 含义
  58. 20. E:first-line 匹配E元素的第一行
  59. 21. E:first-letter 匹配E元素的第一个字母
  60. 22. E:before 在E元素之前插入生成的内容
  61. 23. E:after 在E元素之后插入生成的内容



  62. 实例:
  63. p:first-line { font-weight:bold; color;#600; }
  64. .preamble:first-letter { font-size:1.5em; font-weight:bold; }
  65. .cbb:before { content:""; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; }
  66. a:link:after { content: " (" attr(href) ") "; }


  67. 六、CSS 3的同级元素通用选择器
  68. 序号 选择器 含义
  69. 24. E ~ F 匹配任何在E元素之后的同级F元素



  70. 实例:
  71. p ~ ul { background:#ff0; }

  72. 七、CSS 3 属性选择器
  73. 序号 选择器 含义
  74. 25. E[att^=”val”] 属性att的值以"val"开头的元素
  75. 26. E[att$=”val”] 属性att的值以"val"结尾的元素
  76. 27. E[att*=”val”] 属性att的值包含"val"字符串的元素



  77. 实例:
  78. div[id^="nav"] { background:#ff0; }

  79. 八、CSS 3中与用户界面有关的伪类
  80. 序号 选择器 含义
  81. 28. E:enabled 匹配表单中激活的元素
  82. 29. E:disabled 匹配表单中禁用的元素
  83. 30. E:checked 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
  84. 31. E::selection 匹配用户当前选中的元素



  85. 实例:
  86. input[type="text"]:disabled { background:#ddd; }

  87. 九、CSS 3中的结构性伪类
  88. 序号 选择器 含义
  89. 32. E:root 匹配文档的根元素,对于HTML文档,就是HTML元素
  90. 33. E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1
  91. 34. E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1
  92. 35. E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素
  93. 36. E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
  94. 37. E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)
  95. 38. E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
  96. 39. E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
  97. 40. E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child
  98. 或 :nth-child(1):nth-last-child(1)
  99. 41. E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type
  100. 或 :nth-of-type(1):nth-last-of-type(1)
  101. 42. E:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素



  102. 实例:
  103. p:nth-child(3) { color:#f00; }
  104. p:nth-child(odd) { color:#f00; }
  105. p:nth-child(even) { color:#f00; }
  106. p:nth-child(3n+0) { color:#f00; }
  107. p:nth-child(3n) { color:#f00; }
  108. tr:nth-child(2n+11) { background:#ff0; }
  109. tr:nth-last-child(2) { background:#ff0; }
  110. p:last-child { background:#ff0; }
  111. p:only-child { background:#ff0; }
  112. p:empty { background:#ff0; }


  113. 十、CSS 3的反选伪类
  114. 序号 选择器 含义
  115. 43. E:not(s) 匹配不符合当前选择器的任何元素



  116. 实例:
  117. :not(p) { border:1px solid #ccc; }

  118. 十一、CSS 3中的 :target 伪类
  119. 序号 选择器 含义
  120. 44. E:target 匹配文档中特定"id"点击后的效果
复制代码
找到了.是这些吧
回复 支持 反对

使用道具 举报

发表于 2012-6-5 10:53:03 | 显示全部楼层
writeidea 发表于 2012-6-5 10:20
*表示全匹配。class*="span"表示属性class全匹配有span的元素。

这个是不是相当于 .abc span{....}  与 ...


你看你把全匹配搞错了吧,要是有你想的这么简单,干嘛要这效率差的选择器啊。
测试代码如下:

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2012-6-5 13:34:49 | 显示全部楼层
很少这样写的,不习惯的呢。
回复 支持 反对

使用道具 举报

发表于 2012-6-5 14:08:52 | 显示全部楼层
CSS3手册没有看完把?每条都看了就不会问了。
回复 支持 反对

使用道具 举报

发表于 2012-6-8 22:34:56 | 显示全部楼层
看看教材,基础的东西都有说明
回复 支持 反对

使用道具 举报

发表于 2012-6-10 09:33:19 | 显示全部楼层
这个我也不清楚,过来看一下
回复 支持 反对

使用道具 举报

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

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-8-13 14:28 , Processed in 0.117866 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

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