Tôi có thể áp dụng kiểu CSS cho tên thành phần không?

Tôi hiện đang làm việc trong một dự án mà tôi không kiểm soát được HTML mà tôi đang áp dụng các kiểu CSS. Và HTML không được dán nhãn rõ ràng, theo nghĩa là không có đủ khai báo id và lớp để phân biệt giữa các thành phần.

Vì vậy, tôi đang tìm cách để tôi có thể áp dụng các kiểu cho các đối tượng không có thuộc tính id hoặc class.

Đôi khi, các mục biểu mẫu có thuộc tính "tên" hoặc "giá trị":

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

Có cách nào để tôi có thể áp dụng một kiểu dựa trên name = "goButton" không? Còn "giá trị" thì sao?

Đó là điều khó tìm thấy bởi vì một tìm kiếm Google sẽ tìm thấy tất cả các loại trường hợp trong đó các thuật ngữ rộng như "tên" và "giá trị" sẽ xuất hiện trong các trang web.

Tôi nghi ngờ câu trả lời là không ... nhưng có lẽ ai đó đã hack thông minh?

Bất kỳ lời khuyên sẽ được đánh giá rất cao.

Bạn có thể sử dụng bộ chọn thuộc tính,

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

<input name="goButton">

Xin lưu ý rằng nó không được hỗ trợ trong IE6.

Cập nhật: Trong năm 2016, bạn có thể sử dụng chúng khá nhiều như bạn muốn, vì IE6 đã chết. http://quirksmode.org/css/selector/

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

Ví dụ nhập văn bản

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

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

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

Bạn có thể sử dụng các bộ chọn thuộc tính nhưng chúng sẽ không hoạt động trong IE6 như meder đã nói, có các cách giải quyết javascript cho tho. Kiểm tra Chọnivizr

Chi tiết hơn về các công cụ chọn thuộc tính: http://www.css3.info/preview/attribution-selector/

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

Đối với các nhân viên của Google trong tương lai, FYI, phương thức trong câu trả lời của @meder, có thể được sử dụng với bất kỳ yếu tố nào có thuộc tính tên, vì vậy, giả sử <iframe>có một tên với tên xyzthì bạn có thể sử dụng quy tắc như là tín hiệu.

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

Các namethuộc tính có thể được sử dụng trên các yếu tố sau:

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

Nếu tôi hiểu câu hỏi của bạn ngay lúc đó,

Có, bạn có thể đặt kiểu của thành phần riêng lẻ nếu id hoặc tên của nó khả dụng,

ví dụ

nếu id có sẵn thì bạn có thể kiểm soát phần tử như,

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

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

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

khác nếu tên có sẵn thì bạn có thể kiểm soát phần tử như,

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

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

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

Sử dụng [name=elementName]{}mà không có thẻ trước sẽ làm việc quá. Nó sẽ ảnh hưởng đến tất cả các yếu tố với tên này.

Ví dụ:

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

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

Đây là công việc hoàn hảo cho bộ chọn truy vấn ...

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

Sau đó, bạn có thể lặp qua các bộ sưu tập này để hoạt động trên các yếu tố được tìm thấy.

nếu trong trường hợp bạn không sử dụng tên trong đầu vào mà là phần tử khác, thì bạn có thể nhắm mục tiêu phần tử khác có thuộc tính đó.

    [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">

mong sự giúp đỡ của nó Cảm ơn bạn

Bạn đã khám phá khả năng sử dụng jQuery chưa? Nó có một mô hình bộ chọn rất tiếp cận (tương tự cú pháp với CSS) và ngay cả khi các phần tử của bạn không có ID, bạn vẫn có thể chọn chúng bằng cách sử dụng mối quan hệ cha mẹ -> con -> cháu. Khi bạn đã chọn chúng, sẽ có một cuộc gọi phương thức rất đơn giản (tôi quên tên chính xác) cho phép bạn áp dụng kiểu CSS cho (các) phần tử.

Nó nên đơn giản để sử dụng và như một phần thưởng, rất có thể bạn sẽ rất tương thích đa nền tảng.