CSS의 선택기 사용 요약-CSS 튜토리얼-php.cn

CSS의 선택기 사용 요약

黄舟

풀어 주다： 2017-10-27 10:04:24

원래의

1409명이 탐색했습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style type="text/css">
    <!--
    body:标签选择器
    *：通配符选择器
    .：类选择器
    ，：并集选择器
    
    CSS属性：
     Text-align    Center,left,right    文字居中格式    
     Font-size    18px    设置文字大小    
     Font-family    微软雅黑,宋体    设置字体    
     Font-weight    Normal默认，bold粗体，100px    设置字体加粗    
     Font-style    Normal默认，italic斜体    设置字体风格    
     Color    颜色    设置文字颜色       
    -->
    body{
        background:url("xia.jpg");
           }
    p{
        font-size:50px;
        color:green;
        background-color:blue;
        width:300px;
        height:200px;
    }
    *{
         font-size: 100px;
         color: red;

      }
    </style>
</head>
<body>
    <h1>111</h1>
    <p>14期威武</p>
</body>
</html>

로그인 후 복사

클래스 선택기

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
      .G{
         font-size: 200px;
         color:red;
      }
      .o1{
         font-size: 200px;
         color: blue;
      }
      .o2{
         font-size: 200px;
         color: yellow;
      }
      .g1{
         font-size: 200px;
         color: green;
      }
      .l{
         font-size: 200px;
         color: pink;
      }
      .e{
         font-size: 200px;
         color: black;
      }


   </style>
</head>
<body>
   <span class="G">G</span>
   <span class="o1">o</span>
   <span class="o2">o</span>
   <span class="g1">g</span>
   <span class="l">l</span>
   <span class="e">e</span>
</body>
</html>

로그인 후 복사

복합 선택기: 교차점 선택기

선택기 + 선택기(사이에 공백 없음)

<!DOCTYPE html>    
<html lang="en">    
<head>    
	<meta charset="UTF-8">    
	<title>Document</title>    
	<style type="text/css">    
		.box{    
			font-size:50px;    
		}    
		p.box{    
			color:red;    
		}    
		p#miss{    
			width: 400px;    
			height: 300px;    
			background-color:yellow;    
		}    
	</style>    
</head>    
<body>    
        <!--其实无非是浏览器寻找标签顺序，第一个找到p.box即可；第二个找到
            .box类即可
            -->
	<p class="box">14期威武</p>    
	<p class="box">14期霸气</p>    
	<p id="miss">14期万岁</p>    
</body>    
</html>

로그인 후 복사

descendant 선택 또는 그리고 하위 항목 선택기: 실제로는 포함 관계입니다

후손 선택자: 여러 세대에 걸쳐 상속 가능 Selector+space+selector

후손 선택자: 첫 번째 자손만 찾을 수 있음 Selector+> ;+Selector

<!DOCTYPE html>    
<html lang="en">    
<head>    
	<meta charset="UTF-8">    
	<title>Document</title>    
	<style type="text/css">    

        .box span{    
    	    color:red;    
        }    
	</style>    
</head>    
<body>  
         <!--
         下面p标签会找到.box类，由于span是后代选择器选择对象，即使隔代也可继承，所以p标签
         下面的span标签也可继承
         -->  
	<p class="box">    
		<p><span class="miss">14期威武</span>    
		<span>14期好人</span>    
		</p>    
	</p>    
	<p class="box"><span>14霸气</span></p>    
</body>    
</html>

로그인 후 복사

rrree

위 내용은 CSS의 선택기 사용 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!