css+div中，用<div></div>，字符可以换行，用<pre></pre>,空格、换行可以显示出来。怎么用才能兼容？

Posted 2023-05-02

最兼容的方法是用<div></div>标签分块，div标签本身有换行效果。列表的换行用<div>，<li>都可以。用<br />换行也可。搜狗高速浏览器对标签的要求比较严格，所以标签格式严谨很重要。再有万恶的IE6会有很多bug与独特性，这个没办法，要么放弃IE6，要么用心体验做成兼容。其实代码规范基本很少会遇到兼容问题。但是把大多数兼容规避掉，是个很漫长的过程。
两点建议：
1、最好让换行标签包裹不换行标签，而尽量不要反过来用（换行标签：<div><li>等，不换行标签：<a><span>等）
2、格式严谨 参考技术A 在html中，空格用& nbsp;换行用<br />
只要你遵循这个标准即可，因为再NB的浏览器也是遵循这个标准的。
想偷懒而不遵循标准，那么你迟早有一天会回过头来边骂街边维护你的代码。
PS：骂街这个词在这里不是贬义的

用css选择倒数第二个元素

【中文标题】用css选择倒数第二个元素

【英文标题】：Select second last element with css

【发布时间】：2011-07-22 02:00:02

【问题描述】：

我已经知道 :last-child。但是有没有办法选择div：

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div> <!-- THIS -->
 <div>c</div>
</div>

注意：没有 jQuery，只有 CSS

【问题讨论】：

为什么倒数第二个孩子很重要肯定有一些逻辑？

是的，我需要同时选择倒数和倒数来应用一些样式

为什么你不能把一个类放在倒数第二个 div 上

“为什么你不能在倒数第二个 div 上放一个类”：也许如果你要对正在生成的内容进行样式化，在其中你没有（容易）访问添加一个分类到倒数第二项？

【参考方案1】：

在 CSS3 中你有：

:nth-last-child(2)

见：https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

nth-last-child 浏览器支持：

铬 2 火狐3.5 Opera 9.5、10 Safari 3.1、4 Internet Explorer 9

【讨论】：

这可能是要走的路，除非您可以将一个类附加到您尝试选择的 div。正如 Frosty 所提到的，旧版浏览器或 IE 不支持 CSS3。如果您关心跨浏览器的可计算性，Jquery 是一个更好的选择。

这是链接文章的复制/粘贴...已编辑答案，谢谢。

css 中的解决方案：#container > :nth-last-child(2) background: red; 请查看此代码笔以实时查看：codepen.io/marc_dahan/pen/JyxObz

既然我们不需要支持旧版 IE，这个答案就可以完美运行。老实说，如果人们还在使用 IE 8 及以下版本，他们就不配拥有漂亮的东西。

【参考方案2】：

注意：发布此答案是因为 OP 后来在 cmets 中声明他们需要选择最后两个元素，而不仅仅是倒数第二个元素。

---

:nth-child CSS3 选择器实际上比你想象的更强大！

例如，这将选择#container的最后2个元素：

#container :nth-last-child(-n+2) 

但这只是美好友谊的开始。

:nth-child Browser Support

#container :nth-last-child(-n+2) 
  background-color: cyan;

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div>
 <div>SELECT THIS</div>
</div>

【讨论】：

不错，我的答案只选择了最后一个孩子减1。不知道这个。 +'d