텍스트 노드에 대한 CSS 셀렉터가 있습니까?

텍스트 노드에 대한 CSS 셀렉터가 있습니까?

제가 하고 싶은 일은 (IE에는 없음) 다음과 같습니다.

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

텍스트 노드에 여유를 줄 수 있습니다.(그게 가능하긴 합니까?)CSS로 텍스트 노드를 얻는 방법은 무엇입니까?

텍스트 노드에는 여백이나 다른 스타일이 적용될 수 없으므로, 적용할 스타일이 필요한 모든 스타일이 요소에 있어야 합니다.요소 안에 있는 텍스트의 일부를 다른 스타일로 만들고 싶다면 a로 포장합니다.span아니면div,예를들면.

CSS로 텍스트 노드를 대상으로 할 수 없습니다.난 당신과 함께 있어요, 당신이...하지만 당신은 할 수 없습니다 :(

텍스트 노드를 a로 감싸지 않으면<span> @Jacob이 제안하는 것처럼, 당신은 대신 주변의 요소를 줄 수 있습니다.padding와는 반대로margin:

HTML

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

CSS

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

이제 의사 요소 선택기를 사용하여 매우 특정한 사용 사례에서 텍스트 노드(특정 태그 내에 래핑되지 않음)를 대상으로 지정할 수 있습니다.쿼리 매개 변수(url-encoded; 예를 들어 공백은 다음과 같이 인코딩되어야 함)%20) 텍스트 문자열과 일치하는 스타일은 다음과 같습니다.

::target-text { /* color, background color, etc */ }

다른 하이라이트 의사 요소와 마찬가지로 여기에 나열된 특정 스타일 속성만 지원됩니다.

이에 대한 데모가 있습니다(부모 링크는 다음에 대한 MDN 페이지에 있습니다).::target-text). 'text'의 쿼리 파라미터 문자열을 다른 문자열로 변경하여 다른 텍스트가 어떻게 스타일화되는지 확인합니다.

한가지 제한점은::target-textpseudelement selector는 텍스트의 첫 번째 일치 문자열만 스타일링할 수 있습니다.또한 2022년 1월 기준 브라우저 지원율은 67.8%로 미미한 수준입니다.

언급URL : https://stackoverflow.com/questions/5688712/is-there-a-css-selector-for-text-nodes