Làm cách nào để sửa đổi các thuộc tính của anh chị em với các bộ chọn CSS như: tập trung?

Question

Tôi gặp sự cố với một số mã trên trang web của mình, http://ethoma.com/wp/. Trong thanh tìm kiếm, ở bên trái, tôi muốn màu xám thường "nhấn enter để tìm kiếm" để chuyển sang màu xám nhạt khi trường tìm kiếm (anh chị em của nó): tiêu điểm được kích hoạt. Đây là mã tôi hiện có:

#s 
{ 
    min-width:98%; 
    background-color:#2a2a2a; 
    color:#d3d3d3; 
    border:2px solid #000000; 
    font-size:.85 em; 
    height:1.9em; 
    display:inline !important; 
    border-radius:5px 5px 5px 5px; 
} 

#s:focus 
{ 
    border:2px solid #2a2a2a; 
} 

#searchsub 
{ 
    color:#2a2a2a; 
    text-align:right; 
    font-size:.65em; 
    font-weight:lighter; 
} 

#s:focus #searchsub 
{ 
    color:#cccccc; 
} 

OK, #s là trường tìm kiếm và #searchsub là div mà tôi muốn chuyển #cccccc (xám nhạt). Tập hợp các dấu ngoặc nhọn cuối cùng có vẻ là nơi tôi đang gặp vấn đề (không phải là niềng răng, nhưng bộ chọn ở trên nó). Như tôi đã nói #s là anh chị em của #searchsub và ngược lại. Cảm ơn mọi câu trả lời!

Answer 1

Như stefmikhail đã nói, khoảng trống trong bộ chọn của bạn có nghĩa là #searchsub là bên trong#s. Theo như HTML là có liên quan, tuy nhiên, đó là rõ ràng là sai bởi vì các lĩnh vực input là các yếu tố có sản phẩm nào và bạn không thể có các yếu tố khác bên trong chúng.

Bạn muốn sử dụng anh chị em liền kề selector + thay vào đó, kể từ #searchsub là anh chị em ruột mà đến sau #s:

#s:focus + #searchsub 
{ 
    color:#cccccc; 
} 

Answer 2

Vấn đề với mã của bạn là bằng cách đặt #searchsub sau #s:focus trong #s:focus #searchsub, bạn đang nói với CSS để hành động theo id #searchsubbên id #s.

Tôi đồng ý với JamWaffles rằng bạn có thể làm điều này với javascript. Tôi sẽ làm điều đó với jQuery, và nếu bạn muốn, tôi có thể đăng bài như thế nào.