html – 如何在css文件中左右切换?

前端之家收集整理的这篇文章主要介绍了html – 如何在css文件中左右切换?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个 HTML django模板页面,它是RTL和LTR(取决于用户的区域设置).

页面的CSS存储在另一个文件中,该文件当前是静态的.

什么是根据语言环境左右切换属性的最佳方法?这个问题在CSS中是否有内置的属性? (我不想使用JS,感觉太乱)

我有:

.elem{
    left: 10px; 
    bottom: 10px;
    position: absolute;
}

我想要这样的东西:

.elem{
    right-or-left-according-to-html-dir: 10px; 
    bottom: 10px;
    position: absolute;
}

目前我可以想到的唯一选择是将文件变成模板:

.elem{
    {{dir}}: 10px; 
    bottom: 10px;
    position: absolute;
}

有没有更好的方法让我保持我的CSS文件静态?

解决方法

你说你正在使文档rtl或ltr取决于区域设置.在这种情况下,您可以使用:lang()选择器来使文档的某些部分具有取决于区域设置的样式.

> http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:lang
> http://www.w3.org/TR/css3-selectors/#lang-pseudo

如果你想要更多的支持(IE7),你可以使用属性选择器选择器[lang =’en’],尽管这只会测试指定的选择器上的属性.

> http://www.w3.org/TR/css3-selectors/#attribute-selectors

如果您在html元素(您应该使用lang =“en”)中指定语言,则可以将html选择器放在要在某些语言环境中应用的类之前:

.elem {
    margin: 0 10px 0 0;
    color: blue;
}

html[lang='en'] .elem {
    margin: 0 0 0 10px;
}

更好的是,如果你指定了dir属性,你可以直接在css中使用它:

.elem[dir='rtl'] {
    margin: 0 10px 0 0;
}

请注意,通过身体元素上的课程,您将始终依靠该课程始终在那里.但是,dir和lang属性可以在更具体的范围内指定,如单个div,并且仍然在css中使用,以及“其他”阅读方向的样式.

编辑

最后,为了注意未来,CSS Selectors’Level 4’将包含一个psuedo标签,可以对文本方向进行过滤.当然,这些规范正在开发中,浏览器的采用可能需要几年的时间才能可靠地使用它:

http://dev.w3.org/csswg/selectors4/#dir-pseudo

猜你在找的HTML相关文章