0에서 시작하는 자습의 길

0에서 시작하는 자습의 길 - css 선택기

3385 단어

  
      p   span
      div  span
    
    주요 요소
    "p1">     
    "p1 hello">     
    "p1">     
    "p1">     
    "p1">     
         
    "p2">     
    "p2">  span

공통 선택기, 모든 요소 선택

 * {
        font-size: 20px;
      }

요소 선택기, 직접 서명하면 됩니다. 지정한 모든 요소를 선택하십시오

h1 {
       color: violet;
      }

id 선택기, 라벨 이름 앞에 # 번호를 붙이고 유일한 id에 대응하면 됩니다

 #p1 {
        color: brown;
      }

class 선택기, "."추가뒤에 대응하는class

.p1 {
        color: green;
      }

.hello {
        color: blanchedalmond;
      }

선택기, 요소, id,class 선택기는 모두 함께 선택할 수 있으며 쉼표로 구분

h1,
#p1,
.p1,
.hello {
     background-color: rgb(44, 228, 228);
      }

서브원소 선택기

div > span {
          color: blueviolet;
      }

교차 선택기

span.p2 {
        color: rgb(106, 240, 16);
      }

형제원소선택기, 원소를 선택한 후의 원소

span + p {
      color: aqua;
    }

속성 선택기: 요소 선택 지정:

p[title="3"] {
      font-size: 49px;
    }

속성 선택기: 시작 요소 선택:

p[title^="aa"] {
      font-style: oblique;
    }

속성 선택기: 끝 요소 선택

p[title$="c"] {
        color: brown
    }

속성 선택기: 요소 선택 지정

p[title*="a"]{
        background-color: blueviolet;
    }

부정 선택기

p:not(.io){
    color: lightblue;
}

위조 선택기

a의 위조 클래스 선택기 a:link에서 접근하지 않은 링크 a:visited에서 접근한 링크 a:hover 마우스가 링크 a:active에서 선택한 링크의 특정 순서는hover와 함께 사용할 수 있고active는 임의의 탭을 설정할 수 있습니다

 p::selection {
      background-color: brown;
    }
    a:visited {
      color: red;
    }
    a:hover {
      color: rgb(250, 6, 197);
    }
    p:hover {
      font-size: 20px;
    }

    p:active {
      font-size: 30px;
    }

first-letter 첫 번째 요소first-line 첫 줄

p::first-letter {
      font-size: 50px;
    }
    p::first-line {
      background-color: blue;
    }

전재 대상:https://juejin.im/post/5ce3e6f6f265da1bb31c0dd8

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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