CSS để chọn / định kiểu từ đầu tiên

Cái này khiến tôi hơi bối rối. Tôi muốn đặt từ đầu tiên của tất cả các đoạn trong div #content của mình ở 14pt thay vì đặt mặc định cho các đoạn (12pt). Có cách nào để thực hiện điều này trong CSS thẳng hay tôi phải gói từ đầu tiên trong một khoảng để thực hiện điều này?

Những gì bạn đang tìm kiếm là một phần tử giả không tồn tại. Có: first-letter và: first-line, nhưng không có: first-word.

Tất nhiên bạn có thể làm điều này với JavaScript. Đây là một số mã tôi tìm thấy để thực hiện điều này: http://www.dynamicsitesolutions.com/javascript/first-word-selector/

Tôi không đồng ý với Dale ... Phần tử mạnh thực sự là phần tử được sử dụng sai, ngụ ý điều gì đó về ý nghĩa, cách sử dụng hoặc sự nhấn mạnh của nội dung trong khi bạn chỉ đơn giản có ý định cung cấp phong cách cho phần tử.

Lý tưởng nhất là bạn có thể thực hiện điều này với lớp giả và biểu định kiểu của mình, nhưng vì điều đó là không thể, bạn nên làm cho đánh dấu của mình chính xác về mặt ngữ nghĩa và sử dụng <span class="first-word">.

Điều tương tự, với jQuery:

$('#links a').each(function(){
    var me = $(this);
    me.html( me.text().replace(/(^\w+)/,'<strong>$1</strong>') );
  });

hoặc là

$('#links a').each(function(){
    var me = $(this)
       , t = me.text().split(' ');
    me.html( '<strong>'+t.shift()+'</strong> '+t.join(' ') );
  });

(Qua 'Wizzud' trên Danh sách gửi thư jQuery )

Đáng buồn thay, ngay cả với những thứ thích của CSS 3, chúng tôi vẫn không có những thứ thích, :first-word :last-wordv.v. bằng cách sử dụng CSS thuần túy. Rất may, ngày nay hầu như có JavaScript cho mọi thứ mà tôi đề xuất. Sử dụng nthEverything và jQuery bạn có thể mở rộng từ các phần tử Pseudo truyền thống.

Hiện tại, các Pseudos hợp lệ là:

• :first-child
• :first-of-type
• :only-child
• :last-child
• :last-of-type
• :only-of-type
• :nth-child
• :nth-of-type
• :nth-last-child
• :nth-last-of-type

Và sử dụng nth Mọi thứ chúng ta có thể mở rộng điều này thành:

• ::first-letter
• ::first-line
• ::first-word
• ::last-letter
• ::last-line
• ::last-word
• ::nth-letter
• ::nth-line
• ::nth-word
• ::nth-last-letter
• ::nth-last-line
• ::nth-last-word

Giải pháp CSS thuần túy:

Sử dụng: lớp giả dòng đầu tiên.

display:block;
Width:40-100px; /* just enough for one word, depends on font size */
Overflow:visible; /* so longer words don't get clipped.*/
float:left; /* so it will flow with the paragraph. */
position:relative; /* for typeset adjustments. */

Không kiểm tra điều đó. Khá chắc chắn rằng nó sẽ hoạt động tốt cho bạn tho. Tôi đã áp dụng quy tắc khối cho lớp giả trước đây. Bạn có thể gặp khó khăn với độ rộng cố định cho mỗi từ đầu tiên, vì vậy text-align: center; và cung cấp cho nó một nền đẹp hoặc một cái gì đó để đối phó với không gian âm.

Hy vọng rằng sẽ làm việc cho bạn. :)

-Motekye

Bạn phải gói từ trong một khoảng thời gian để thực hiện điều này.

Sử dụng yếu tố mạnh mẽ , đó là mục đích của nó:

<div id="content">
    <p><strong>First Word</strong> rest of paragraph.</p>
</div>

Sau đó, tạo kiểu cho nó trong style sheet của bạn.

#content p strong
{
    font-size: 14pt;
}

Đây là một chút JavaScript và jQuery mà tôi đã tập hợp lại để gói từ đầu tiên của mỗi đoạn bằng một <span>thẻ.

$(function() {
    $('#content p').each(function() {
        var text = this.innerHTML;
        var firstSpaceIndex = text.indexOf(" ");
        if (firstSpaceIndex > 0) {
            var substrBefore = text.substring(0,firstSpaceIndex);
            var substrAfter = text.substring(firstSpaceIndex, text.length)
            var newText = '<span class="firstWord">' + substrBefore + '</span>' + substrAfter;
            this.innerHTML = newText;
        } else {
            this.innerHTML = '<span class="firstWord">' + text + '</span>';
        }
    });
});

Sau đó, bạn có thể sử dụng CSS để tạo kiểu cho .firstWord.

Nó không hoàn hảo, vì nó không tính đến mọi loại khoảng trắng; tuy nhiên, tôi chắc chắn rằng nó có thể đạt được những gì bạn đang mong muốn với một vài chỉnh sửa.

Hãy nhớ rằng mã này sẽ chỉ thực thi sau khi tải trang, vì vậy có thể mất vài giây để thấy hiệu quả.

Không có một phương pháp CSS đơn giản nào cho việc này. Bạn có thể phải sử dụng JavaScript + Regex để bật lên trong một khoảng thời gian.

Tốt nhất, sẽ có một phần tử giả cho từ đầu tiên, nhưng bạn không may mắn vì điều đó dường như không hoạt động. Chúng tôi có: chữ cái đầu tiên và: dòng đầu tiên.

Bạn có thể sử dụng kết hợp: after hoặc: before để đạt được nó mà không cần sử dụng khoảng cách.

Chèn Span Tag vào văn bản đoạn văn của bạn. Đối với Ví dụ- <p><span>Hello</span>My Name Is Dot</p và sau đó định kiểu chữ cái đầu tiên.

Một cách dễ dàng để thực hiện với HTML + CSS:

TEXT A <b>text b</b>

<h1>text b</h1>

<style>
    h1 { /* the css style */}
    h1:before {content:"text A (p.e.first word) with different style";    
    display:"inline";/* the different css style */}
</style>