CSS attra()에서 색상을 지정할 수 없는 경우
9071 단어 CSS
Syntax
/* Simple usage */
attr(data-count);
attr(title);
/* With type */
attr(src url);
attr(data-count number);
attr(data-width px);
/* With fallback */
attr(data-count number, 0);
attr(src url, '');
attr(data-width px, inherit);
attr(data-something, 'default');
편리해 보이는 기능이 있네요~!한번 써볼까!css
.members .member:before {
position: relative;
font-family: "FontAwesome";
font-size: 18px;
font-weight: lighter;
content: '\f2be';
color: attr(data-color color);
margin: 2px;
}
html<div class="members">
<span class='member' data-color='#f0f'>高橋さん</span>
<span class='member' data-color='#080'>鈴木さん</span>
<span class='member' data-color='#f00'>田中さん</span>
<span class='member' data-color='#00f'>山下さん</span>
<span class='member' data-color='#f80'>橋本さん</span>
</div>
어?!아직 대응하지 못했습니다.
대책
css.members .member:before {
position: relative;
font-family: "FontAwesome";
font-size: 18px;
font-weight: lighter;
content: '\f2be';
margin: 2px;
}
.member[clr='1']:before {
color: #f0f;
}
.member[clr='2']:before {
color: #080;
}
.member[clr='3']:before {
color: #f00;
}
.member[clr='4']:before {
color: #00f;
}
.member[clr='5']:before {
color: #f80;
}
html<div class="members">
<span class='member' clr='1'>高橋さん</span>
<span class='member' clr='2'>鈴木さん</span>
<span class='member' clr='3'>田中さん</span>
<span class='member' clr='4'>山下さん</span>
<span class='member' clr='5'>橋本さん</span>
</div>
다 했어!
촌스럽다거나 자바스크립트로 하지 마.
Reference
이 문제에 관하여(CSS attra()에서 색상을 지정할 수 없는 경우), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Urushibara01/items/92a10f6b98870c8df68f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
.members .member:before {
position: relative;
font-family: "FontAwesome";
font-size: 18px;
font-weight: lighter;
content: '\f2be';
margin: 2px;
}
.member[clr='1']:before {
color: #f0f;
}
.member[clr='2']:before {
color: #080;
}
.member[clr='3']:before {
color: #f00;
}
.member[clr='4']:before {
color: #00f;
}
.member[clr='5']:before {
color: #f80;
}
<div class="members">
<span class='member' clr='1'>高橋さん</span>
<span class='member' clr='2'>鈴木さん</span>
<span class='member' clr='3'>田中さん</span>
<span class='member' clr='4'>山下さん</span>
<span class='member' clr='5'>橋本さん</span>
</div>
Reference
이 문제에 관하여(CSS attra()에서 색상을 지정할 수 없는 경우), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Urushibara01/items/92a10f6b98870c8df68f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)