기술나눔

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

CSS CSS 스타일을 추가하기 위해 페이지에서 html 요소를 선택하는 데 사용되는 스타일 선택기입니다.

렌더링 성능을 높은 순으로 정렬합니다. 다음은 다음과 같습니다.

ID 선택자 #id

ID 속성으로 요소를 선택하고 대소문자를 구분합니다.

<p id="p1" >第一段</p>
1

#p1{
  color: red;
}
1
2
3

그러나 다음과 같은 이유로 사용을 권장하지 않습니다.

• ID 선택기가 더 높은 우선순위를 가지며 스타일을 재설정하는 것이 불편합니다.
• ID 선택기는 주로 JS에서 사용됩니다.

클래스 선택자 .class

요소의 클래스 속성을 통해스타일선택한 요소의 클래스 이름은 대소문자를 구분합니다.

가장 권장되는 CSS 선택기는 클래스 선택기가 의미상 강력하고 스타일을 재설정하기 쉽다는 것입니다.

<span class="important" >重点词汇</span>
1

.important{
  color: red;
  font-weight: bold;
}
1
2
3
4

여러 스타일 클래스를 공백으로 구분하여 동일한 요소에 추가할 수 있습니다.

<span class="important big" >巨大的重点词汇</span>
1

.important {
  color: red;
  font-weight: bold;
}
.big {
  font-size: 60px;
}
1
2
3
4
5
6
7

태그 선택기 标签名

태그 이름으로 요소를 선택하세요. 대소문자를 구분하지 않습니다.

<a href="https://www.baidu.com/" target="_blank" >百度</a>
1

a {
  text-decoration: none; /* 无文本装饰（消除默认的下划线） */
}
1
2
3

태그 선택기 성능이 좋지 않고 유지 관리 비용이 높기 때문에 권장되지 않습니다.

와일드카드 선택기 *

의사 요소를 제외한 페이지의 모든 html 요소를 선택합니다. 브라우저의 기본 스타일을 지우는 데 자주 사용되지만 성능을 소모하므로 권장되지 않습니다.

/* 清除所有html标签默认的外边距和内边距 */
* {
  margin: 0;
  padding: 0;
}
1
2
3
4
5

속성 선택기 [属性]

속성 및 속성 값을 기준으로 요소를 선택합니다. 속성은 대소문자를 구분하지 않으며 속성 값은 대소문자를 구분합니다.

의사 클래스 선택자 :状态名

다양한 상태를 기준으로 요소 선택

同一个标签，不同的状态，有不同的样式，就叫做“伪类”
1

목록에서 의사 클래스 선택기 사용

n은 0,1,2,3,4,5,6,7,8...을 의미합니다.(n = 0은 선택되지 않으므로 n이 1보다 작으면 유효하지 않습니다.)

테이블에서 의사 클래스 선택기 사용

• tr:nth-child(odd)：테이블의 행 1, 3, 5와 일치합니다. 이는 다음과 같습니다.tr:nth-child(2n+1)。
• tr:nth-child(even): 테이블의 2, 4, 6행과 일치합니다.tr:nth-child(2n)。

