Summary of the use of selectors in css-CSS Tutorial-php.cn

Summary of the use of selectors in css

黄舟

Release： 2017-10-27 10:04:24

Original

1452 people have browsed it

<!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>

Copy after login

Class selector

<!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>

Copy after login

Compound selector: Intersection selector

selector + selector (no space in between)

<!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>

Copy after login

Descendant selector and descendant selector: actually contain Relationship

Descendant selector: can be inherited across generations Selector + space + selector

Descendant selector: Can only find the first descendant 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>

Copy after login

rrree

The above is the detailed content of Summary of the use of selectors in css. For more information, please follow other related articles on the PHP Chinese website!