Có một bộ chọn CSS cho các nút văn bản không?

173

Những gì tôi muốn làm (không phải trong IE rõ ràng) là:

p:not(.list):last-child + :text {
  margin-bottom: 10px;
}

Mà sẽ cho một nút văn bản một lề. (Điều đó thậm chí có thể chứ?) Làm thế nào tôi có được nút văn bản với CSS?

css css-selectors

— Rudie
nguồn

Bạn có thể sử dụng gần đúng ::first-line, mặc dù như tên cho thấy, nó chỉ áp dụng cho dòng văn bản đầu tiên. (Ngoài ra, tôi nghĩ rằng chỉ có một số thuộc tính có thể được đặt trên nó)

— Mark Garcia

Câu trả lời:

114

Các nút văn bản không thể có lề hoặc bất kỳ kiểu nào khác được áp dụng cho chúng, vì vậy mọi thứ bạn cần kiểu được áp dụng phải nằm trong một phần tử. Nếu bạn muốn một số văn bản bên trong phần tử của bạn được tạo kiểu khác đi, hãy bọc nó trong một spanhoặc div, ví dụ.

— Gia-cốp
nguồn

Tuy nhiên tôi vẫn rất thiếu :: trước và :: sau trên các nút văn bản.

— shabunc

I'm nevertheless desperately missing ::before and ::after on text nodes.Thật. Họ có thể không định dạng, nhưng họ chắc chắn thực hiện content.

— Synetech

Đó là một câu hỏi hoàn toàn hợp lý để hỏi làm thế nào để nhắm mục tiêu một nút văn bản. Tôi nhận ra OP đặc biệt nói "lề" nhưng chúng là các kiểu khác có thể được áp dụng cho nút văn bản và bạn có thể muốn áp dụng cho nút văn bản chứ không phải nút cha. Ví dụ, giả sử tôi muốn có một đường viền dưới bên dưới văn bản. Áp dụng đáy biên đó cho nút văn bản sẽ có kết quả mong muốn, nhưng áp dụng nó để nói div cha, sẽ tạo ra một viền dưới xung quanh toàn bộ div. Thật không may, tất nhiên, CSS không cho phép bạn nhắm mục tiêu nút văn bản bằng cách thêm các phần tử HTML ... ít nhất là vào lúc này.

— VKK

bạn có thể đặt phông chữ cho nó, chắc chắn hoạt động, nhưng bất kỳ phong cách nào khác không được áp dụng

— Hamid Bahmanabady

Bạn chỉ có thể làm những thứ như thế này cho stackoverflow.com/questions/10645552/ cấp

— sợ hãi

Bạn không thể nhắm mục tiêu các nút văn bản bằng CSS. Tôi với bạn; Tôi ước bạn có thể ... nhưng bạn không thể :(

Nếu bạn không bao bọc nút văn bản <span> giống như @Jacob gợi ý , thay vào đó, bạn có thể cung cấp phần tử xung quanh paddingtrái ngược với margin:

HTML

<p id="theParagraph">The text node!</p>

CSS

p#theParagraph
{
    border: 1px solid red;
    padding-bottom: 10px;
}

— Richard JP Le Guen
nguồn