간략한 CSS 선택자
<body>
<h1>this is a heading</h1>
</body>
위의 코드 스니펫을 보십시오. 본문 태그 안에 일부 텍스트를 포함하는 h1 요소가 있습니다. 이것을 스타일 지정하기 위해 요소 선택기가 어떻게 사용됩니까? 아래 스타일 태그 내부에 제공된 코드 스니펫을 살펴보겠습니다.
<style>
h1{
font-size: x-large;
font-weight: bold;
margin: 20px;
padding: 20px;
background-color: black;
color: white;
}
</style>
브라우저에 표시될 때 h1 텍스트의 다른 스타일로 이어지는 스타일 태그 내에서 선택된 요소에 부여한 일부 임의 속성입니다.
클래스 선택기 - html 요소 그룹에 균일한 스타일이 필요할 때 사용되는 선택기입니다.
id 선택자-이들은 관련 요소만 대상으로 하는 특별한 선택기 클래스입니다. 이 선택자는 일반적으로 변경할 요소의 특정 고유 속성을 선택하려는 경우에 사용됩니다.
보다 유니크한 스타일을 제공하기 위해
클래스 선택자는 클래스 이름이 있는 점(.) 접두사로 선택되고 ID 선택자는 ID 이름이 있는 해시(#) 접두사로 선택됩니다.
예를 들어
<body>
<h1 id="heading">
CSStutorial
</h1>
<p class="para">
hey there this is selectors tutorial
</p>
</body>
<style>
.para{
background-color: black;
color: white;
}
#heading{
font-size: x-large;
color: aqua;
}
</style>
CSS 범용 선택기
이 선택기는 html 페이지에 있는 모든 요소를 선택하고 균일한 스타일을 지정합니다.
이 선택자는 처음에 모든 요소에 몇 가지 공통 속성을 제공하기 위해 맨 처음에 사용됩니다. 나중에 덮어쓰거나 변경할 수 있습니다. 범용 선택기는 별표/별표(*)로 시작합니다.
*{
margin: 0;
padding: 0;
}
위의 예제에서 위의 코드 시퀀스를 스타일 태그에 추가하면 모든 요소의 여백과 패딩이 0이 됩니다.
직접 참조
위의 두 요소 h1과 p 사이에는 간격이 없습니다.
범용 선택기를 적용한 후의 이미지입니다.
하나 이상의 선택자 그룹화
<body>
<h1>heading1</h1>
<h2>heading2</h2>
<h3>heading3</h3>
</body>
h1{
text-align: center;
color: blue;
}
h2{
text-align: center;
color: blue;
}
h3{
text-align: center;
color: blue;
}
위의 코드는 속성을 명시적으로 정의하는 대신 해당 목적을 위해 입력하는 매우 바쁘고 지루한 작업입니다. 모든 제목을 쉼표로 구분된 하나의 선택기 블록으로 그룹화할 것입니다.
h1, h2, h3{
text-align: center;
color: blue;
}
Reference
이 문제에 관하여(간략한 CSS 선택자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/abhayt367/css-selectors-in-brief-5ggh텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
