Question

我正在开发一个离线网络应用程序（目前）仅针对iPhone / iPod上的Safari。主要是为了好玩，但也是为了减少我对jQuery事件绑定的依赖（从而希望加快UI响应速度），我尝试用一些CSS3代替基本的显示/隐藏功能。

以下代码是一个简化的示例，适用于Firefox 3.6.3，但不适用于最新的Safari，包括桌面和移动设备：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <style type="text/css">
    input:not(:checked) ~ select { display: none; }
    input:checked ~ select { display: inline; }
  </style>
</head>
<body>
  <input type="checkbox" id="cb" /> <label for="cb">Toggle select</label>
  <select id="sel"><option value="">Select Box</option></select>
</body>
</html>

我并不是真的希望这可以工作，但我很高兴看到它确实如此，至少在Firefox中。知道为什么它在Safari中不起作用吗？在其中，<select>最初是隐藏的，这是正确的，Web Inspector告诉我，每次单击复选框时都会设置正确的显示值，但元素无法显示。

我已经完成了类似的成功实验，我将<label>内的文字包裹在<a href="#sel>标记中并使用select:target { display: inline; }规则，但这不是我最终想要的行为。

我是否走得太远了？这种东西最好留给Javascript吗？

Answer 1

我没有花太多时间看这个，但是原则上它确实有效，如果你简化一下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
  <style type="text/css">
    input:not(:checked) + select {
      display: none; 
    }
    input:checked + select {
      display: inline; 
    }
  </style>
</head>
<body>
  <input type="checkbox" id="cb" />
  <select id="sel"><option value="">Select Box</option></select> 
</body> 
</html>

在你的例子中，我认为这是兄弟选择器不起作用 - ：checked和：not（：checked）似乎工作正常。以上示例适用于Safari 4.0.4。

但是我建议这是一个太公平的步骤。 Ulitmately CSS是一种演示技术，通过采用这种方法，您可以将演示与功能性问题混合在一起......对于我个人而言，我会在Javascript中执行此操作。

仅使用CSS3显示/隐藏元素 - 为什么这不起作用？

1 个答案: