CSS 속성 attr()

정확하게 말하면 attr()은 속성이 아니라 CSS 함수여야 합니다. 먼저 MDN 소개를 살펴보겠습니다.

요약

attr() CSS 함수는 선택한 요소의 속성 값을 검색하여 스타일 시트에서 사용하는 데 사용됩니다. 이는 의사 요소에도 사용할 수 있으며, 이 경우 의사 요소의 속성 값입니다. 요소의 원래 요소가 반환됩니다.

attr() 함수는 모든 CSS 속성과 함께 사용할 수 있지만 콘텐츠 이외의 속성에 대한 지원은 실험적입니다.

간단한 번역, 주로 영어 수준이 제한됩니다. 나보다 영어가 약한 친구들을 위한 참고용입니다. 전문가는 무시해도 됩니다.

CSS 함수 attr()은 선택한 요소의 속성값을 구하는 데 사용되며 스타일 파일에 사용됩니다. 의사 클래스 요소에도 사용할 수 있습니다. 의사 클래스 요소에 사용하면 의사 요소의 원래 요소 값을 가져옵니다.

attr() 함수는 모든 CSS 속성과 함께 사용할 수 있지만 콘텐츠를 제외한 나머지는 아직 실험적입니다(간단히 말해서 불안정하며 브라우저에서 지원하지 않을 수 있습니다).

구체적으로 사용하는 방법은 무엇입니까? 얼마 전에 버튼에 대한 프롬프트 기능을 구현하기 위해 사용했던 적이 있습니다. 그러면 작은 프롬프트가 나타납니다.

<p class="wrap">
  <a href="#" class="btn" data-tip="点击作答">一个按钮</a></p>

.btn {
  display: inline-block;
  padding: 5px 20px;
  border-radius: 4px;
  background-color: #6495ed;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  position: relative;
}.btn::before {
  content: attr(data-tip);
  width: 80px;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: #000;
  color: #ccc;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  opacity: 0;
  transition: all .3s;
}.btn::after {
  content: '';
  border: 8px solid transparent;
  border-top: 8px solid #000;
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translate(-50%); 
  opacity: 0;
  transition: all .3s;
}.btn:hover::before {
  top: -40px;
  opacity: 1;
}.btn:hover::after {
  top: -13px;
  opacity: 1;
}

물론 attr ()는 a 태그의 href 속성 등과 같은 더 많은 다른 속성을 얻을 수도 있습니다. 직접 더 많은 사용법을 시도해 볼 수 있습니다.

더 많은 CSS 속성 attr() 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!