我需要选择所有以"__tienda"类结尾的 div。所有元素都有不同的 id



我需要选择所有div以'__tienda'类结束。所有元素都有不同的id。

我如何选择所有div结束与__tienda类?

所有的类都是不同的,只是以__tienda from sass design结束。

这是一个蓝图,这就是为什么所有div都是不同的,它们都有不同的测量

<div id="1piso" class="pisoplano">
<div class="titulo">
<h1>1er Piso</h1>
<h2>Total Center</h2>
</div>
<div class="plano">
<div id="escalera-top-izq" class="escaleras">
<div class="puerta"></div>
<div class="grada"></div>
<div class="grada"></div>
<div class="grada"></div>
<div class="grada"></div>
<div class="grada"></div>
<div class="grada"></div>
</div>
<div id="escalera-medio-a" class="escaleras">
<div class="grada"></div>
<div class="grada"></div>
<div class="grada"></div>
<div class="grada"></div>
<div class="grada"></div>
<div class="grada"></div>
<div class="grada"></div>
</div>
<div id="escalera-medio-b" class="escaleras">
<div class="grada"></div>
<div class="grada"></div>
<div class="grada"></div>`your text`
<div class="grada"></div>
<div class="grada"></div>
<div class="grada"></div>
<div class="grada"></div>
</div>
<div class="sshh_top">
<div class="mujeres">
<div class="esquina">
<div class="puerta"></div>
</div>
<div id="bano_01" class="bano">
<img src="images/inodoro.svg" alt="">
</div>
<div id="bano_02" class="bano">
<img src="images/inodoro.svg" alt="">
</div>
<div id="bano_03" class="bano">
<img src="images/inodoro.svg" alt="">
</div>
</div>
<div class="hombres">
<div class="puerta"></div>
<div class="bano">
<img src="images/inodoro.svg" alt="">
</div>
<div class="bano">
<img src="images/inodoro.svg" alt="">
</div>
</div>
</div>
<div class="servicios">servicios</div>
<div class="accesorios">accesorios</div>
<div class="opticas">ópticas</div>
<div class="ropa_ca">ropa caballeros</div>
<div class="accesorios_2">accesorios</div>
<div class="tecnologia">tecnología</div>
<div class="tecnologia_2">tecnología</div>
<div class="servicio_tecnico">servicio técnico</div>
<div class="e-top">
<div id="e7" class="e-top__tienda">E7</div>
<div id="e6" class="e-top__tienda">E6</div>
<div id="e5" class="e-top__tienda">E5</div>
<div id="e4" class="e-top__tienda">E4</div>
<div id="e3" class="e-top__tienda">E3</div>
</div>
<div class="d-mid">
<div class="d-mid__der">
<div id="d8" class="d-mid__der__tienda">D8</div>
<div id="d7" class="d-mid__der__tienda">D7</div>
<div id="d6" class="d-mid__der__tienda">D6</div>
<div id="d5" class="d-mid__der__tienda">D5</div>
<div id="d4" class="d-mid__der__tienda">D4</div>
<div id="d3" class="d-mid__der__tienda">D3</div>
<div id="d2" class="d-mid__der__tienda">D2</div>
<div id="d1" class="d-mid__der__tienda">D1</div>
</div>
<div class="d-mid__izq">
<div id="b6" class="d-mid__izq__tienda">B6</div>
<div id="b7" class="d-mid__izq__tienda">B7</div>
<div id="b8" class="d-mid__izq__tienda">B8</div>
<div id="b9" class="d-mid__izq__tienda">B9</div>
<div id="b10" class="d-mid__izq__tienda">B10</div>
<div id="b11" class="d-mid__izq__tienda">B11</div>
<div id="b12" class="d-mid__izq__tienda">B12</div>
<div id="b13" class="d-mid__izq__tienda">B13</div>
</div>
</div>
<div class="d-izq">
<div id="d16" class="d-izq__tienda">D16</div>
<div id="d15" class="d-izq__tienda">D15</div>
<div id="d14" class="d-izq__tienda">D14</div>
<div id="d13" class="d-izq__tienda">D13</div>
<div id="d12" class="d-izq__tienda">D12</div>
<div id="d11" class="d-izq__tienda">D11</div>
<div id="d10" class="d-izq__tienda">D10</div>
<div id="d9" class="d-izq__tienda">D9</div>
</div>
<div class="enfermeria">
<div class="enfermeria__local">
<div class="cruz">
<img src="images/cruz.svg" alt="">
</div>
</div>
<div class="bloque-a"></div>
<div class="bloque-b"></div>
</div>
<div class="e-der">
<div id="e1" class="e-der__tienda">E1</div>
</div>
<div class="m-der">
<div id="m10" class="m-der__tienda">M10</div>
<div id="m9" class="m-der__tienda">
<div class="cabecera">
<h4>M9</h4>
</div>
<img src="images/automovil.svg" alt="">
<hr>
<img src="images/automovil.svg" alt="">
</div>
</div>
<div class="b-der">
<div id="b5" class="b-der__tienda">B5</div>
<div id="b4" class="b-der__tienda">B4</div>
<div id="b3" class="b-der__tienda">B3</div>
<div id="b2" class="b-der__tienda">B2</div>
<div id="b1" class="b-der__tienda">B1</div>
</div>
<div class="puerta-ingreso">
<div class="puerta-ingreso_a">
<div class="ala_a"></div>
<div class="ala_b"></div>
</div>
<div class="puerta-ingreso_a">
<div class="ala_a"></div>
<div class="ala_b"></div>
</div>
</div>
<div class="c-izq">
<div id="c8" class="c-izq__tienda">C8</div>
<div id="c9" class="c-izq__tienda">C9</div>
<div id="c10" class="c-izq__tienda">C10</div>
<div id="c11" class="c-izq__tienda">C11</div>
<div id="c12" class="c-izq__tienda">C12</div>
<div id="c13" class="c-izq__tienda">C13</div>
<div id="c14" class="c-izq__tienda">C14</div>
</div>
<div class="ca-mid">
<div class="ca-mid__izq">
<div id="c1" class="ca-mid__izq__tienda">C1</div>
<div id="c2" class="ca-mid__izq__tienda">C2</div>
<div id="c3" class="ca-mid__izq__tienda">C3</div>
<div id="c4" class="ca-mid__izq__tienda">C4</div>
<div id="c5" class="ca-mid__izq__tienda">C5</div>
<div id="c6" class="ca-mid__izq__tienda">C6</div>
<div id="c7" class="ca-mid__izq__tienda">C7</div>
</div>
<div class="ca-mid__der">
<div id="a5" class="ca-mid__der__tienda">A5</div>
<div id="a6" class="ca-mid__der__tienda">A6</div>
<div id="a7" class="ca-mid__der__tienda">A7</div>
<div id="a8" class="ca-mid__der__tienda">A8</div>
<div id="a9" class="ca-mid__der__tienda">A9</div>
<div id="a10" class="ca-mid__der__tienda">A10</div>
<div id="a11" class="ca-mid__der__tienda">A11</div>
</div>
</div>
<div class="a-der">
<div id="a1a" class="a-der__tienda">A1-A</div>
<div id="a1b" class="a-der__tienda">A1-B</div>
<div id="a2" class="a-der__tienda">A2</div>
<div id="a3" class="a-der__tienda">A3</div>
<div id="a4" class="a-der__tienda">A4</div>
</div>
<div class="m-der_abajo">
<div id="m8" class="m-der__tienda">
<div class="cabecera">
<h4>M8</h4>
</div>
<img src="images/automovil.svg" alt="">
<hr>
<img src="images/automovil.svg" alt="">
</div>
<div id="m7" class="m-der__tienda">M7</div>
<div id="m6" class="m-der__tienda">M6</div>
<div id="m5" class="m-der__tienda">M5</div>
</div>
<div class="m-abajo">
<div id="m3" class="m-abajo__tienda">M3</div>
<div id="m2" class="m-abajo__tienda">M2</div>
</div>
<div class="m-abajo-medio">
<div id="m4" class="m-abajo-medio__tienda">M4</div>
<div id="m1" class="m-abajo-medio__tienda">M1</div>
</div>
</div>
</div>

不知道从哪里开始

如果元素只有一个类,或者该类总是在列表的最后一个,则可以使用属性后缀选择器。

div[class$="__tienda"]{
background: red;
}

jQuery也支持相同的选择器

jQuery('div[class$="__tienda"]').css('background','red');

相关内容

  • 没有找到相关文章

最新更新