0

并不是说我需要答案，因为简短的答案是NO。我提出这个问题更多是因为这个问题没有从 jQuery 论坛到 Google 代码论坛到 StackOverflow 的此处解决。

自从我得到第一台使用标准盒式磁带录音机备份数据的 Commodore 16 以来，我一直是一名程序员（是的……我那么老了）。从那时起，为在许多编程语言的编码实践中创建普遍兼容的标准进行了漫长而令人厌烦的斗争，其中 W3C 是我们迄今为止最接近的。

在我自己看来，在使用 jQuery Mobile (jQm) 编写了几个应用程序之后，我认为 jQm 是一个好主意，但正是因为这个原因，它的实现很糟糕。jQm 决定以不符合标准的方式实现他们自己的 CSS，让开发人员与 jQm 劫持他们自己的“符合标准的”补充 CSS 作斗争。请记住，CSS 中的 C 表示“级联”，这意味着遵循先前样式声明的样式声明将优先于之前的样式。jQm CSS 并非如此，使其不符合标准。

我围绕 jQm 的 CSS 劫持行为（在 jQuery 的 CSS、@imports、内联样式...... 除了在加载 jQm CSS 之后用我自己的 CSS 覆盖 jQm CSS 中包含的样式之外。我的意思是......这不是完全否定了首先使用 jQm 的任何好处吗？

指向我的论点。如果我必须在我自己的“符合标准”的 CSS 中“覆盖”jQm 的 CSS，或者调整 jQm CSS 本身（这将消除能够将现有的 jQm CSS 导入 Theme Roller 的优势）稍后添加另一种样式），那么我不妨编写自己的 UI 开始。

我可以使用 jQuery 和 CSS3 过渡轻松地编写自己的过渡，因此使用 jQm 的过渡可以带来任何好处。jQm 将鼠标事件转换为触摸控件的功能已经过时，因为随着平板电脑和触摸屏笔记本电脑进入桌面环境，大多数主要浏览器已经在完善这一点，但与 jQm 不同的是，它以符合标准的方式。然后是 jQm 的默认 ajax 导航行为，我可以使用 jQuery 自己的丰富的 XMLHttpRequest 速记方法（$.ajax、$.get、$.post 和 $.getJSON）轻松实现自己，具有更低的开销和更好的性能。那么为什么要使用jQm呢？！

我自己已经完成了 jQm，因为我与 jQm 不符合 CSS 行为的斗争所花费的时间超过了我首先编写自己的符合标准的 UI 所花费的时间。我是标准合规性的坚定信徒，我不得不与不合规的应用程序（比如 IE ......哦，不，我是不是大声说出来了！）作斗争了二十多年。

我自己......从现在开始，我将使用符合标准的 HTML5 和 CSS3 编写我的所有应用程序，通过将我的兼容编码包装在移动设备自己的 SDK 中，可以轻松地通过不同的移动设备进行部署。旨在做到这一点，另一个强大的好处是能够使用移动设备自己的功能（如加速度计、指南针、相机等）。

我很想听听关于这个问题的反馈，因为我总是保持开放的心态，喜欢一个很好的圆桌讨论，让我重新思考我根据自己的经验做出的决定。

更新这是一个示例和一个 jsfiddle，描述了我在这个问题中引用的内容。

<style>
.my_link a:link{ color:#00cc00 }
</style>

<div data-role="page" data-theme="a">
<p><a href="#">
Link using default jQm CSS</a></p>
<p><a href="#" class="my_link">
Link using CSS class declared in HEAD after jQm CSS</a></p>
<p><a href="#"> style="color:#00cc00">
Link using inline CSS declared after jQm CSS</a></p>
</div>

http://jsfiddle.net/Ephiphany/S7NuK/

4

1 回答 1

1

要覆盖 JQM 样式（或任何与此相关的样式），您的 css 选择器需要比 JQM 样式表使用的选择器更具体。

例如，给定以下带有 1 个链接的页面：

<div data-role="page" data-theme="a" data-url="/Ephiphany/S7NuK/show/" tabindex="0" class="ui-page ui-body-a ui-page-active" style="min-height: 209px;">
  <p class="my_p"><a href="#" class="my_link ui-link">Link using default jQm CSS</a></p>
</div>

JQM 有这种风格：

.ui-body-a .ui-link:link {
    color: #2489CE;
}

CSS Specificity 是一个优先级系统，其中有多个优先级：内联样式 > ID > 类/属性/状态 > 标记名/psudoelement

考虑到这一点，我们要么需要一个 ID，要么需要使用两个类。例如，如果它出现在 JQM 样式表之后，这将覆盖它：

.my_p .my_link:link { 
    color: #00cc00
}

http://jsfiddle.net/S7NuK/2/

不要忘记:visited :hover :active等等。

于 2012-11-15T22:41:32.610 回答