css_02 | CSS – CSS 선택기 상세 정보

30410 단어 
     PC    ~

      “    |       ”   ，    ，    ！

css_02

1.         ？
2.          ？
3.    css    ，        ？（   ）
  ❌ header .p     id   header      p      。
  ✅ header > .p        header    class   p       。
  ✅ #header.p     id   header      class   p    。
  ✅ #header, p     id   header            p   。

선언: 이 행의 순서는 첫 번째 부분에서 HTML 문서 트리 구조를 소개하는 것입니다.이'나무 구조'를 완전히 이해하는 토대에서 글 아래에 이어지는 두 개의 큰 선택기(조합 선택기와 위조 선택기)를 잘 파악할 수 있다.이'구조 트리'가 있어야만 우리가 본 편에서 토론한'선택기'가 작용할 수 있기 때문이다.또한 크고 잡다하며 기초적이고 중요한 지식점이므로 반드시 파악해야 할 항목에 속한다.
1 HTML 문서 트리 구조
이전에 HTML 관련 지식에 대한 학습을 통해 우리는 HTML 문서는 각 요소 간의 차원 구조를 바탕으로 구축된 것이고 모든 합법적인 문서는 구조 트리를 생성한다(이하 예).
이 차원 구조에서 모든 원소는 자신의 위치를 가지고 모든 원소는 이 구조의 다른 원소에 비해 서로 또는'부자관계', 또는'조손-후손관계', 또는'직접인접관계', 또는'일반인접관계'등이 있다.
(다음 예제의 HTML 문서와 해당 구조 트리)

<html>                                            
 <head> 
  <meta charset="utf-8"> 
  <title>Oli       title>
 head>
 <body>
  <h1>《<em>Oli       em>》 :xxxh1> 
  <p><em>       ：2  ……em>p>
  <p><strong><em>  :em>strong>Oli       ……p>
  <h2> 、  xxxh2>
  <p>   <em>“  ”em>    p>     
  <h2> 、   xxxh2>                      
  <ul>
   <li>   
    <ol>                                           
     <li>what
      <ul>
       <li>wli>
       <li>wli>
       <li>hli>
      ul>
     li>                            
     <li>whyli>                           
     <li><em>howem>li>  
    ol>
   li>
   <li>   li>                           
   <li>   li>  
  ul>  
  <h2> 、   xxxh2>                      
  <ol>                                             
   <li>whatli>
   <li>whyli>                           
   <li><em>howem>li> 
  ol>                  
 body>                                            
html>

