css中關於選擇器的使用總結-css教學-PHP中文網

首頁

web前端

css教學

css中關於選擇器的使用總結

黄舟

Oct 27, 2017 am 10:04 AM

css 選擇器

標籤、通配符選擇器

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

登入後複製

後代選擇器和子代選擇器：實際上就是包含關係

後代選擇器：可隔代遺傳 選擇器+空格+選擇器

子代選擇器：只能尋找第一個後代 選擇器+>+選擇器

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

登入後複製

<!DOCTYPE html>    
<html lang="en">    
<head>    
	<meta charset="UTF-8">    
	<title>Document</title>    
	<style type="text/css">    
	p>span{    
			color:red;    
			font-size:40px;    
		}    
        p>span{    
   	    color:green;    
   	    font-size:60px;    
            }    
	</style>    
</head>    
<body>    
        <!--
            此处，由于是子代选择器，所以span只能继承p；span只能继承p；
            所以第一个为绿色；第二个为红色
        -->
	<p>    
		<p><span>14期威武</span></p>    
		<span>14期霸气</span>    
	</p>    
</body>    
</html

登入後複製

以上是css中關於選擇器的使用總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7870

Java教學

1649

CakePHP 教程

1407

Laravel 教程

1301

PHP教程

1244

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。