일반적으로 사용되는 CSS3 기본 선택기: 1. 와일드카드 선택기 "*"; 2. 클래스 선택기 ".class name" 4. ID 선택기 "#id name"; ,F,..."는 동일한 스타일을 가진 요소를 그룹화할 수 있습니다. 각 선택기를 구분하려면 쉼표 ","를 사용하세요.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3의 5가지 공통 기본 선택자
1. 와일드카드 선택자(모든 브라우저에서 지원)
범용 선택자는 *로 표시되며 모든 요소를 선택하거나 특정 요소를 선택할 수 있습니다. under;
*{marigin: 0;
padding: 0;
font-size: 14px;
}리셋 스타일 파일에서 위의 코드를 많이 보셨을 겁니다. 이는 모든 요소의 여백과 패딩이 0으로 설정되고 다른 하나는 14px로 설정된다는 의미입니다. is 특정 요소 아래의 모든 요소 선택:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通配符选择器</title>
<style>
.demo * {
width: 50px;
height: 50px;
border: 1px solid blue;
margin: 10px;
}
</style>
</head>
<body>
<div class="demo">
<div>1</div>
<p>2</p>
<span>3</span>
</div>
</body>
</html>Rendering:
데모 요소의 세 하위 요소 div, p 및span에는 각각 CSS 스타일이 설정되어 있지 않지만 데모 요소 아래의 모든 요소에 대해 통일된 스타일이 있는 경우 데모 요소의 세 가지 하위 요소인 div, p 및span에 스타일이 적용됩니다.
2. 클래스 선택기(모든 브라우저는 클래스 선택기를 지원하지만 다중 클래스 선택기(.className1.className2)는 ie6에서 지원되지 않습니다.)
클래스 선택기는 앞에 " ."가 붙은 클래스 이름을 기준으로 선택합니다. mark는 문서 요소와 독립적인 방식으로 스타일을 지정합니다. 클래스 선택기를 사용하기 전에 html 요소에 클래스 이름을 정의해야 합니다. 즉, html 마크업에 클래스 이름이 있는지 확인해야 합니다. .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #2DC4CB;
}
</style>
</head>
<body>
<div class="demo">类选择器</div>
</body>
</html>Rendering:
3. 요소 선택기(모든 브라우저에서 지원)
요소 선택기(태그 이름 선택기)는 CSS3 선택기 중에서 가장 일반적이고 기본적인 선택기입니다. 요소 선택기는 실제로 html, body, p, p 등과 같은 문서의 요소입니다. 다음 예에서는 범위 요소가 선택되고 글꼴 색상이 빨간색으로 설정됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
}
span {
color: red;
}
</style>
</head>
<body>
<div class="demo">
<p>这里使用<span>元素选择器</span>改变了样式</p>
</div>
</body>
</html>Rendering:
4. ID 선택기 (모든 브라우저에서 지원)
ID 선택기는 위에서 언급한 클래스 선택기와 매우 유사하며, ID 선택기를 사용하기 전에도 필요합니다. 먼저 ID를 추가하세요. 스타일 선택기에서 해당 요소를 찾을 수 있도록 html 문서에 이름을 지정합니다. 차이점은 클래스를 사용할 때 ID 선택기가 해당 클래스 이름 앞에 추가된다는 것입니다. 이전 "." 기호(.className) 및 ID 선택기는 (#demo)와 같이 이름 앞에 "#"을 사용합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
#demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #FF0000;
}
</style>
</head>
<body>
<div id="demo">ID选择器</div>
</body>
</html>렌더링:
ID 선택기에는 특별한 주의가 필요한 여러 장소가 있습니다.
첫 번째: ID 선택기는 페이지에서 고유하기 때문에 문서에서 한 번만 사용할 수 있습니다.
둘째, id 선택자는 클래스 선택자와 같이 조합해서 사용할 수 없으며, 요소 이름은 하나의 ID 이름으로만 지정할 수 있습니다.
셋째, 동일한 id 이름은 "test."와 같이 다른 문서에서 사용할 수 있습니다. "html"에서는 h1에 #important"가 설정되어 있고, "test1.html"에서는 p의 id를 "#important"로 정의할 수도 있지만, test.html이나 test1에서는 하나의 id만 허용된다는 전제가 있습니다. .html "#important"의 존재.
5. 그룹 선택기(모든 브라우저에서 지원)
여러 요소가 동일한 스타일 속성을 갖는 경우 함께 명령문을 호출할 수 있으며 요소는 쉼표로 구분됩니다. 그룹 선택자는 동일한 스타일을 가진 요소를 그룹화합니다. 각 선택자는 규칙에 여러 개의 다른 선택자가 포함되어 있음을 브라우저에 알려줍니다. 쉼표가 없으면 표현되는 의미가 완전히 다릅니다. 쉼표는 앞서 언급한 하위 선택자가 됩니다. 이를 사용할 때 주의해야 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>群组选择器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #FF0000;
}
p,
li {
color: blue;
}
.demo1,
.demo2 {
color: #fff;
}
</style>
</head>
<body>
<div class="demo">
<p>这里是一个段落!</p>
<ul>
<li>列表</li>
</ul>
<a href="#" class="demo1">链接一</a><br>
<span class="demo2">文字文字！</span>
</div>
</body>
</html>렌더링:
(동영상 공유 학습: css 동영상 튜토리얼)
위 내용은 일반적으로 사용되는 CSS3 기본 선택자는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
CSS IDS vs 클래스 : 접근성에 더 좋은 것은 무엇입니까?May 10, 2025 am 12:02 AMClassareBetterforAccessibilityInwebDevelopment.1) ClassescanBeappliedTomultipleEmentements, 연속적 인 stylesandbehaviors, whataidsusers와 whithdisabilities
CSS : 클래스와 ID 선택기의 차이점을 이해합니다May 09, 2025 pm 06:13 PMClassSelectorSeReaseusableformultipleElements, whileIdselectorsareUniqueAncePerPage.1) 클래스, 1) 클래스, areidealforstylingmultipleements likebuttons.2) ids, awepectupforUniqueElementsLikeAnavaterMangu.3) Ids
CSS 스타일링 : 클래스와 ID 선택기 중에서 선택합니다May 09, 2025 pm 06:09 PMCSS 스타일에서 클래스 선택기 또는 ID 선택기는 프로젝트 요구 사항에 따라 선택해야합니다. 1) 클래스 선택기는 재사용에 적합하며 동일한 스타일의 여러 요소에 적합합니다. 2) ID 선택기는 고유 한 요소에 적합하며 우선 순위가 높지만 유지 보수 어려움을 피하기 위해주의해서 사용해야합니다.
HTML5 : 제한May 09, 2025 pm 05:57 PMhtml5hasseverallimitationsincludinglackofportforAdvancedgraphics, basic formvalidation, cross-browsercompatibilitiessues, performanceimpacts 및 securityconcerns.1) forcomplexgraphics, html5'scanvasisinsufficiver
CSS : 한 스타일이 다른 스타일보다 우선 순위가 더 높습니까?May 09, 2025 pm 05:33 PM예, Onestylecanhavemorepriority thananotherincssduetospecific and thecascade.1) SpecipationActSascoringsystemwheremorespecificselectorshaveHigherPriority.2) theCACASCASCACSCASCASCASCOLONSEFECALORONSOFECOLONSOFECOLONSOFECIFICI와 함께
HTML5 사양의 중요한 목표는 무엇입니까?May 09, 2025 pm 05:25 PMthesiNificantgoalsofhtml5ARETOENHANCEMULTIMEDIASUPPORT, HUMANERDIALIDAY, MASTERCONSCONSENCYACROSSDEVICES, andensureBackwardCompatibility, 1) html5improvesmultimediaWithnativeElementsLikeAnd.2) ItusessessessessesseManticElementsForBetseo.3) ITS
React의 한계는 무엇입니까?May 02, 2025 am 12:26 AM반응 말 : 1) asteeplearningcurveduetoitsvastecosystem, 2) Seochallengswithclient-siderendering, 3) PlatiperFormanceIssUseInlargeApplications, 4) ComplexStateManagementAsAppSgrow, 및 5) theneedTokeEpupWithitsHouou
React의 학습 곡선 : 새로운 개발자를위한 도전May 02, 2025 am 12:24 AMReactisChallengingforbeginnersdueToitssteePlearningCurveanDParadigMshiftTocomponent 기반 Architection.1) 시작된 문서화 forasolidFoundation.2) startWithOficialDocumentationForAsolIdfoundation.2) 이해를 이해하는 방법
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는
안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