(문서 구조:)
1.1 모/자 관계 요소
문서 계층 구조의 다른 요소 위에 요소가 나타나면 전자는 후자의 부모 요소이고 후자는 전자의 하위 요소라고 합니다.
1.2 조손-후손관계원소
원소가 다른 원소의 직접 상층에 있다면 그들은'부자관계'이고 원소가 다른 원소로 가는 경로가 두 층 또는 여러 층을 지나야 한다면 이런 원소는'조손-후손관계'이다.
1.3개 요소
바디 요소는 브라우저가 기본적으로 표시하는 모든 요소의 조상이고 html 요소는 전체 문서의 조상이다(따라서 html 요소는'뿌리 요소'라고도 부른다).
2 조합 선택기
2.1 다중 요소 선택기
  • 용법: 여러 원소에 같은 양식을 적용한다.
  • 형식: 예를 들어 위의 요소 h1과 h2에 스타일을 추가하여 배경색을 yellow로 만듭니다.
    • h1,h2 {
    background:yellow;
}

    ⚠️여러 선택기 사이에 , 이 문자가 있어야 한다는 것을 주의하십시오.
    2.2 후대 선택기
  • 용법: 일부 양식, 규칙을 특정한'조손-후손 관계'가 있는 후손 요소에만 적용하고 다른 지정되지 않은 구조에서는 적용하지 않는다.
  • 형식: 예를 들어 상례에서 원소 l의 후손 원소em에 스타일을 붙여 문자를 가로줄에 그고 배경색은yellow로 그립니다.
    • ul em {
    text-decoration: line-through;
    background:yellow;
}

    ⚠️선택기 사이를 '빈칸' 이라는 '결합자' 로 구분하는 것을 주의하십시오.
    2.3 하위 요소 선택기
  • 사용법: 일부 양식, 규칙을 특정한'부자관계'가 있는 하위 요소에만 적용하고 다른 지정되지 않은 구조에서는 적용하지 않는다.
  • 형식: 예를 들어 상례에서 원소 p의 하위 원소em에 스타일을 붙여 문자를 가로줄에 그고 배경색은yellow로 그립니다.
    • p>em {
    text-decoration: line-through;
    background:yellow;
}

    ⚠️선택기 사이의 사용에 주의하시오> 이 결합부호는 분리된다.
    2.4 직접 인접 요소 선택기
  • 용법: 전제적으로 두 원소는 공통된 부원소가 있고 뒷원소가 앞원소 뒤에 이어질 때 뒷원소에 양식을 추가하고 싶다.
  • 형식: 예를 들어 상례에서 첫 번째 h2 요소의 p 요소에만 스타일을 주고 다른 p는 변하지 않으며 문자가 가로줄에 그어지고 배경색은yellow이다.
    • h2+p {
    text-decoration: line-through;
    background:yellow;
}

    ⚠️선택기 사용 주의+ 이 결합부호는 분리된다.
    2.5 일반 인접 요소 선택기
  • 용법:'직접 인접 원소 선택기'에 비해 두 원소도 반드시 공통된 부모 원소가 있어야 하지만 다음 원소는'바로 인접'이 필요 없다. 너도 다음 원소에 스타일을 추가할 수 있다.
  • 형식: 예를 들어 상례에서 첫 번째 h2 요소 뒤에 있는 h2 요소에 스타일을 추가하여 문자가 중횡선에 그어지고 배경색은yellow이다.
    • h2~h2 {
    text-decoration: line-through;
    background:yellow;
}

    ⚠️선택기 사용 주의~ 이 결합부호는 분리된다.
    3 위류
    3.1 왜'위류'가 필요한가?
    먼저 ② HTML 요소, 속성 상해에서'하이퍼링크 a 요소'에 대한 지식을 다시 복습한다.
    '링크'는 실제 페이지에 나타나는 빈도가 매우 높다. 사람들은'방문하지 않은 페이지'와'이미 방문한 페이지'를 스타일로 구분하고 싶어 한다. 직관적인 방법은 HTML 문서에서 a 요소를class 속성으로 추가하고 이 a 요소를 클래스로 추가하는 것이다.
    <a href="http://…" class="visited">     a>

    그런 다음 클래스 선택기를 통해 유형을 추가합니다.
    a.visited {
    color=red;
}

    그러나 이러한 방식은 실제 작업에 부합되지 않는다. 왜냐하면 새로운 페이지에 방문할 때마다 링크의 '클래스' 를 수정할 수 없기 때문이다.
    따라서 CSS는 HTML 문서에 입력하지 않고 스타일을 직접 추가할 수 있는 [하이퍼링크]에만 사용되는 [정적 위조]를 정의합니다.각각:
  • 이 '하이퍼링크' (즉 a 요소에 href 속성이 있음) 가 접근하지 않았음을 표시합니다.
    • :link

    ⚠️양식상의'사칭'을 주의해서 쓰세요. 이 사칭:은'위류'와'위원소'의 명함입니다.콜론과 상태link 사이에는 공백이 있을 수 없습니다.
  • 이 하이퍼링크가 액세스되었음을 나타냅니다.
    • :visited

    3.2 왜'동적 위조'가 필요합니까?
    위에서 알 수 있듯이 CSS는 수요에 적응하기 위해 가장 먼저 두 개의'정적 위조류'를 정의했지만 :link와:visited는 문서 양식의 변화에 한계가 있어 일반적으로 처음 표시한 후에 다시 작용하지 않는다.사람들의 수요는 더욱 많다.'초점 포커스'를 연결할 때, 링크에'hover를 멈출 때','활동 active'상태를 연결할 때 스타일의 구분이 필요하다.
    따라서 CSS는 세 개의'동적 위조 클래스'를 정의했는데 이것은 사용자의 행동에 따라 문서의 외관을 바꿀 수 있다.이러한 [위조 클래스] 또는 모든 [위조 클래스]를 HTML 문서에 입력하지 않고 스타일을 직접 추가할 수 있습니다.각각:
  • 이 요소는 키보드 입력을 받아들일 수 있거나 어떤 방식으로 활성화할 수 있는 '초점' 을 입력하고 있음을 표시합니다.
    • :focus
  • 마우스가 이 요소에 머물렀을 때 외관을 바꿀 수 있음을 표시한다.
    • :hover
  • 이 요소는 사용자가 '활성화' 를 입력할 수 있음을 지시한다. 예를 들어 사용자가 하이퍼링크에 머무르면 마우스를 눌렀을 때 이 링크는 '활성화' 된다.
    • :active

    ⚠️참고:
  • CSS'위조류'는 서로 다른 상태의 색을 바꿀 수 있을 뿐만 아니라 필요한 스타일도 적용할 수 있다.
  • '동적 위류'는'정적 위류'와 달리'동적 위류'는 모든 요소에 적용될 수 있고'하이퍼링크'에 국한되지 않는다.
  • '상속, 층첩'의 원인을 감안하여 (다음 편에서 상론할 것이다)'위류'의 순서는 매우 중요하다. 보통:
    • :link
