如何使用 CSS 正确覆盖无法访问的 HTML 内容？答案

【问题标题】：How to correctly override inaccessible HTML content with CSS?如何使用 CSS 正确覆盖无法访问的 HTML 内容？
【发布时间】：2016-08-06 06:33:39
【问题描述】：

我正在尝试对无法直接访问 HTML 的页面进行编辑 => Web Page 当您在右侧查看此页面时，您将看到“捐赠：，寻找团队，参与：“我想重新订购这些以“参与：，寻找团队，捐赠：”但是我不知道要移动哪个容器。我正在使用 CSS 来覆盖 Convio (cms) html。

我知道最重要的工作是因为在我的测试页面中，我一直在覆盖的某些东西，比如颜色、定位和可见性都起作用了。所以我想我的目标是错误的。我只是不知道我应该是哪一个。

编辑 现在使用 flexbox 取得了一些进展

/* Relocating the Donate and Participate Buttons */

.side-bar {
  display: flex;
  flex-direction: column;
}

#donate_direct_link_container,
#donate_link_container,
#entry_page_reg_team_type_container,
#frStatus1,
#frStatus2,
#frStatus4 {
    flex: 1;
    text-align: center;
    color: white;

}


#donate_direct_link_container {
  flex: 0 0 auto;
  order: 3;
}

#donate_link_container {
  flex: 0 0 auto;
  order: 2;
}

#entry_page_reg_team_type_container{
  flex: 0 0 auto;
  order: 1;
}

#frStatus1 {
 flex: 0 0 auto
 order: 4;
}

#frStatus2 {
     flex: 0 0 auto
 order: 5;
}

#frStatus4 {
     flex: 0 0 auto
 order: 6;
}


</style>

一定有什么我想念的东西，我只是看不到什么。希望有人能指出它是什么或引导我走向正确的方向。

【问题讨论】：

这个页面是响应式的吗？
因为我很好奇，为什么你要负责更改某些东西的外观（并且可以访问 CSS），而不是 HTML？
有点。当我们进入移动视图时，它确实会调整以适应屏幕。如果这就是您所说的响应式大声笑。而且由于它的设置方式，由管理部门管理的 Convio 系统将其锁定和密钥，并且由于现在有很多变化，他们不知道我具体需要访问哪一个，我一直被引导到不同的人向他们索要文档，而这些人是新人，所以他们自己都不知道哈哈所以我决定如果我像其他页面一样尝试使用 CSS 覆盖会更容易。
stackoverflow.com/questions/17455811/… 响应式可能会起作用。
响应式意味着对于任何宽度，网站都会很好地显示。哦，伙计，这太糟糕了 Umeed :) 让他们撕掉创可贴，让你修理它。把所有童子军都放在他们身上:)

标签： html css flexbox

【解决方案1】：

这是可能的。使用弹性盒模型。

.side-bar {
  display: flex;
  flex-direction: column;
}

#donate_direct_link_container {
  flex: 0 0 auto;
  order: 3;
}

#donate_link_container {
  flex: 0 0 auto;
  order: 2;
}

按照您想要的顺序定义所有侧边栏块。

【讨论】：

【解决方案2】：

如果您只需要使用 CSS 对内容进行重新排序，最好的办法是使用 flexbox 的 order 属性。

我在 CodePen 上创建了一个演示。

http://codepen.io/BenCodeZen/pen/QNmVLQ

关键是找到包装元素并为其添加display: flex; 样式，然后在您需要更改的相应子元素上使用order。

如果您有任何问题，请随时告诉我！

【讨论】：

哦，哇，我不知道 flexbox，这可能就是我要找的东西！谢谢，我会试一试，看看我能得到什么。
好吧……我有点卡住了哈哈。我已经设法让所有文本居中，但我无法让订单正常工作。我会发布我所做的。
本！非常感谢，我终于解决了它，甚至还设法重新排序了参与列表！这太棒了，我觉得太棒了。非常感谢。
不客气@umeed！我很高兴你能够让它工作！