• 의사 클래스 선택자의 실제 예

  • 사용: 얼룩말 줄무늬, 가장자리 정렬, 지정된 범위 목록 강조 표시 및 동적 목록 적응형 레이아웃을 구현하려면 nth-child()
    https://blog.csdn.net/weixin_41192489/article/details/122089484

  • CSS는 동적 표시 및 숨기기를 구현합니다(:checked 및 :target의 훌륭한 사용).
    https://blog.csdn.net/weixin_41192489/article/details/126267866

  • 사용: 더 확장, 축소 및 탭 전환을 위한 대상https://blog.csdn.net/weixin_41192489/article/details/121969768

  • 사용:MaterialDesign 스타일 상호 작용을 달성하기 위해 자리 표시자 표시
    https://blog.csdn.net/weixin_41192489/article/details/121976627

  • 사용: 자리표시자-표시됨을 통해 null 값을 확인합니다. 프롬프트는 비워둘 수 없습니다.
    https://blog.csdn.net/weixin_41192489/article/details/121977510

  • :checked는 확장 및 축소를 구현합니다.
    https://demo.cssworld.cn/selector/9/2-1.php

  • :checked는 탭 전환을 구현합니다.
    https://demo.cssworld.cn/selector/9/2-2.php

  • :checked는 사용자 정의 라디오 버튼, 체크박스, 스위치, 라벨 확인 및 머티리얼 라디오 선택을 구현합니다.
    https://blog.csdn.net/weixin_41192489/article/details/122050069

  • :valid 및 :invalid를 사용하여 기본 양식 유효성 검사 구현
    https://blog.csdn.net/weixin_41192489/article/details/122070084

  • 양식 확인 프롬프트 텍스트를 구현하려면 :필수 및 :선택 사항을 사용하세요.
    https://blog.csdn.net/weixin_41192489/article/details/122072879

  • :focus-within은 드롭다운 목록을 구현합니다.
    https://blog.csdn.net/weixin_41192489/article/details/121959850

  • 입력 상자에 초점이 맞춰지면 앞에 있는 레이블을 강조 표시합니다(링크의 방법 5 참조).
    https://blog.csdn.net/weixin_41192489/article/details/121784196

  • 마우스를 올리면 확대된 사진이 표시되고, 마우스를 클릭하면 확대된 사진이 표시됩니다.
    https://blog.csdn.net/weixin_41192489/article/details/121944791

  • :empty는 빈 요소와 누락된 필드를 숨깁니다. 스마트 팁
    https://blog.csdn.net/weixin_41192489/article/details/122086159

  • :only-child는 다중 상태 동적 로딩 애니메이션을 구현합니다.
    https://blog.csdn.net/weixin_41192489/article/details/122088416

  • :fullscreen은 클릭한 이미지를 전체 화면으로 표시합니다.
    https://blog.csdn.net/weixin_41192489/article/details/122328725

  의사 요소 선택기 ::

  전체 요소가 아닌 요소의 일부를 선택하고 스타일을 지정하는 데 사용됩니다.

  CSS2中伪元素采用单冒号前缀语法， CSS2.1中伪元素改用双冒号前缀，所有支持双冒号的浏览器同样也支持旧的单冒号语法。考虑浏览器兼容性的话，推荐使用旧的单冒号语法，否则建议使用新的双冒号前缀
  1

  ::before 그리고::after

  요소 앞과 뒤에 내용을 설정하려면 content 속성과 함께 사용해야 합니다.
  https://blog.csdn.net/weixin_41192489/article/details/115100040

  일반적으로 사용되는 실제 예:

  • 요소 앞뒤에 아이콘 추가(:before 및 ::after의 마법)
    https://blog.csdn.net/weixin_41192489/article/details/134858462
  • CSS는 수직 카테고리 탐색을 구현하기 위해 ::after 및 ::before를 교묘하게 사용합니다.
    https://blog.csdn.net/weixin_41192489/article/details/134885007
  • CSS는 탭 전환 애니메이션을 구현하기 위해 ::after를 영리하게 사용합니다.
    https://blog.csdn.net/weixin_41192489/article/details/134881852

  ::first-letter 머리 글자

  <p>很久很久以前</p>
  <p>Long long ago</p>
  1
  2

  p::first-letter {
    font-size: 2em;
    color: red;
  }
  1
  2
  3
  4

  

  ::first-line 첫번째 줄

    <div style="width: 120px">
      <p>很久很久以前，有一个白发苍苍的老人</p>
    </div>
  1
  2
  3

  p::first-line {
    color: red;
  }
  1
  2
  3

  

  ::selection 마우스를 드래그하여 영역을 선택하세요.

  <p>很久很久以前，有一个白发苍苍的老人</p>
  1

  p::selection {
    color: red;
    background-color: yellow;
  }
  1
  2
  3
  4

  

  ::placeholder 텍스트 자리 표시자

  <input placeholder="请输入" />
  1

  /* input 不写，则会选中页面所有元素的占位符 */
  input::placeholder {
    color: red;
  }
  1
  2
  3
  4

  

  관계 선택기

  요소 간 관계를 기반으로 요소 선택

  자손 선택자 >

  태그 내에 포함된 첫 번째 수준 태그는 해당 하위 태그입니다.

  <div>
      <p>我是div的儿子</p>
  </div>
  1
  2
  3

  div>p{
    color:red;
  }
  1
  2
  3

  자손 선택자 空格

  태그 내의 모든 태그는 해당 태그의 하위 항목입니다.

    <div class="parent">
      <p class="red">我是子代（属于后代）</p>
      <p>我是子代（属于后代，但没有 .red）</p>
      <div>
        <div class="red">我是孙代（也属于后代）</div>
      </div>
    </div>
  1
  2
  3
  4
  5
  6
  7

  /* 所有属于.parent元素内部的.red元素都将被染成红色。*/
  .parent .red {
    color: red;
  }
  1
  2
  3
  4

  

  형제 선택자 ~

  동일한 상위 요소 아래에서 지정된 요소를 선택합니다.~ 후에같은 수준의 모든 요소는 엄밀히 말하면 호출되어야 합니다. 后面兄弟选择器

  <div>
    <button>按钮1(不会变红)</button>
    <p>段落</p>
    <button>按钮2（会变红）</button>
  </div>
  1
  2
  3
  4
  5

  p ~ button {
    color: red;
  }
  1
  2
  3

  

  CSS 아니요 前面兄弟选择器 , 아래 링크를 참조하여 구현을 시뮬레이션할 수 있습니다.
  https://blog.csdn.net/weixin_41192489/article/details/121784196

  이웃 형제 선택자 +

  요소 바로 다음의 다음 요소를 선택합니다.

    <div class="parent">
      <p>段落</p>
      <button>按钮1</button>
      <button>按钮2</button>
    </div>
  1
  2
  3
  4
  5

  p + button {
    color: red;
  }
  1
  2
  3

  

  교차로 선택기

  여러 선택기와 동시에 일치하는 페이지의 요소를 선택하세요.

  • 선택자 사이에는 공백이 없습니다. (공백은 하위 선택자입니다.)
  • 태그 선택기가 있는 경우 태그 선택기를 먼저 배치해야 합니다.

      <p class="red">很久很久以前1</p>
      <p>很久很久以前2</p>
  1
  2

  /* 选中 p 标签中class值含 red 的元素 */
  p.red {
    color: red;
  }
  1
  2
  3
  4

  

  유니온 선택기 ,

  여러 개의 선택자 중 하나를 만족하면 선택됩니다.

  • 여러 선택기 사이에 사용됨 , 분리된

   <p class="error">报错信息</p>
   <p class="important">重要信息</p>
   <p>其他信息</p>
  1
  2
  3

  .error,
  .important {
    color: red;
  }
  1
  2
  3
  4