간단한 css 위조원소+조합

css 위조 요소 정보

고맙습니다. 좋은 엔지니어입니다.
이번에는 css의 시뮬레이션 요소에 대해 간단한 정리를 진행한다.

예제 코드

sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="sample.css">#cssファイルの読み込み
  <title>CSSの擬似要素</title>
</head>
<body>
  <div class="oya">
    <p class="child">ひとりめ</p>
    <p class="child">ふたりめ</p>
    <p class="child">さんにんめ</p>
  </div>
</body>
</html>

sample.css

.oya{
  width: 100%;
  font-size: 16px;
}

실행 결과

무엇이 위조원소입니까?

위조 원소는 원소의 일부분에 스타일을 적용할 수 있는 지정된 방법이다.
HTML의 요소를 CSS로 아날로그적으로 설정하기 때문에 인코딩 없이 장식을 적용할 수 있습니다.

:first-child,:last-child 위조 요소

예를 들어 상술한 예를 참고하여 문자 색깔을 빨갛게'한 사람'으로 바꾸고 싶은 경우.
아날로그 요소를 사용하지 않고 쓰면...
sample.html

  <div class="oya">
    <p class="child1">ひとりめ</p>#クラス名を変更している
    <p class="child">ふたりめ</p>
    <p class="child">さんにんめ</p>
  </div>

sample.css

.oya{
  width: 100%;
  font-size: 16px;
}

.child1{
  color: red;
}

실행 결과

이렇게 하려면 클래스 이름을 변경해야 합니다.
지금도 그럴 수 있지만 앞으로 표기를 하는 과정에서 학급명을 하나하나 변경해 관리하는 것은 어려워졌다.
그곳에 등장하는 것은 시뮬레이션 요소다.
이번 예에서 :first-child 시뮬레이션 요소를 사용할 수 있을 것 같다.:first-child 요소 그룹 중 첫 번째를 선택하고 수정할 수 있습니다.
sample.css

.oya{
  width: 100%;
  font-size: 16px;
}

.child:first-child{
  color: red;
}

우리 이렇게 합시다.
이것은 .child의 첫 번째 원소가 빨간색으로 변하는 묘사이다.
따라서 아까의 실행 결과와 같다.
반대로 마지막 요소만 변경하는 경우도 있습니다:last-child
sample.html

  <div class="oya">
    <p class="child">ひとりめ</p> <----これがfirst-child
    <p class="child">ふたりめ</p>
    <p class="child">さんにんめ</p>  <----これがlast-child
  </div>

sample.css

.oya{
  width: 100%;
  font-size: 16px;
}

.child:first-child{
  color: red;
  font-size: 20px;
}

.child:last-child{
  color: green;
  font-size: 30px;
  border-bottom: 1px solid green;
}

실행 결과

class 이름 모두.child위조 원소 사용
"한 명"=first-child는 빨간색 20px 크기입니다.
"꽁치"=last-child는 녹색의 30px 밑줄입니다.

:before,:after 위조 원소

다음은 :before과:after.
간단하게 말하면 그 요소에 앞서 그 다음에 무엇을 주는지.
방금 샘플 코드에 확인을 추가합니다.
sample.css

.oya{
  width: 100%;
  font-size: 16px;
}

.child:first-child{
  color: red;
  font-size: 20px;
}

.child:last-child{
  color: green;
  font-size: 30px;
  border-bottom: 1px solid green;
}

.child:before{  <----これを追加
  content: "私は";
  color: black;
  font-size: 12px;
}

실행 결과

글자가 확 늘었네.
이것은 추가되었기 때문이다.child:before.child 이전"私は"이라는 글자는 검은색 12px로 표시되었다.:after 반대로 원소의 뒤를 따를 수 있다.
sample.css

.child:after{
  content: "だよー";
  color: black;
  font-size: 12px;
}

추적하면 .child 반 뒤에 "だよー"

그렇습니다.
그럼 꽁치가 간사이인이라면 어떡하지?

위조 원소를 조합하다

아날로그 요소를 사용해서 이렇게 하려고 하는 상황.child의last-child사실 이 위조 원소는 조합해서 사용할 수 있다!
sample.css

.child:last-child:before{
  content: "ワイは";
  color: black;
  font-size: 12px;
}
.child:last-child:after{
  content: "やでー！";
  color: black;
  font-size: 12px;
}

.child의last-child의:before"ワイは".child의last-child의:after"やでー！"이면 상술한 집행 결과가 있을 것이다.

끝내다

아주 간단한 코드로 네 개의 위조 원소를 설명했다.
실제로 이렇게 사용하는 경우는 드물지만 각 시뮬레이션 요소의 사용 방법을 파악할 수 있다면
표기의 폭이 빠르게 확대될 것이다.
꼭 활용하세요.

Reference

이 문제에 관하여(간단한 css 위조원소+조합), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yoshio-the-end/items/e8da719f2864d7be952a

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

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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