집 > 기사 > 웹 프론트엔드 > CSS 선택자는 무엇입니까? CSS 선택기 사용법 요약

CSS 선택자는 무엇입니까? CSS 선택기 사용법 요약

不言원래의: 2018-08-18 14:40:021991검색

이 기사에서는 CSS 선택기가 무엇인지 설명합니다. CSS 선택기 사용에 대한 요약은 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 선택기(장치)는 기본 구문을 사용합니다.
Selector｛ 속성 1: 속성 값 1; 속성 2: 속성 값 2; 속성 3: 속성 값 3; …..: ……
}
2. 태그 선택기(HTML 태그를 선택기로 직접 사용)
second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>标记选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
</head>
<body>
    <p> 标记选择器(直接使用html标签做选择器)</p>
</body>
</html>

second.css

p{
    font-size:34px;   
    text-align:left;    
    text-transform:uppercase;    
    font-family:黑体,宋体;    
    text-indent:3em;    
    text-decoration:line-through;    
    font-weight:bolder;    
    letter-spacing:0.5em;    
    line-height:3px;    
    margin:34px;    
    padding:23px;
    }

3. 클래스 선택기(각 태그에 대한 클래스 이름 설정, CSS는 클래스 이름 태그 설정 스타일을 전달할 수 있음) 다른 태그 클래스 이름은 동일할 수 있으며, 동일한 태그는 동일한 스타일을 공유할 수 있습니다. - CSS에서 태그 이름.클래스 이름 또는 .class 이름을 사용하여

second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>类选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
</head>
<body>
    <p  class="text"> 类选择器(为每一个标签设置一个类名，CSS可通过类名为标签设置样式，不同标签类名可以相同，
    相同可以共用同一个样式)---CSS中用标签名.类名或者.类名表示    </p>
</body>
</html>

second.css

.text{
    font-variant:small-caps;/*小型大写字母*/
    font-family:宋体,黑体;    
    font-style:italic;    
    text-transform:lowercase;    
    font-size:35px;    
    text-indent:3em;    
    text-decoration:overline;    
    font-weight:bold;    
    letter-spacing: 1px;    
    line-height:3em;    
    font-variant:small-caps;    
    text-align:right;
    }

4.ID를 나타냅니다. 선택(각 HTML 태그에 고유한 ID를 설정하고 CSS는 id를 통해 태그의 스타일을 설정할 수 있습니다)

—-#id 값 { }는 CSS에서

second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>ID选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" id="textp1"> ID选择器(为每一个HTML标签设置一个唯一的ID，CSS可以通过id来为标签设置样式)
    ----CSS中用#id值{ }来表示    </p>
    </body>
    </html>

second.css

.text{
    font-variant:small-caps;/*小型大写字母*/
    font-family:宋体,黑体;    
    font-style:italic;    
    text-transform:lowercase;    
    font-size:35px;    
    text-indent:3em;    
    text-decoration:overline;
    }
#textp1{
    font-weight:bold;    
    letter-spacing: 1px;    
    line-height:3em;    
    font-variant:small-caps;    
    text-align:right;
    }

을 나타내는 데 사용됩니다. 5. 선택자 포함(하위 선택자: 세대 간, 태그 간 가능): 하나의 태그에 다른 태그 포함

second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>包含选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" id="textp1">  <a href="#" class="link">ID选择器</a>
        (为每一个html标签设置一个唯一的ID，CSS可以通过id来为标签设置样式)
     ----CSS中用#id值{ }来表示    </p>
     </body>
     </html>

second.css

p a{
    
    text-decoration:none;    
    font-size:25px;    
    background-color:pink;
    }
.text{
    font-size:21px;    
    font-style:normal;    
    text-transform:lowercase;    
    text-indent:3em;    
    font-weight:bold;    
    letter-spacing:0.7em;    
    line-height:27px;
    }

6. 하위 선택자(IE 브라우저는 지원하지 않음): 다른 태그는 포함할 수 없습니다. CSS에서는 라벨 1 > 태그 2(하위 태그)가

second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>子选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" id="textp1"> 
             <a href="#" class="link">子选择器</a>
            （IE浏览器不支持）：中间不能包含其他标签；CSS中 标签1 >标签2（子标签） 表示 
    </p>
    </body>
    </html>

second.css

p>a{
    text-decoration:none;    
    font-family:黑体，宋体;
    }
p{    
font-size: 23px;
}

7을 나타내는 데 사용됩니다. 태그)는 일반적으로 테이블의 열 속성을 설정하는 데 사용됩니다. CSS는 태그 1+… 쉼표로 열기

second.css

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>相邻选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" > 
            子选择器:
            （IE浏览器不支持）：中间不能包含其他标签；CSS中 标签1 >标签2（子标签） 表示 
    </p>

    <p class="text1">
        相邻选择器(CSS样式作用在最后一个标签)常用设置表格的列属性--CSS用标签1+....标签n表示    </p>
        </body>
        </html>

second.css

.text+.text1{
    color:pink;    
    background-color:gray;    
    font-size:34px;
    }

9. 의사 클래스(요소의 특정 상태, 하이퍼링크 상태를 설명하는 데 자주 사용됨: 링크(방문하지 않은 상태), 방문함(방문한 상태) ; hover(마우스 통과 상태); 활성(클릭 상태) CSS는 태그 이름을 사용하여

second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>并集选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" > 
            子选择器:
            （IE浏览器不支持）：中间不能包含其他标签；CSS中 标签1 >标签2（子标签） 表示 
    </p>

    <p class="text1">
        并集选择器:多个标签一起设置样式，用逗号隔开    </p>
        </body>
        </html>

second.css

.text,.text1{
    color:pink;
    background-color:gray;    
    font-size:34px;}

10을 나타냅니다. CSS에 사용됨: 의사 클래스 표현

일반적으로 사용되는 표현은 (first-letter [텍스트의 첫 번째 문자에 적용], 첫 번째 줄 [텍스트의 첫 번째 줄에 적용])

second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>伪类</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <a href="" class="a1">伪类</a>
    </body>
    </html>

second.css입니다.

a:link {
    color:blue;    
    font-size:53px;    
    text-decoration: none;
    }
a:visited {
    color:red;    
    font-size:193px;
    }
a:hover  {
    color:green;    
    font-size:73px;
    }
a:active  {
    color:gray;    
    font-size:183px;
    }

11 스타일 우선순위: 인라인 선택자>ID 선택자>클래스 선택자(의사 클래스, 속성)>태그 선택자

우선순위를 높이려면 !important;를 사용할 수 있습니다.

CSS 선택자는 무엇입니까? CSS 선택기 사용법 요약

관련 기사