당신이 모를 수도 있는 유용한 CSS 선택기

<p>

<p>CSS 선택기는 웹 개발에서 중요한 역할을 하며 웹페이지 스타일 지정에 사용됩니다. 많은 사람들이 공통 선택기에 익숙하지만, 덜 일반적이지만 매우 유용한 선택기도 있습니다.

CSS 선택자란 무엇입니까?

<p>CSS 선택기는 스타일 지정을 위해 웹페이지에서 요소를 선택하는 데 사용되는 패턴입니다. 속성, 클래스, ID 등을 기반으로 요소를 찾을 수 있습니다.

자주 사용되는 CSS 선택자

<p>다음은 일반적으로 사용되는 선택기입니다.

• 요소 선택기: 특정 유형의 모든 요소를 ​​대상으로 합니다. 예를 들어 모든 <div> 요소의 스타일을 지정하려면 다음을 사용하세요.

<code>div {
  border: 1px solid black;
}</code>

• 클래스 선택기: 특정 클래스를 가진 요소를 선택합니다. "text-large"라는 클래스가 있는 경우:

<code>.text-large {
  font-size: 20px;
}</code>

• ID 선택기: 특정 ID를 가진 요소를 대상으로 합니다. ID가 "header"인 요소의 경우:

<code>#header {
  background-color: blue;
}</code>

• 속성 선택기: 특정 속성 값을 가진 요소에 사용됩니다. 예를 들어, 모든 외부 링크의 스타일을 지정하려면("rel" 속성 사용):

<code>a[rel="external"] {
  color: red;
}</code>

흔하지 않지만 유용한 CSS 선택기

하위 선택기(>)

<p>요소의 직계 하위 요소를 찾습니다. 클래스가 "컨테이너"인 상위 요소의 경우:

<code>.container > p {
  margin-left: 10px;
}</code>

하위 선택자( )

<p>이렇게 하면 요소 내의 모든 하위 항목이 선택됩니다. ID가 "main"인 div가 있고 그 안에 있는 모든 <span> 요소의 스타일을 지정하려는 경우:

<code>#main span {
  color: green;
}</code>

인접 형제 선택자( )

<p>다른 특정 요소 바로 뒤에 오는 요소를 선택합니다. 예를 들어 <h3> 요소 뒤에 <p> 요소가 있는 경우:

<code>h3 + p {
  font-weight: bold;
}</code>

범용 형제 선택자(~)

<p> 반드시 인접할 필요는 없지만 다른 요소의 형제 요소를 배치합니다. "item" 클래스가 있는 div가 있고 "detail" 클래스로 모든 후속 형제 요소의 스타일을 지정하려는 경우:

<code>.item ~ .detail {
  padding-top: 5px;
}</code>

부분 일치(^=, $=, *=)를 사용하는 속성 선택기

• 다음으로 시작(^=): "https://www.php.cn/link/e2e1cbe72ab1192e395c35295763982a"으로 시작하는 모든 이미지 소스의 스타일을 설정하려면:

<code>img[src^="https://www.php.cn/link/e2e1cbe72ab1192e395c35295763982a"] {
  border-radius: 5px;
}</code>

• ($=)으로 끝납니다: 메소드가 "post"로 끝나는 모든 양식의 경우:

<code>form[method$="post"] {
  background-color: #f0f0f0;
}</code>

• *포함(=)**: href 속성에 "제품"이 포함된 모든 링크의 스타일을 지정하려면:

<code>a[href*="product"] {
  text-decoration: underline;
}</code>

부정 의사 클래스(:not())

<p>특정 선택자와 일치하지 않는 요소를 선택합니다. 예를 들어 "hidden" 클래스가 있는 요소를 제외한 모든 요소:

<code>:not(.hidden) {
  display: block;
}</code>

대상 의사 클래스(:target)

<p>URL 조각이 요소의 ID와 일치하는 경우. ID가 "contact"인 URL 부분:

<code>div {
  border: 1px solid black;
}</code>

언어 의사 클래스(:lang())

<p>언어 속성을 기준으로 요소를 찾습니다. lang="en-US"인 요소의 경우:

<code>.text-large {
  font-size: 20px;
}</code>

의사 클래스(:has())가 있음

<p>:has() 의사 클래스는 특정 하위 요소나 하위 요소를 포함하는 요소를 선택하는 데 사용됩니다. 예를 들어, 이미지가 포함된 div의 스타일을 지정하려면 다음을 수행하세요.

<code>#header {
  background-color: blue;
}</code>

선택 의사 클래스(::selection)

<p>이 의사 클래스를 사용하면 사용자가 선택한 텍스트 부분의 스타일을 지정할 수 있습니다. 예를 들어 사용자가 단락에서 일부 텍스트를 선택한 경우:

<code>a[rel="external"] {
  color: red;
}</code>

결론

<p>이러한 흔하지 않은 CSS 선택기는 요소를 정확하게 배치하고 스타일을 지정하는 추가 방법을 제공합니다. CSS 코드의 유연성과 기능을 향상시켜 시각적으로 매력적이고 구조가 잘 구성된 웹 페이지를 더욱 강력하고 효율적으로 만듭니다.

<p>자세한 내용은 https://www.php.cn/link/8dacd3d8b9d2cd20eb244b5f745ea88e

를 참조하세요.

위 내용은 당신이 모를 수도 있는 유용한 CSS 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!