css 선택기 4가지 유형: 기본, 조합, 속성, 위조
css 기본 선택기
기본 선택기는 * 어댑터, 라벨 선택기,class 선택기, id 선택기로 나뉘는데 여기서 주의해야 할 프로그래밍 사상은 css 레이어드 스타일시트에 요소가 있고 id가 하나밖에 없다.아래의 몇 가지를 주의해라.id 유일성 2.요소 id가 같지 않습니다. 모든 사람이 하나의 신분증만 있는 것처럼 ID는 신분증을 대표합니다.class 선택기는 유일성이 없습니다. 다시 사용할 수 있습니다.그리고 이 * 와일드카드는 전체 국면을 대표한다
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>css title>
7 <style type="text/css">
8 *{
9 color: skyblue;
10 }/** */
11 div{
12 color: red;
13 }/* */
14 .box{
15 color: steelblue;
16 }/*class */.box{color: steelblue;} *.box{color: steelblue;} box steelblue
17 #content{
18 color: tomato;
19 }/*id */
20 style>
21 head>
22 <body>
23 <div class="box" id="content">
24 web
25 div>
26 body>
27 html>css 조합 선택기
기본 선택기를 특수 기호를 통해 한데 꿰어 의견이 있는 것을 css 조합 선택기라고 부른다. 흔히 볼 수 있는 css 조합 선택기는 그룹 선택기, 끼워 넣는 선택기, 하위 선택기, 인접 동급 선택기이다.
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>css title>
7 <style type="text/css">
8 /* div{
9 color: teal;
10 font-size: 24px;
11 }
12 p{
13 color: teal;
14 } */
15 div{
16 font-size: 24px;
17 }
18 div,p{
19 color: teal;
20 }/* */
21 div p{
22 color: red;
23 }/* */
24 ul>li{
25 font-size: 24px;
26 list-style: square;
27 }/* */
28 div+p{
29 color: blue;
30 }/* */
31 style>
32 head>
33 <body>
34 <div>
35 , ! , ,
36 <p> p>
37 div>
38 <p> , 、 , , .p>
39 <p> , ! , , <span> , 、 , , .span>p>
40 <ul>
41 <li>1li>
42 <li>2li>
43 <li>3li>
44 ul>
45 body>
46 html>css 속성 선택기
기본 선택기 [속성], 기본 선택기 [속성=값], 기본 선택기 [속성~=값] 공백 문자가 여러 개 분리되고, 기본 선택기 [속성^=값]이 무엇으로 시작하고, 기본 선택기 [속성$=값]이 무엇으로 끝나는지
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>css title>
7 <style type="text/css">
8 div[title]/* [ ]*/
9 div[title=english]{
10 color: blue;
11 }/* [ = ]*/
12 div[title~=en]{
13 color:#f90;
14 font-weight: bold;
15 }/* [ ~= ] */
16 p,div[title^=zh]{
17 font-size:24px;
18 color: brown;
19 }/* [ ^= ] */
20 div[title$=china]{
21 letter-spacing: 10px;
22 text-decoration: line-through;
23 font-style: italic;
24 }/* [ $= ] */
25 style>
26 head>
27 <body>
28 <div title="english">
29 If you can NOT explain it simply, you do NOT understand it well enough
30 div>
31 <div title="english en yingyu">
32 ？2013 ，2014 ，2015 ，2016 ，2017 ，2018 ，2019 ，2020 ，2021
33 div>
34 <p title="zh en">
35 css ： 、 、 、
36 p>
37 <div title="zh en china">
38 http://www.cnblogs.com/dhnblog/p/12293463.html
39 div>
40 body>
41 html>css 위조 클래스 선택기
글자의 의미에서 보면 위선은 가짜이고 요소는 라벨과 라벨이 감싸는 내용이다. 간단하게 말하면 위선은 가짜 요소이고 가짜 반의어는 진짜이며 페이지에서 이런 것들은 우리가 직접 쓴 것이기 때문에 그것은 진짜이다.이 html 페이지에서 모든 요소는 몰래 시작과 끝 라벨을 붙인다. 이것이 바로 위조 요소이다. 위조 선택기는 일종의 조작 상태를 가리킨다!
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>css title>
7 <style type="text/css">
8 p{
9 color: brown;
10 border: 1px solid black;
11 height: 40px;
12 line-height: 40px;
13 }
14 p::before{
15 content: "before ";
16 }
17 p::after{
18 content: "after ";
19 }
20 /*
21 ::first-letter
22 ::first-line */
23 div::first-letter{
24 font-size: 24px;
25 color: blue;
26 }
27 div::first-line{
28 color: yellowgreen;
29 font-style: initial;
30 font-weight:bolder;
31 }
32 style>
33 head>
34 <body>
35 <div class="box">http://www.dhnblog.com/ , ,
36
37 <p> , , !p>
38
39 div>
40 body>
41 html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
