CSS Attributselektor für CSS Höhe Stil

Question

Würde der Wähler für

<tr style="height:64px"> 

das gleiche wie normale CSS Attributselektor, das heißt, tr[style="height:64px"] oder tr[style=height:64px] oder tr[style="height\3a 64px"]?

Ich habe sie nicht richtig ausprobiert, aber keiner der oben genannten funktionierte für mich.

UPDATE:

@torazaburo I @ balapa Antwort nicht, weil das Semikolon akzeptiert, sondern weil keiner meiner Versuche gearbeitet, aber @balapa zeigte mir einen funktionierenden Code. Ich glaube, ohne Semikolon würde es immer noch funktionieren, aber das ist für mich viel weniger wichtig, als einen funktionierenden Code zu haben.

BTW, FTR, es stellt sich heraus, dass mein Test-Tool die Ursache des Problems war, und ich habe gerade a better tool to test CSS selection from command line danach geschrieben. Damit sollte der (Go) -Wähler als tr[style=height\:64px] angegeben werden.

Answer 1

In spezifikationskonformen Browsern, wirft tr[style=height:64px] ein DOM-Fehler, sagen dies ein ungültiger Selektor ist. Die Version mit doppelten Anführungszeichen funktioniert. Dies liegt daran, dass die spec besagt, dass der Wert in einem Attributselektor eine CSS-Kennung oder eine Zeichenfolge sein muss. height:64px ist kein Bezeichner, daher schlägt es fehl. Wenn Sie es in Anführungszeichen (einzeln oder doppelt) einschließen, wird es zu einer Zeichenfolge, die funktioniert.

Wenn Sie es nicht angeben möchten, müssen Sie den Doppelpunkt mithilfe des Escape-Mechanismus für CSS-Bezeichner umgehen. Deshalb funktioniert [style=height\:64px] (zweites Beispiel unten). Für Details siehe this question, von denen diese Frage im Wesentlichen ein Duplikat ist.

[style="height\:64px"] funktioniert, weil Flucht aus dem Doppelpunkt im Wesentlichen ein No-Op ist.

[style="height\3a 64px"] funktioniert wie erwartet, mit oder ohne umgebende Anführungszeichen. \3a ist der CSS-Escape für den Doppelpunkt, und der folgende Bereich beendet die Escape-Sequenz. Ich weiß nicht, warum das nicht für dich funktioniert hat. Wenn Sie diesen Selektor als JavaScript-Zeichenfolge angegeben haben, haben Sie möglicherweise vergessen, den Backslash zu umgehen.

[style="height:64px"] funktioniert nicht, da Zeichenbezüge nur Bedeutung in HTML haben. Sie haben keine Bedeutung in CSS-Selektoren.

Nichts davon hat etwas damit zu tun, ob der Stil-Attributwert in einem Semikolon endet oder nicht. Die Beschreibung der angenommenen Antwort ist also falsch. Es funktioniert nur wegen der Anführungszeichen.

Fazit: Wickeln Sie einfach Ihre Attributwerte in Anführungszeichen und hören Sie auf, sich darüber Gedanken zu machen.

function test(sel) { 
 
    try { 
 
    console.log(sel, "yields", document.querySelector(sel)); 
 
    } catch (e) { 
 
    console.log(sel, "fails with error", e.name); 
 
    } 
 
} 
 

 
test('tr[style=height:64px]'); 
 
test('tr[style=height\\:64px]'); 
 
test('tr[style="height:64px"]'); 
 
test('tr[style="height\\:64px"]'); 
 
test('tr[style="height\\3a 64px"]');  
 
test('tr[style=height\\3a 64px]'); 
 
test('tr[style="height:64px"]');

<table> 
 
    <tr style="height:64px"></tr> 
 
</table>

Answer 2

dies tun:

.trHeight { height: 64px} 

und Code:

<tr class='trHeight"></tr> 

und greifen sie von

".trHeight" 

einen Stil-Attribut ist eine gefährliche Praxis CSS selector by inline style attribute

Answer 3

Sie müssen am Ende des HTML- und CSS-Codes ein Semikolon einfügen. Schauen Sie sich das Beispiel unten

tr[style="height:64px;"] { 
 
background: red; 
 
}

<table> 
 
    <tr> 
 
    <td>Regular TR</td> 
 
    </tr> 
 
    <tr style="height:64px;"> 
 
    <td>TR with inline style</td> 
 
    </tr>