저는 3~4개를 반복해서 사용합니다. 유용한 기능이 많으므로 요약해 보겠습니다.
1. TYPE 선택 스위치(중요)
HTML 요소의 이름을 선택자로 사용하는 것을 의미합니다.
유형 선택자, 요소 선택자 및 태그 선택자는 대략 같은 방식으로 이해할 수 있습니다.
형식은
요소명 {attribute:value;}=p{color:red;}=h1{fontsize:20px;}
위와 같이 모든 HTML 요소를 선택자로 사용할 수 있습니다.
2. 풀옵션
선택기의 별표
모든 요소의 스타일을 설정합니다. 모든 아이템에 적용되기 때문에 변화는 없으나 로딩 속도가 떨어질 때 사용할 수 있습니다.
형식은
요소 이름 {속성: 값;} = * { 여백: 0; 패딩;0;}
3. CLASS 선택자 및 ID 선택자(중요)
클래스 또는 id 값이 HTML 요소에 할당된 경우 해당 요소에 직접 액세스할 수 있습니다.
id 선택자는 고유한 요소에 액세스하는 데 사용되며 #은 id 값을 지정합니다. (#성)
클래스 선택기는 여러 번 사용할 수 있으며 일관된 스타일을 나타내기 위해 한 번에 여러 항목을 선택할 때 유용합니다.
.클래스 이름(.name)
< 스타일유형=“텍스트/css”
>피 .메모
{ 색상 :파란색
;
}
= .메모
{ 색상 :파란색
;
}스타일
>
(p) 요소를 생략하고 클래스 이름(.sample)을 직접 사용할 수 있습니다.
4. 속성 선택자
특정 표현에 더미태그를 사용하지 않고도 표현할 수 있다는 점에서 유용합니다.
그러나 이 방법은 IE6 및 기타 이전 브라우저에서는 지원되지 않습니다.
elementname(attributename=”attributevalue”) {속성: 값;}
< 스타일유형=“텍스트/css”
>ㅏ (href^=”http”)
{ 배경색 :빨간색
;
}
ㅏ (href^=”http://”)
{ 글꼴 크기 :22픽셀
;
}스타일
>
즉, 요소 아래에서 href 속성이 “http://”로 시작하는 요소만 22px의 더 큰 글꼴 크기로 표시되어야 합니다.
<울
><왼쪽> ㅏ헥사=“#테스트.html”>속성 선택 테스트ㅏ>왼쪽
><왼쪽> ㅏ헥사=“http://www.css3.com/“>속성 선택 테스트ㅏ>왼쪽
>울
>
![[CSS] 선택자(Selector)에 1](https://blog.kakaocdn.net/dn/cp01Rm/btr0nDZjT6q/iO2j8kV1kdx19lTKPKqytK/img.png)
5. 의사 요소 및 의사 클래스-1
1) 첫째 자녀 가상수업< 스타일유형=“텍스트/css”
> .텍스트
{ 글꼴 크기 :12px
; 글꼴 두께 :분명히
; 색상 :#44C4DF
; 넓은 :500픽셀
;
}
.텍스트피 :첫 번째 자식
{ 색상 :#E7963D
; 글꼴 크기 :15픽셀
; 텍스트 들여쓰기 :1시
;
}스타일
>
‘lyrics’ 클래스의 자식 중 첫 번째 p 요소에만 속성이 적용됩니다.
올바르게 사용하면 불필요한 클래스를 사용하지 않는 방법입니다.
금빛 풀밭에 메기처럼 앉아 놀던 곳 물레방아 메기 소리 들려 희미한 옛 생각
정원의 덤불이 무성해지고 장미가 활짝 피었습니다. 물레방아 소리가 멈췄다. 메기
![[CSS] 선택자(Selector)에 2](https://blog.kakaocdn.net/dn/c49Xnc/btr0uxv1MVw/Xcb7V2jngVisjmBaQQSuW0/img.gif)
2) 가상 클래스 연결
이 부분이 많이 쓰여서 정의만 보고 갑니다.
< 스타일유형=“텍스트/css”
> /* 방문하지 않은 링크
*/ .ㅏ
{ 텍스트 장식 :없음
; ㅏ :지름길{색상:파란색
;
}
/* 방문한 링크
*/ㅏ :방문
{ 색상 :분홍색
;
}
/* 링크에 마우스를 올리면
*/ㅏ :호버
{ 색상 :주황색
;
}
/* 활성 링크
*/ㅏ :활동적인
{ 색상 :빨간색
;
}
/*
포커스가 링크에 있을 때ㅏ :집중하다
{ 배경색 :#ffc
;
}스타일
>
선언 순서에 유의하십시오. 링크 -> 방문 -> 마우스 오버 -> 활성 -> 포커스.
3) 첫 줄과 첫 글자의 가상 요소
< 스타일유형=“텍스트/css”
> 몸
{ 글꼴 크기 :12px
;
}
h2
{ 색상 :손님 #666
;
}
.선피 :첫 번째 줄
{ 글꼴 크기 :12px
; 글꼴 두께 :분명히
; 색상 :#44C4DF
; 넓은 :100%
;
}
.편지피 :첫 편지
{ 색상 :#E7963D
; 글꼴 크기 :22픽셀
; 텍스트 들여쓰기 :4시
; 글꼴 두께 :분명히
;
}스타일
>
<h2>첫 번째 줄의 의사 요소h2
>< 다양한수업=“선”
><피>옛날 옛적 황금빛 풀밭에 메기처럼 앉아서 놀았지 물레방아 메기 소리가 들리네 막연한 내 생각 정원의 덤불은 무성하고 장미는 활짝 피었네피
>다양한
><h2>초기 의사 요소h2
>< 다양한수업=“편지”
><피>물레방앗간 소리가 멈췄어, 사랑하는 메기야, 이제 우리는 늙었고 메기 머리는 회색으로 변했어.피
>다양한
>
첫 줄은 단락의 첫 줄을 의미하며,
![[CSS] 선택자(Selector)에 3](https://blog.kakaocdn.net/dn/FiGGv/btr0olcOyxF/96vO9sDFrxObItbzp8BN1K/img.png)
첫 글자 스타일은 첫 글자에 적용됩니다.
4) 가상 요소 전, 후
< 스타일유형=“텍스트/css”
> 몸
{ 글꼴 크기 :15픽셀
; 행 높이 :150%
;
}
.cnt 피 :전에
{ 내용물 :“ 노래 시작> “
; 색상 :빨간색
;
}
.cnt 피 :후에
{ 내용물 : “노래 끝”
; 색상 :빨간색
;
}스타일
>
< 다양한수업=“cnt”
><피>오래전에 나는 황금빛 풀 정원에 앉아 메기처럼 놀았어 물레방아 메기 소리가 들려 조용한 옛 생각 정원의 덤불이 무성해지고 장미꽃이 피었지 물레방아 소리가 메기를 멈추게 했어 나의 사랑하는 메기는 이제 우리는 늙고 메기 머리가 회색으로 변했습니다. 오래된 노래를 부르자 메기 내 사랑하는 메기피
>다양한
>
![[CSS] 선택자(Selector)에 4](https://blog.kakaocdn.net/dn/cIs73Z/btr0p7SrMln/bHKqUh3uIksbJKwLPJiS6K/img.png)
6. 셀렉터 조합
1) 하위 선택
가장 일반적으로 사용되는 방법.
부모 요소에 포함된 자식 요소에 스타일을 지정하고 선택자 사이에 공백을 두고 선택자를 구분하고 싶을 때 사용합니다.
div가 아닌 p 요소에 적용됩니다.
2) 자식 선택하위 선택과 차이점은 무엇입니까물려받을 수 없다
그것은.
<- 여기에만 적용
3) 인접 선택자
같은 수준의 요소 중에서 첫 번째 요소 + 두 번째 요소라고 생각하시면 됩니다.
첫 번째 항목
두 번째 항목
<- 여기에만 적용
세 번째 요소
h2가 같은 수준에 있는 두 곳이 있지만 첫 번째에 인접한 요소에만 적용됩니다.
7. 그룹 선택기여러 요소에 대해 동일한 선언을 하려는 경우 쉼표(,)로 구분
지정할 수 있습니다
사업부>p,
p.note {색상:파란색;}
동시에 두 개의 서로 다른 요소에 파란색을 넣을 수 있습니다.