공백이 있는 CSS와 공백이 없는 CSS에서 CLASS를 정의하는 것의 차이점은 무엇입니까?-CSS 튜토리얼-php.cn

공백이 있는 CSS와 공백이 없는 CSS에서 CLASS를 정의하는 것의 차이점은 무엇입니까?

黄舟

풀어 주다： 2017-07-22 09:42:04

원래의

2750명이 탐색했습니다.

.example .pp{  color: orange;
}.example.pp2 {  color: green;
}

로그인 후 복사

예를 들어 위의 두 가지 정의 중 하나는 중간에 공백이 있다는 의미이고, 다른 하나는 중간에 공백이 없다는 의미입니다.

第一个class要这样写生效：<p class="example">文字文字<span class="pp">pp这个class生效</span>....</p>
第二个class要这样写生效：<p class="example pp2">pp2这个class生效</p>

로그인 후 복사

죄송한데 왜이럴까요? ?

.example .pp = E F는 하위 선택자입니다.

.example.pp2는 요소에 있습니다. 이 요소는 이 두 클래스를 포함하는 경우에만 효과가 있습니다.

둘 사이에는 차이가 있어요, 큰 차이가 있어요!

.example .pp는 공백으로 구분되어 하위 선택자를 나타내며 .example 내의 .pp가 선택됩니다.
예:

<div class="example">
    <div class="pp">被选择的元素</div>
</div>

로그인 후 복사

.example.pp는 클래스에서 example과 pp를 모두 포함하는 요소를 선택합니다.
예:

<div class="example pp">
被选择的元素
</div>

로그인 후 복사

이것은 CSS 선택기의 형식으로, 공백이 없는 선택 조건은 "and" 관계이고 공백이 있는 선택 조건은 "부모-자식" 관계이며 간접적인 "부모-자식"이 될 수 있음을 규정합니다. Relationship

<style>
.e1.e2{
background-color:yellow;
}
.father .e3{
background-color:green;
}
</style>
</head>
<body>
<div class="father">
<p class="e1 e2">我住在 Duckburg。</p>
<p class="e3">我也住在 Duckburg。</p>
<div>
<p class="e3">他也住在 Duckburg。</p>
</div>
</div>
</body>

로그인 후 복사

위 코드의 첫 번째 단락 p에는 e1과 e2라는 두 개의 클래스가 있습니다. 클래스 속성의 공백과 CSS의 공백은 "and" 관계를 가집니다. 방금 언급한 CSS의 공백은 "부모와 자손" 간의 관계입니다.

첫 번째 p는 CSS가 .e1.e2 선택기를 사용하여 색상을 설정하기 때문에 노란색으로 렌더링됩니다. 즉, 이 단락에는 두 클래스가 모두 있습니다. 물론 CSS에서 .e1.e2 대신 .e1만 사용해도 같은 효과를 얻을 수 있지만, 가끔 CSS 선택기가 실수로 다른 태그에 닿는 것을 원하지 않기 때문에 그냥 자세하게 작성합니다.

두 번째 p는 p의 클래스가 e3이고 클래스 father가 있는 태그의 자손이기 때문에 .father .e3에 의해 녹색으로 렌더링되므로 녹색으로 염색됩니다.

마찬가지로, 아버지의 직계 하위 클래스는 아니지만 세 번째 p도 녹색으로 바뀌는데, 이는 공백이 있는 이 선택자가 간접 하위 클래스를 포함할 수 있음을 나타냅니다.

요소를 선택하기 위해 때때로 여러 클래스 선택기를 사용해야 하는 이유에 대해 위에서 명확하게 설명했습니다.
1 CSS의 중국어 번역은 계단식 스타일 시트이며 그 스타일은 상속 및 재정의를 기반으로 합니다. 최종 스타일을 생성합니다.
2. CSS 스타일의 가중치를 계산하는 규칙이 있으므로 가중치가 더 큰 것이 최종 스타일이므로 때로는 이전 스타일을 덮어쓰기 위해 이를 나타내는 클래스 선택기를 추가하여 가중치를 늘립니다. 요소

위 내용은 공백이 있는 CSS와 공백이 없는 CSS에서 CLASS를 정의하는 것의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!