Question

让我们说例如我通过我的样式表，但我无法记住某个CSS选择器所影响的元素。

是否有任何方法，工具或任何我可以使用的方法，工具或任何可以确定它究竟影响的内容？

谢谢！

Answer 1

浏览器元素功能的检查是出于您想要的目的。 1.在任何浏览器（最好是Mozilla Developer edition）中打开索引文件， 2.右击和检查元素， 3.然后打开已编译的样式表。找出你想要检查效果的样式元素。 4.返回检查，删除/添加CSS属性并实时查看效果。

另一种方法是使用Adobe括号。它的实时预览功能将突出显示涉及代码段的部分，您将光标指向。

Answer 2

除了使用浏览器的开发工具之外，还有两种简单的方法可以在几乎任何浏览器中使用（无论开发人员环境多么糟糕）。

<强>目视

暂时为选择器设置边框或背景颜色，例如：

border: 1px solid red;

或者：

background: red;

这使得查找受影响的元素变得非常容易。

<强>编程

在JavaScript控制台上，使用：

 // Replace with something that prints the relevant details
 var stringify = function(element) { return element.innerHTML; };

 // Iterate over all affected elements and print relevant info
 var affectedElements = document.querySelectorAll('.your .selector');
 var len = affectedElements.length;
 console.log('Elements affected: ' + len);
 for (var i = 0; i < len; i++) {
    var affectedElement = affectedElements[i];
    console.log(
        'Element ' + (i+1) + ':\n' +
         stringify(affectedElement) + '\n\n');
 }

Answer 3

我刚刚打开了一个随机的bootstrap模板网站，并按照你的要求去做。

reset_index

打开你的Chrome浏览器（我更喜欢这个，因为我觉得这很容易调试Jquery和css）并按F12，你会得到一个开发者窗口，就像在图像中一样。

切换到控制台选项卡。
使用Jquery选择器选择全部预期的元素（你也可以在这里使用相同的css选择器但只需将它们放在$（＆＃39;＆＃39;）中）例如：crontab -l
结果是所有元素那个选择器。

注意：此appraoch woud要求您将Jquery加载到您的页面中。否则脚本将抛出一个错误，说$不是defind。

有没有办法强制找到一个CSS选择器元素/将其带入视图？

3 个答案: