기술나눔

CSS 상속 및 계단식, 가중치 계산, 중요

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS 상속

하위 요소는 하위 요소에 영향을 미치는 상위 요소의 스타일 속성을 직접 상속할 수 있으므로 일부 요소에는 스타일이 설정되지 않고 스타일도 변경되었습니다.

CSS 계단식

서로 다른 선택자가 동일한 요소를 선택하며, 선택자 간의 서로 다른 속성이 중첩될 수 있으며, 동일한 속성은 가중치에 따라 덮어쓰기됩니다.

가중치 계산

가중치: 태그=1, 카테고리=10, ID=100, 행(js)=1000
먼저 요소가 선택되었는지 확인합니다. 선택되지 않은 경우 가중치는 0입니다. 선택되면 가중치가 가장 큰 요소가 우선적으로 계산됩니다. 쓴.

중요한

<style>
		/*important只作用于当前的属性，强调非常重要，不会被后续的样式覆盖，但不影响当前的权重*/
		div p{
			color: pink;
			font-size: 15px !important;
		}
		.header p{
			color: red;
			font-size: 25px;
			
		}
	</style>
</head>
<body>
	<div class="header">
		<p>段落</p>
	</div>
</body>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

위 코드에서는 .header p의 가중치가 div p의 가중치보다 크지만 div p의 글꼴 크기 속성은 !important를 사용하므로 가중치가 더 큰 글꼴 크기 설정은 적용되지 않습니다.

개인 프로필

그는 30년 이상 기술 연구에 전념해 왔으며, java, linux, javascript, php, css 등 다양한 언어에 능숙하며, 오픈 소스 분야에 많은 공헌을 했습니다. 나중에 참조할 수 있도록 기술 개발의 일부 문제를 공유하는 개발자 문서 스테이션입니다.

내 연락처 정보

우편