:visited
:focus
:hover
:active

    4 위조 선택기
    4.1'정적, 동적 위조 선택기'사용 실례
    먼저 다시 복습: ③ HTML 폼 상해를 복습하고 폼 요소를 파악한다.그리고 다음과 같은 예를 조작한다.
    ?소스 및 효과 표시 → (다음 HTML 문서에 따라)
    
<html>
<head>
    <meta charset="utf-8">
    <title>HTML  title>
head>
<body>
  <a href="https://zhuanlan.zhihu.com/Oli-Zhao" title="Oli       ">      a>
<div class="login">                                                    
   <form action="/getinfo" method="get">                                             
       <div class="username">                                                        
          <label for="username">  label>                                          
          <input id="username"  type="text" name="username" value="Oliver">          
       div>
       <div class="password">
          <label for="password" >  label>
          <input id="password" type="password" name="password" placeholder="    "> 
       div>
       <div class="sex">
          <label>  label>                                                         
          <input type="radio" name="sex" value=" " checked>                         
          <input type="radio" name="sex" value=" "> 
       div>       
   form>
div>
body>
html>

    → (CSS 스타일 추가:)
    a:link {
    color: blue;
}

a:visited {
    color: red;
}

input:focus {
    background: yellow;
    font-weight: bold;
}

a:hover {
    font-size: 30px;
}

a:active {
    color: silver;
}

    ⚠️주의: 다음 글은 링크가 사용자의 조작 상태에 따라 바뀔 때 그 양식이 어떤 순서로 표시되는지 상세하게 설명할 것입니다.
    4.2 사용자 인터페이스 요소 클래스 선택기(UI 요소 클래스 선택기)
  • '표'요소에서 라디오와 체크박스는 모두'선택'과'미선택'상태를 가지고 있으며 다음 선택기는 이 두 가지 상태의 스타일을 정의할 수 있다.
    • :checked
  • 우리가 마우스 왼쪽 단추를 눌러 웹 페이지 단어를 찾을 때 브라우저는 기본적으로'푸른 바탕에 검은 글자'입니다. 이 스타일을 바꾸고 싶으면 아래 선택기를 사용할 수 있습니다.
    • ::selection
  • 기본적으로 웹 폼 요소는 모두'가용적'이지만 그 요소(문자 입력 상자, 암호 상자, 단일 선택 상자, 복선 상자 등)도'가용적'상태가 될 수 있다.그러면 아래의 선택기는 테이블 요소의 이 두 가지 상태에 대해 각각 스타일을 설정할 수 있다.
    • :enabled
