CSS笔记二-选择器、背景相关属性、元素显示模式、CSS三大特性、chrome调试工具、PXcook使用
一、復合選擇器
1、后代選擇器
根據HTML標簽的嵌套關系，選擇父元素后代中滿足條件的子元素；
選擇器語法：選擇器1 選擇器2 {css}
結果：在選擇器1中所找到標簽的后代（兒子、孫子、重孫子....）中，找到滿足選擇器2的標簽，設置樣式；
注意點：后代包括：兒子、孫子、重孫子....
后代選擇器中，選擇器與選擇器之間通過空格隔開；
<style>.father p{color: red;}</style> <body><div class="father"><p>小姐姐</p></div><p>小可愛</p> </body>?2、子代選擇器
?作用：根據HTML標簽的嵌套關系，選擇父元素子代中滿足條件的元素；
語法：選擇器1 > 選擇器2{CSS}
結果：在選擇器1中找到標簽的子代（兒子）中，找到滿足選擇器2的標簽，設置樣式；
注意點：子代只包括兒子；
? ? ? ? 子代選擇器中，選擇器與選擇器之間通過 > 隔開；
<style>/* 子代選擇器 */.father>p{color: red;}</style> <body><div class="father"><p>兒子</p><div><p>孫子</p></div></div><p>兄弟</p> </body>?3、并集選擇器
?作用：同時選中多組標簽，設置相同的樣式；
語法：選擇器1，選擇器2 { css }
結果：找到選擇器1和選擇器2選中的標簽，設置樣式；
注意點：并集選擇器中每組選擇器之間通過，（逗號）分隔；
? ? ? ? 并集選擇器中的每組選擇器可以是基礎選擇器或者復合選擇器；
? ? ? ? 并集選擇器中的每組選擇器通常一行寫一個，提高代碼可讀性；
<style>/* 并集選擇器 */.father > p , span , a{color: red;}</style> <body><div class="father"><p>兒子</p><div><p>孫子</p></div></div><span>我是span</span><br><a href="#">我是a</a><p>兄弟</p> </body>?4、交集選擇器
?作用：選中頁面中同時滿足多個選擇器的標簽；
語法：選擇器1選擇器2 { css }
結果：（既又原則）找到頁面中既被選擇器1選中，又能被選擇器2選中的標簽，設置樣式；
注意點：交集選擇器中的選擇器之間是緊挨著的，沒有東西分隔；
? ? ? ? 交集選擇器中如果有標簽選擇器，標簽選擇器必須寫在最前面；
<style> p.red{color: red;}</style> <body><div class="father"><p>兒子</p><div class="red"><p>孫子</p></div></div><p class="red">兄弟</p>?5 、emmet語法
<!-- 生成普通標簽 標簽選擇器 div --><div></div><!-- 生成div標簽 + 類名 ： 類選擇器 .red --><div class="red"></div><!-- 生成div標簽 + id屬性 ：id選擇器 #one --><div id="one"></div><!-- 生成指定標簽 + 類名 + id屬性 ： 交集選擇器 p.red#one --><p class="red" id="one"></p><!-- 生成兒子 ：子代選擇器 father > son --><father><son></son></father><!-- 生成內部文本：大括號 ul > li{我是li的內容} --><ul><li>我是文本</li></ul><!-- 同時創建多個： *個數 ul > li*3 --><ul><li>我是文本</li><li>我是文本</li><li>我是文本</li></ul>6、hover偽類選擇器
作用：選中鼠標懸停在元素上的狀態。設置樣式；
語法：選擇器:?hover{ css }
注意點：偽類選擇器選中的元素的某種狀態；
a{text-decoration: none;color: black;}a:hover{color:chocolate;text-decoration:underline;}<a href="#">我是一個a標簽</a>二、背景相關屬性
1、背景顏色
屬性名：background-color（bgc）
顏色取值：關鍵字、rgb表示法、rgba表示法、十六進制表示法.....
注意點：背景顏色默認是透明：rgba(0,0,0,0)、transparent
? ? ? ? 背景顏色不會影響盒子大小，并且還能看清盒子的大小和位置，一般在布局中會習慣先給盒子設置背景顏色；
2、背景圖片
屬性名：background-image(bgi)
屬性值：background-image: url('圖片路徑')；
注意點：背景圖片中的url中可以省略引號；
? ? ? ? 背景圖片默認在水平和垂直方向是平鋪的；
? ? ? ? 背景圖片僅僅是給盒子起到一個裝飾效果，類似于背景顏色，但不能撐開盒子；
/* 背景顏色 背景圖片*/.father{width: 500px;height: 500px;background-color: cornflowerblue;background-image: url(../images/macroperspective-6503070_1920.jpg);}.son{width: 200px;height: 200px;background-color:darkred;background-image: url(../images/honey-bee-6506809_1920.jpg);}3、背景平鋪
屬性名：background-repeat(bgr)
屬性值：
（默認值）水平和垂直方向都平鋪? ? repeat
?不平鋪? ? ? ?no-repeat
水平方向平鋪? ?repeat-x
垂直方向平鋪? ?repeat-y
4、背景位置
5、背景相關屬性連寫
屬性名：background
屬性值：單個屬性值的合寫，取值之間以空格隔開；
順序：background：color image repeat position
省略問題：可以按照需求省略；
? ? ? ? 特殊情況：在pc端，如果盒子大小和背景圖片大小一樣，此時可以直接寫background：url()
注意點：如果需要設置單獨的樣式和連寫：
要么把單獨的樣式寫在連寫的下面。要么把單獨的樣式寫在連寫的里面；
6、img標簽和背景圖片的區別
需求：需要在網頁中展示一張圖片的效果
方法一：直接用img標簽即可
? ? ? ? img標簽是一個標簽，不設置寬高會默認以原尺寸顯示；
方法二：div標簽 + 背景圖片
? ? ? ? 需要設置div的寬度，因為背景圖片只是裝飾div的樣式，并不能撐開div標簽；
三、元素顯示模式
1、塊級元素
屬性：display：block
顯示特點：獨占一行（一行只能顯示一個）；
? ? ? ? 寬度默認是父元素的寬度，高度默認由內容撐開；
? ? ? ? 可以設置寬高；
代表標簽：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer.....
2、行內元素
屬性：display：inline
顯示特點：一行可以顯示多個；
? ? ? ? 寬高可以由內容撐開；
? ? ? ? 不可以設置寬高；
代表標簽：a、span、b、u、i、s、strong、ins、em、del....
3、行內塊元素
屬性：display：inline-block
顯示特點：一行可以顯示多個，可以設置寬高；
代表標簽：input、textarea、button、select.....
特殊情況：img標簽內有行內塊元素的特點，但是Chrome調試工具中顯示結果是inline;
4、元素顯示模式轉換
目的：改變元素默認的顯示特點，讓元素符合布局要求；
display：block? ?轉換成塊級元素
display：inline-block? ?轉換成行內塊元素
display：inline? ? 轉換成行內元素
5、HTML嵌套規范注意點
5.1塊級元素一般作為大容器，可以嵌套：文本、塊級元素、行內元素、行內塊元素等....
但是p標簽中不要嵌套div、p、h 等塊級元素；
5.2 a標簽內部可以嵌套任意元素，但是，a標簽不要再嵌套a標簽；
6、居中方法總結
?四、CSS三大特性
1、繼承性
特性：子元素有默認繼承父元素的特點（子承父業）
可以繼承的常見屬性：color、font-style、font-weight、font-size、font-family、text-indent、
text-align、line-height......
可以通過調試工具判斷樣式是否可以繼承；
應用：可以在一定程度上減少代碼；
常見應用場景：直接給ul標簽設置list-style:none 屬性，從而去除列表默認的小圓點樣式；
? ? ? ? 直接給body標簽設置統一的font-size，從而統一不同瀏覽器默認文字大小；
繼承失效的特殊情況：
如果元素有瀏覽器默認樣式，此時繼承性依然存在，但是優先顯示瀏覽器的默認樣式；
a標簽的color會繼承失效；
h系列標簽的font-size會繼承失效；
div的高度不能繼承，但是寬度有類似于繼承的效果；
2、層疊性
特性：給同一個標簽設置不同的樣式，此時樣式會層疊疊加，最后共同作用在標簽上；
? ? ? ? 給同一個標簽設置相同的樣式，此時樣式會層疊覆蓋，最后寫在最后的樣式會生效；
注意點：當樣式沖突時，只有當選擇器優先級相同時，才能通過層疊性判斷結果；
3、優先級
不同選擇器具有不同的優先級，優先級高的會覆蓋優先級低的樣式
繼承 <?通配符選擇器 < 標簽選擇器 < 類選擇器 < id選擇器 < 行內樣式 < !important
注意點:? ?!important 寫在屬性值的后面,分號前面;
???????? !important不能提升繼承的優先級;只要是繼承優先級最低;
? ? ? ? 實際開發中不建議使用 !important.
?3.1、權重疊加計算
<style>/* 行內樣式的個數 ， id選擇器的個數 ， 類選擇器的個數 ， 標簽選擇器的個數 按位依次比較*//* 0 , 1 , 0 , 1 */div #one{color: orange;}/* 0 , 0 , 2 , 0 */.father .son{color: skyblue;}/* 0 , 0 , 1 , 1 */.father p{color: purple;}/* 0 , 0 , 0 , 2 */div p{color: pink;}</style> <body><div class="father"><p class="son" id="one">我是一個標簽</p></div> </body>3.2、?權重計算案例
權重計算解題步驟：
1：先判斷選擇器是否能直接選中標簽，如果不能直接選中則是繼承，優先級最低，直接pass,
2：通過權重計算公式，判斷誰權重最高；
注意點：實際開發中選擇標簽要精準，盡量避免多個選擇器同時選中一個標簽的情況；
0200#father #son{color: blue;}0111#father p.c2{color: black;}0022div.c1 p.c2{color: red;}0100 繼承#father{color: green !important;}0111 繼承div#father.c1{color: yellow;}</style> <body><div id="father" class="c1"><p class="c2" id="son">我是一個標簽</p></div> </body> 0002div div{color: yellow;}0001div{color: violet;}</style> <body><div><div><div>顏色</div></div></div> </body>?
<style> 0021.c1 .c2 div{color: blue;}0101div #box3{color: green;}0101#box1 div{color: hotpink;}權重一樣，誰在下面誰說了算 </style> <body><div id="box1" class="c1"><div id="box2" class="c2"><div id="box3" class="c3">什么顏色</div></div></div></body>?
<style> 都是繼承，子承父業，所以看父元素樣式繼承 ，可以直接選中p標簽div p{color: red;}繼承 ，不可以直接選中p標簽.father{color: blue;}</style> <body><div class="father"><p class="son"><span>文字</span></p></div></body>五、Chrome調試工具
?1、調試工具查錯流程
2、pxcook工具使用
?
六、綜合案例
<style>a{text-decoration: none; //去除默認下劃線display: inline-block; //轉為行內塊元素background-color: red; //設置背景顏色width:80px; //設置寬度height: 60px; //設置高度color: seashell; //設置文字顏色text-align: center; //設置文字水平居中line-height: 60px; //設置文字垂直居中}//設置鼠標懸停樣式a:hover{background-color: sienna;}</style> <body><a href="#">導航1</a><a href="#">導航2</a><a href="#">導航3</a><a href="#">導航4</a><a href="#">導航5</a> </body>總結
以上是生活随笔為你收集整理的CSS笔记二-选择器、背景相关属性、元素显示模式、CSS三大特性、chrome调试工具、PXcook使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CentOS7下的任务计划
- 下一篇： CSS 基本样式