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

发布时间：2020-12-14 18:56:03 所属栏目：资源来源：网络整理

导读：我有一个 HTML django模板页面,它是RTL和LTR(取决于用户的区域设置). 此页面的CSS存储在另一个文件中,该文件当前是静态的. 什么是根据语言环境左右切换属性的最佳方法？这个问题在CSS中是否有内置的属性？ (我不想使用JS,感觉太乱) 我有： .elem{ left: 10px

我有一个 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!