CSS để thay đổi màu sắc của từ cuối cùng trong h1

Question

Tôi có một trang web mà tôi đang phát triển sử dụng CSS3 và tôi có h1 tag cho danh hiệu:

<h1>main title</h1> 

Bây giờ tôi muốn title có thể trong một màu sắc khác nhau:

<h1>main <span>title</span></h1> 

Vì vậy, tôi làm:

h1 { 
color: #ddd; 
} 
h1 span { 
color: #333; 
} 

có cách nào không để sử dụng thẻ span và chỉ chỉ định trong CSS từ cuối cùng là màu khác?

Answer 1

Điều này là không thể với CSS thuần túy.Tuy nhiên, bạn có thể sử dụng lettering.js để có bộ chọn ::last-word. CSS-Tricks có một bài viết nổi bật về điều này: CSS-Tricks: A call for nth-everything. Sau đó, bạn có thể làm như sau:

h1 { 
    color: #f00; 
} 

/* EDIT: Needs lettering.js. Please read the complete post, 
* before downvoting. Instead vote up. Thank you :) 
*/ 
h1::last-word { 
    color: #00f; 
} 

Answer 2

CSS hoạt động trên các phần tử ... nhưng thường không có trên văn bản hoặc dữ liệu bên trong phần tử. Bạn có thể sử dụng Javascript, nếu bạn muốn, để làm việc với các văn bản thực tế bên trong của các yếu tố, mặc dù.

Answer 3

CSS không thực sự tương tác với văn bản theo cách đó. nó tương tác với các phần tử trong cây DOM. Thêm một khoảng xung quanh từ đó là cách tiêu chuẩn (mà tôi đã thấy, ít nhất) phân biệt một đoạn văn bản. Chỉ cần sử dụng thẻ span, người duy trì mã sẽ cảm ơn bạn vì nó.

Answer 4

Không. Không có bộ chọn cho các từ cụ thể, xem Selectors Level 3: 2. Selectors.

Bạn phải sử dụng thẻ span hoặc chạy JavaScript để chuyển đổi mọi từ thành một khoảng có chứa từ đó.

Answer 5

Không, không có bộ chọn nào trong CSS có thể tham chiếu đến từ cuối cùng (hoặc thứ nhất) của một phần tử. Có các phần tử giả cho chữ cái đầu tiên và dòng đầu tiên, nhưng các từ cần phải được bọc trong các thùng chứa để tạo kiểu riêng cho chúng.

Answer 6

Không, không có. Chỉ có ::first-letter và ::first-line tồn tại trong CSS. Mọi thứ khác phải được thực hiện thủ công với một phần tử (ví dụ: span).

Lưu ý: Cả ::first-word cũng không ::last-word được lên kế hoạch, ít nhất là không trong Selectors level 4 spec.

Answer 7

CSS không có kiến ​​thức về từ. Điều duy nhất tồn tại là: chữ cái đầu tiên và: dòng đầu tiên. Một cấu trúc như một từ và phần tử giả cho lần cuối không tồn tại.

Nếu bạn thực sự muốn có giải pháp thay thế trong một phần tử, thì bạn phải sử dụng javascript để phân tích cú pháp từ cuối cùng. Tôi nghĩ cách bạn đang đi là cách tốt nhất khi bạn chỉ có một vài trường hợp trên trang.

Nếu bạn sử dụng nó cho h1 thì bạn nên có nó như vậy hoặc chỉ một lần trên trang.

Answer 8

Có lẽ với "sau khi" chọn

element1 
{ 
    properties 
    main 
} 

element1:after 
{ 
    content: "title"; 
    color: pickone; 
} 

Tôi khuyên bạn nên nghỉ với "nhịp cầu". Nếu bạn không muốn có một css lớn với công cụ bổ sung đó, bạn luôn có thể làm điều này trong html của mình:

<span style="color:#000;">text</span> 

Answer 9

"cuối cùng" sẽ không hoạt động trên mọi trình duyệt; ví dụ, nó không hoạt động với Safari. Tôi sẽ không sử dụng câu trả lời được chấp nhận. Tôi không nghĩ rằng nên nhập toàn bộ thư viện hoặc plugin chỉ để thay đổi từ cuối cùng của một tiêu đề, nó giống như "giết chết một khẩu pháo" ... Thay vào đó tôi sẽ sử dụng một hàm Javascript duy nhất, và một lớp học toàn cầu. Một cái gì đó như thế này:

<h1>This is my awesome <span class="last-word">title</span></h1> 

CSS:

<style> 
    .last-word {font-weight:bold; /* Or whatever you want to do with this element */ } 
</style> 

Ban đầu, bạn sẽ có một cái gì đó như thế này:

<h1 class="title">This is my awesome title</h1> 

Sau đó, bạn có thể khởi tạo một phương pháp Javascript để thay đổi từ cuối cùng trên $ (document) .ready() =>

<script> 
    $(document).ready(function() { 
     $('.title').each(function(index, element) { 
      var heading = $(element); 
      var word_array, last_word, first_part; 

      word_array = heading.html().split(/\s+/); // split on spaces 
      last_word = word_array.pop();    // pop the last word 
      first_part = word_array.join(' ');  // rejoin the first words together 

      heading.html([first_part, ' <span class="last-word">', last_word, '</span>'].join('')); 
     }); 
    }); 
</script> 

Chúc may mắn.

Answer 10

Lấy câu trả lời của iblue nhưng làm cho hợp lý hơn một chút.

Sử dụng lettering.js với các thiết lập sau:

$(document).ready(function() { 
    $('h1').lettering('words'); 
}); 

Điều đó sẽ tách ra bất kỳ thẻ <h1> vào một cái gì đó giống như vậy:

<h1> 
    <span class="word1">Highlight</span> 
    <span class="word2">the</span> 
    <span class="word3">last</span> 
    <span class="word4">word</span> 
    <span class="word5">a</span> 
    <span class="word6">different</span> 
    <span class="word7">color</span> 
</h1> 

Dĩ nhiên chúng ta không thể chỉ nhắm mục tiêu .word7 như rằng có thể không là người cuối cùng để chúng tôi có thể sử dụng lớp giả CSS :last-child.

h1 { 
    color: #333; 
} 

h1 > span:last-child { 
    color: #c09; 
} 

Bây giờ từ cuối cùng là một màu khác. Check out the live example.

Chỉ có điều phải cẩn thận về là support for :last-child