Question

我试图选择一个没有类或id的html元素，但我仍然需要选择它。这是元素的样子：

    <table style="background-color: white; border: 1px solid #aaa; 
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); border-left: 10px solid 
    #1E90FF; margin: 0 auto;" class="">

我试图制作一个选择器来获得这样的元素：

    $("table[style~='background-color: white; border: 1px solid #aaa;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.2); border-left: 10px solid 
    #1E90FF; margin: 0 auto;']")

但它不起作用。有人可以帮我解决这个问题吗？

Answer 1

选择器错了，你缺少一些空格。

您可以在jQuery中使用attribute selector style，但请记住，内联样式可以更改如果另一个javascript函数影响元素样式，则选择器将无效

寻找另一个选择器要好得多，找一个包装表元素的类或id。

如果有，请执行以下操作：

.el table {}
OR
#el table {}

使用属性选择器：

＆＃13;

console.log($('table[style="background-color: white; border: 1px solid #aaa; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); border-left: 10px solid #1E90FF; margin: 0 auto;"]').length);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="background-color: white; border: 1px solid #aaa; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); border-left: 10px solid #1E90FF; margin: 0 auto;"></table>

＆＃13;

使用filter()方法

＆＃13;

console.log($('table').filter('[style="background-color: white; border: 1px solid #aaa; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); border-left: 10px solid #1E90FF; margin: 0 auto;"]').length);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="background-color: white; border: 1px solid #aaa; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); border-left: 10px solid #1E90FF; margin: 0 auto;"></table>

＆＃13;

Answer 2

尝试使用子串select *=，并仅匹配样式属性的唯一部分：

$("table[style*='background-color: white; border: 1px solid #aaa;']")

似乎适合我。

Answer 3

$('div[style^="background: blue; "]').append('<p>This is the selected</p>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="background: red; height: 300px; border: 2px solid black;"></div>
<div style="background: blue; color: #fff; height: 500px; border: 2px solid green;"></div>

使用jquery按照它的样式选择元素

3 个答案: