11-1 css屬性選擇器

時間 2021-04-13

標籤 css html app ide 佈局學習 url spa orm htm 欄目 CSS 简体版

原文原文鏈接

一基礎選擇器css

標籤選擇器：選擇的標籤的‘共性’，而不是特性
div{}、ul{}、ol{}、form{}
類選擇器：.box{}
id選擇器：#box{} 只能選擇器的特性，主要是爲了js
*通配符選擇器：重置樣式html

例子：app

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>css學習</title> 6     <style> 7         /*#標籤選擇器*/ 8         p{ 9             color: red;10         }11         /*類選擇器*/12         .c1{13             color:green;14         }15         /*id選擇器*/16         #d2{17             color: yellow;18 19         }20     </style>21 </head>22 <body>23 <div>div標籤</div>24 <div id="d2">div標籤2</div>25 <p class="c1">p標籤</p>26 <span class="c1">我是span標籤</span>27 <span>我是span2號</span>28 29 </body>30 </html>

二高級選擇器ide

1 後代選擇器子帶選擇器（兒子選擇器）毗鄰選擇器弟弟選擇器佈局

例子：學習

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>高級選擇器</title> 6     <style> 7         /*後代選擇器(兒子，孫子，子子孫孫)*/ 8         div a{ 9             color: red;10         }11         /*兒子選擇器*/12         div>a{13             color:blue14         }15         /*毗鄰選擇器，就是a和span緊挨着*/16         a+span{17             color:yellow18         }19         /*弟弟選擇器,至關於這個標籤下面的全部標籤都生效*/20         a~span{21             color:aqua;22         }23     </style>24 </head>25 <body>26 <div>27     <div>28         <p>29             <a>我是孫子p標籤</a>30         </p>31     </div>32     <a>我是兒子p標籤</a>33     <span>我是span1號</span>34     <span>我是span2號</span>35 36 </div>37 38 39 </body>40 </html>

2 交集選擇器url

交集選擇器：第一個選擇器是標籤選擇器，第二個選擇器是類選擇器spa

form input.active{
                width:200px;
            }

3 僞類選擇器orm

例子：htm

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>僞類選擇器</title> 6     <style> 7         /*去除超連接的下劃線*/ 8         a{ 9             text-decoration:none;10         }11         /*鼠標放到超連接上線顯示的樣式*/12           a:hover{13             color: red;14 15                 }16 17         /*設置第一個首字母的樣式*/18         p:first-letter{19             color: red;20             font-size: 30px;21 22         }23         /* 在....以前 添加內容   這個屬性使用不是很頻繁 瞭解  使用此僞元素選擇器必定要結合content屬性*/24         p:before{25             content: 'alex';26         }27         /*在....以後 添加內容，使用很是頻繁 一般與我們後面要講到佈局 有很大的關聯（清除浮動）*/28 29         p::after{30 31             /*解決浮動帶來的問題*/32             content:'.';33             display: block;34             /*width: 100px;35             height: 100px;36             background-color: red;*/37             visibility: hidden;38             height: 0;39         }40     </style>41 </head>42 <body>43 <p>我是p標籤1</p>44 <a href="http://www.baidu.com">百度一下</a>45 46 </body>47 </html>

三樣式權重問題

1 行內的樣式>內接樣式>外接

例子：

 1 <!--外接式和導入式只能同時存在一個--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5     <meta charset="UTF-8"> 6     <title>css引入方式</title> 7     <!--文件類型內接式--> 8     <style type="text/css"> 9         p{10             color: green;11             width: 100px;12             height: 100px;13         }14     </style>15     <!--外接式，不用寫style-->16     <link rel="stylesheet" href="./css/index.css">17     <!--導入式-->18     <style type="text/css" media="screen">19         @import url('./css/index.css');20 21     </style>22 </head>23 <body>24 <div style="color:red;">25     我是一個div26 </div>27 <p>段落</p>28 <a href="#">百度</a>29 30 </body>31 </html>

2 權重問題比較

100>010>001
id>類>標籤

例子：

 1 <!--優先級大小--> 2 <!--id class 標籤 三者依次從左到右的個數，那個左邊的數字大，那個就會生效，因此pa生效--> 3 <!DOCTYPE html> 4 <html lang="en"> 5 <head> 6     <meta charset="UTF-8"> 7     <title>選擇器</title> 8     <!--下面這個是把默認的樣式重置--> 9     <link rel="stylesheet" type="text/css" href="https://unpkg.com/reset-css@4.0.1/reset.css">10     <style type="text/css" media="screen">11         /*1 0 0*/12         #pa{13             color: yellow;14 15         }16         /*0 1 0*/17         .app{18             color:red;19         }20         /*0 0 1*/21         p{22             color: blue;23         }24 25     </style>26 </head>27 <body>28 <div id="box">29     <div>30         <div>31             <div class="child">32                 <p id="pa" class="app">猜猜我是什麼顏色</p>33 34             </div>35         </div>36     </div>37 38 </div>39 <p>段落</p>40 41 </body>42 </html>

四樣式繼承問題

繼承來的屬性權重爲0，若是權重都爲0，誰描述的近誰優先，就是寫的越詳細越優先

繼承和權重
記住：有一些屬性是能夠繼承下來： color 、 font-*、 text-*、line-* 。主要是文本級的標籤元素。

可是像一些盒子元素屬性，定位的元素（浮動，絕對定位，固定定位）不能繼承。

例子：

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>繼承</title> 6     <style> 7         *{ 8             padding: 0; 9             margin: 0;10         }11         div{12             width: 200px;13             height:100px;14             background-color: green;15             color:red;16             font-size: 20px;17             text-align:center;18             line-height: 100px;19             /*設置行高能夠讓文字居中顯示*/20         }21     </style>22 </head>23 <body>24 <div>25     <p>德國</p>26 </div>27 28 29 </body>30 </html>