CSS Priority

/* 기본적인 전환 선언 */
.element {
  transition: all 0.3s ease;
  transition: background-color 0.5s ease-in-out;
}

/* 여러 속성에 대한 전환 선언 */
.button {
  transition:
    background-color 0.3s ease,
    color 0.2s linear,
    transform 0.3s ease-in-out;
}

/* 개별 전환 속성 선언 */
.card {
  transition-property: transform, opacity;
  transition-duration: 0.3s, 0.5s;
  transition-timing-function: ease-out, linear;
  transition-delay: 0s, 0.1s;
}

/* 브라우저의 기본 스타일시트에서 */
input[type="hidden"] {
  display: none !important;
}

/* Firefox의 특정 내부 스타일 */
input::-moz-focus-inner {
  border: none !important;
  padding: 0 !important;
}

/* Chrome의 자동완성 스타일 */
input:-webkit-autofill {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* 브라우저의 필수 접근성 스타일 */
[aria-hidden="true"] {
  display: none !important;
}

/* 브라우저의 기본 스타일시트 예시 */
html {
  display: block;
}

body {
  margin: 8px;
  line-height: 1.2;
}

/* 폼 요소의 기본 스타일 */
input {
  background-color: white;
  border: 1px solid gray;
  padding: 2px;
}

/* 링크의 기본 스타일 */
a:link {
  color: blue;
  text-decoration: underline;
}

/* 테이블의 기본 스타일 */
table {
  border-collapse: separate;
  border-spacing: 2px;
}

/* 사용자가 브라우저 설정을 통해 정의한 스타일 예시 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

/* 사용자 정의 글꼴 설정 */
body {
  font-family: "My Custom Font";
  font-size: 18px;
}

/* 접근성을 위한 사용자 설정 */
* {
  line-height: 2;
  letter-spacing: 0.1em;
}

/* 고대비 모드 설정 */
@media (prefers-contrast: high) {
  * {
    background: white !important;
    color: black !important;
  }
}

/* 사용자의 접근성 설정 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* 사용자의 글꼴 크기 설정 */
html {
  font-size: 20px !important; /* 사용자가 설정한 기본 글꼴 크기 */
}

/* 사용자 정의 색상 scheme */
:root {
  color-scheme: dark !important; /* 사용자가 강제로 다크 모드 설정 */
}

/* 중요한 작성자 선언 */
.element {
  color: red !important;
}

/* 중요한 작성자 선언 */
.element {
  color: blue !important;
}