:disabled
  • 기본적으로 웹 폼 요소는 모두'읽기와 쓰기'가능하지만 요소(입력 상자, 텍스트 영역 등)도'읽기'상태가 될 수 있습니다.그러면 아래의 선택기는 테이블 요소의 이 두 가지 상태에 대해 각각 스타일을 설정할 수 있다.
    • :read-write
:read-only

    ⚠️선택기의 형식에 주의하십시오!
    코드 인스턴스:?원본 및 효과 전시
    →(다음 HTML 문서에 따라)
    
<html>
<head>
    <meta charset="utf-8">
    <title>HTML  title>
head>
<body>
  <a href="https://zhuanlan.zhihu.com/Oli-Zhao" title="Oli       ">      a>
<div class="login">
   <form action="/getinfo" method="get">
       <div class="username">
          <label for="username">  label>
          <input id="username"  type="text" name="username" value="Oliver">
       div>
       <div class="password">
          <label for="password" >  label>
          <input id="password" type="password" name="password" placeholder="    ">
       div>
       <div class="sex">
          <label>  label>
          <input type="radio" name="sex" value=" "> 
          <input type="radio" name="sex" value=" "> 
       div>
       <div>
         <label for="enabled">  :label>
         <input type="text" name="enabled">
       div>
       <div>
         <label for="disabled">   :label>
         <input type="text" name="disabled"   disabled="disabled">
       div>
       <div>
         <label for="enabled">  :label>
         <input type="text" name="status">
       div>
       <div>
         <label for="disabled">  :label>
         <input type="text" name="status"   readonly="readonly">
       div>
   form>
div>
  <p>Oli    “      ”，     ！p>
body>
html>

    → (CSS 스타일 추가:)
    a:link {
    color: blue;
}

a:visited {
    color: red;
}

input:focus {
    background: yellow;
    font-weight: bold;
}

a:hover {
    font-size: 30px;
}

a:active {
    color: silver;
}

:checked {
    font-size: 50px;
}

p::selection {
    background-color: orange;
    color: white;
}

input:enabled {
    outline: 1px dotted black;
}

input:disabled {
    background-color: green;
}

input:read-write {
    outline: 1px dotted black;
}

input:read-only {
    background-color: gray;
}

    4.3 구조 위조 선택기
    ⚠️이런 종류의 선택기는 실례를 들어 설명해야 하며 편폭이 비교적 길기 때문에 후속으로 또 다른 문장을 설명해야 한다.이 편은 단지 관련 지식으로 열거할 뿐이다.(아래 E는 요소 요소)
    4.3.1 제1류
    1.             。
E:first-child

2.              。
E:last-child

3.         n         ，n    ：  /odd/even。
E:nth-child(n)

4.             ————           。
E:only-child

    4.3.2 제2류
    1.                。
E:first-of-type

2.                 。
E:last-of-type

3.         n        ，n    ：  /odd/even。
E:nth-of-type(n)

4.                 ————          。
E:only-of-type

    4.3.3 제3류
    1.    “   ”--html   。
:root

2.              。
E:not(selector)

3.                ，      “    ”         。
E:empty

4.          target   。
E:target

    후기: 드디어 이 편을 완성했습니다. 지식이 많습니다. 만약에 단순히 한 번만 보면 수확이 적습니다. 코드의 학습은 우리가 손을 써서 끊임없이 두드리고 끊임없이 시험해야 합니다.기계와 접촉하는 장점은 일반적으로 너를 속이지 않는다는 것이다. 옳으면 옳고 그르면 그르다.어쨌든 이 시대에 감사합니다!
    파이팅!
    전재 대상:https://juejin.im/post/5cb1cdcb6fb9a068973ecf15
    [코스 공부] 이거 배우고 아리 가자!GOGOGO
    작은 프로그램의 단추를 누르는 스타일(button-hover)은 왜 작동하지 않습니까?

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage