[css] CSS 역할 스타일을 지정하는 방법

특정 div에 액세스하는 선택기를 작성하는 가장 짧은 방법은 다음을 사용하는 것입니다.

[role=main] {
  /* CSS goes here */
}

이전 답변은 잘못되지 않았지만 div 또는 특정 ID를 사용하여 사용자에게 의존합니다. 이 선택기를 사용하면 모든 종류의 미친 마크 업을 가질 수 있으며 여전히 작동하며 특이성 문제를 피할 수 있습니다.

[role=main] {
  background: rgba(48, 96, 144, 0.2);
}
div,
span {
  padding: 5px;
  margin: 5px;
  display: inline-block;
}

<div id="content" role="main">
  <span role="main">Hello</span>
</div>

답변

 #content[role=main]{
   your style here
}

 element[role="ourRole"] {
    requried style !important; /*for overriding the old css styles */
    }