ฉันสามารถใช้สไตล์ CSS กับชื่อองค์ประกอบได้หรือไม่

ขณะนี้ฉันกำลังทำงานในโครงการที่ฉันไม่สามารถควบคุม HTML ที่ฉันใช้สไตล์ CSS ได้ และ HTML นั้นไม่มีป้ายกำกับที่ดีมากในแง่ที่ว่ามีการประกาศ ID และคลาสไม่เพียงพอที่จะแยกความแตกต่างระหว่างองค์ประกอบ

ดังนั้นฉันกำลังมองหาวิธีที่ฉันสามารถใช้สไตล์กับวัตถุที่ไม่มีแอตทริบิวต์ id หรือคลาส

บางครั้งไอเท็มฟอร์มมีแอตทริบิวต์ "name" หรือ "value":

<input type="submit" value="Go" name="goButton">

มีวิธีที่ฉันสามารถใช้สไตล์ตาม name = "goButton" หรือไม่? แล้ว "คุณค่า" ล่ะ?

มันเป็นสิ่งที่ยากที่จะค้นพบเพราะการค้นหาของ Google จะค้นหาอินสแตนซ์ทุกประเภทที่คำกว้าง ๆ เช่น "ชื่อ" และ "ค่า" จะปรากฏในหน้าเว็บ

ฉันสงสัยว่าคำตอบคือไม่ ... แต่บางทีใครบางคนอาจมีแฮ็คที่ฉลาด?

คำแนะนำใด ๆ ที่จะได้รับการชื่นชมอย่างมาก

คุณสามารถใช้ตัวเลือกแอททริบิวต์

input[name="goButton"] {
  background: red;
}

<input name="goButton">

โปรดทราบว่าไม่รองรับ IE6

อัปเดต: ในปี 2559 คุณสามารถใช้งานได้ตามที่คุณต้องการเนื่องจาก IE6 เสียชีวิต http://quirksmode.org/css/selectors/

http://reference.sitepoint.com/css/attributeselector

ตัวอย่างการป้อนข้อความ

input[type=text] {
  width: 150px;
}

input[name=myname] {
  width: 100px;
}

<input type="text">
<br>
<input type="text" name="myname">

คุณสามารถใช้ตัวเลือกแอททริบิวต์ แต่มันจะไม่ทำงานใน IE6 อย่างที่ meder กล่าวว่ามีวิธีแก้ปัญหาจาวาสคริปต์ในสรรพสินค้านั้น ตรวจสอบSelectivizr

รายละเอียดเพิ่มเติมเกี่ยวกับตัวเลือกคุณลักษณะ: http://www.css3.info/preview/attribute-selectors/

/* turns all input fields that have a name that starts with "go" red */
input[name^="go"] { color: red }

สำหรับ googler ในอนาคต, FYI, วิธีการในคำตอบโดย @meder, สามารถใช้กับองค์ประกอบใด ๆ ที่มีแอตทริบิวต์ชื่อได้, ดังนั้นสมมติว่า<iframe>มีชื่อxyzแล้วคุณสามารถใช้กฎเป็นรายละเอียดข้างล่าง

iframe[name=xyz] {    
    display: none;
}   

nameแอตทริบิวต์ที่สามารถใช้กับองค์ประกอบต่อไปนี้:

• <button>
• <fieldset>
• <form>
• <iframe>
• <input>
• <keygen>
• <map>
• <meta>
• <object>
• <output>
• <param>
• <select>
• <textarea>

ถ้าฉันเข้าใจคำถามของคุณแล้ว

ใช่คุณสามารถกำหนดรูปแบบขององค์ประกอบแต่ละรายการได้หากมี ID หรือชื่อ

เช่น

ถ้ามี id คุณก็สามารถควบคุมองค์ประกอบเช่น

<input type="submit" value="Go" name="goButton">

var v_obj = document.getElementsById('goButton');

v_obj.setAttribute('style','color:red;background:none');

หากมีชื่ออื่นคุณสามารถควบคุมองค์ประกอบที่ต้องการได้

<input type="submit" value="Go" name="goButton">

var v_obj = document.getElementsByName('goButton');

v_obj.setAttribute('style','color:red;background:none');

การใช้ที่[name=elementName]{}ไม่มีแท็กก่อนหน้านี้ก็จะใช้ได้เช่นกัน มันจะส่งผลกระทบต่อองค์ประกอบทั้งหมดที่มีชื่อนี้

ตัวอย่างเช่น:

[name=test] {
  width: 100px;
}

<input type=text name=test>
<div name=test></div>

นี่เป็นงานที่สมบูรณ์แบบสำหรับตัวเลือกแบบสอบถาม ...

var Set1=document.querySelectorAll('input[type=button]');  // by type

var Set2=document.querySelectorAll('input[name=goButton]'); // by name

var Set3=document.querySelectorAll('input[value=Go]'); // by value

จากนั้นคุณสามารถวนซ้ำคอลเล็กชันเหล่านี้เพื่อดำเนินการกับองค์ประกอบที่พบ

หากในกรณีที่คุณไม่ได้ใช้ชื่อในอินพุต แต่เป็นองค์ประกอบอื่นคุณสามารถกำหนดเป้าหมายองค์ประกอบอื่นด้วยแอตทริบิวต์นั้นได้

    [title~=flower] {
      border: 5px solid yellow;
    }

    <img src="klematis.jpg" title="klematis flower" width="150" height="113">
    <img src="img_flwr.gif" title="flower" width="224" height="162">
    <img src="img_flwr.gif" title="flowers" width="224" height="162">

หวังว่ามันจะช่วย ขอบคุณ

คุณเคยสำรวจความเป็นไปได้ในการใช้ jQuery หรือไม่? มันมีโมเดลตัวเลือกที่เข้าถึงได้มาก (คล้ายในไวยากรณ์กับ CSS) และแม้ว่าองค์ประกอบของคุณจะไม่มีรหัสคุณก็สามารถเลือกได้โดยใช้พาเรนต์ -> เด็ก -> ความสัมพันธ์ของหลาน เมื่อคุณเลือกพวกมันแล้วจะมีการเรียกใช้เมธอดที่ง่ายมาก (ฉันลืมชื่อที่แน่นอน) ที่อนุญาตให้คุณใช้สไตล์ CSS กับองค์ประกอบ

ควรใช้งานง่ายและเป็นโบนัสคุณจะเข้ากันได้ข้ามแพลตฟอร์มมาก