javascript
从零开始学_JavaScript_系列（13）——CSS2（新窗口打开，背景图片填充，底文字，小提示，CSS选择器整理）
前注：圖片和部分內容引用的網易云課堂的，所以，侵，私信，刪。
這篇也算上周的
（10）打開一個網頁時，以新窗口形式打開
將
<a href="www.baidu.com"></a>
新增屬性：
<a href="www.baidu.com" target="_blank"></a>
即可。
?
?
?
（11）關于塊間的莫名空隙
假設有html代碼：
<div id="a">
?????? <div id="mm">
????????????? aa
?????? </div>
</div>
<div id="b">
?????? <div id="mm">
????????????? bb
?????? </div>
</div>
?
其有css屬性：
#mm{
margin:20px;
}
問題：
若給a塊和b塊染色，會發現，a塊和b塊之間將會有一定空隙（透明的）。
?
解決辦法：
①給mm的父塊a和b，增加一條屬性：
?????? padding:1px;
即可（不能是0）。（背景色將自動填充空隙區域）
②如果想避免在其他方向出現的空隙，那么在只在需要的方向（例如只對padding-top和padding-buttom設置屬性）
?
?
?
?
（12）背景圖片（完全填充）
HTML代碼：
?????? <!--背景圖片-->
?????? <divid="Layer1">
????????????? <imgsrc="image/index_bg2.jpg" height="100%"width="100%"/>???
?????? </div>
?
CSS代碼：
#Layer1
{????? /*由于背景圖片不能縮放，故如此設置*/
????????????? position:absolute;
????????????? ?width:100%;
????????????? ?height:100%;
????????????? ?z-index:-1;
????????????? ?opacity:0.7;
}
?
?
即可
?
?
（13）輸入框在空的時候有文字，輸入內容后消失
<input id="keyword" type="text"placeholder="過濾" value=""/>
這里的placeholder="過濾"，就是底文字
?
?
（14）鼠標移動到上面的時候，顯示提示
如代碼：
<input id="baoji" type="text" placeholder="請輸入數字"style="text-align:right;width:75px"title="可以輸入小數">
?
效果：
?
?
?
（15）HTML標簽圖
注：這個圖片是從網易云課堂截取的。
（16）設置文本垂直居中
簡單辦法是：在CSS屬性里，設置
line-height: xx px;
其中的xx，值和這個div塊的height的一樣。
?
?
（17）選擇器整理
| 選擇器 | 方法 | HTML | 示例 |
| id | #id名 | <p id="a"> | #a{xxxx} |
| class | .class名 | <p class="a"> | .a{xxx} |
| ? | ? | ? | ? |
| 通配符 | 通配符名 | <div> | div{xxxx} 如果是*，表示所有元素 |
| 屬性 | disabled | <input disabled> <xx type="button> | [disabled]{xxxx} [type=button]{xxx} |
| 選擇所有 有class="a"的 | [class~=class名] | <x class="a b"> <x class="a"> 兩個被同時選中 | [class~=a]{xxx} |
| 選擇所有某屬性的值里有pp | [屬性|=pp] | <p lang="pp"> <p lang="bpp"> 都要被選中 | [lang|=pp]{xxx} |
?
②
選中href里面，有#的（第2、3個），這個符號是英文狀態下，shift + 6
?
③
選中href里面，格式是pdf的（即第二個）
?
④
選擇href里面，值有lady.163.com的所有標簽（即1和2）
?
?
④偽類選擇器
a:link表示，所有鏈接的樣式；
a:visited表示，訪問過的鏈接的樣式；
a:hover表示，鼠標移動上去之后的樣式；
a:active表示，用戶鼠標點擊上去之后的樣式
其中hover和active還可以對其他的生效。
如果四個都用，要按順序來寫。
?
?
⑤不同狀態下的樣式
enabled表示，可用時的樣式；
disabled表示，不可用時的樣式；
checked表示，選中時的樣式。（比如單選框）
?
?
⑥和列表相關的
li:first-child{xxxx}表示第一個的樣式
li:last-child{xxx}表示最后一個的樣式
li:nth-child(even){xxx}表示奇偶相間的，偶數項的樣式，odd表示奇數項。注意，如果有其他<p>或者<li>標簽或其他，雖然標簽名不同，但依然會影響起效果的順序（比如奇數變偶數）。
even可以修改，比如使用2n+2（n從0開始），表示選擇2、4、6項個子元素。
也可以改為：li:nth-last-child(2n+2){xxx}表示倒著數第2、4、6個，這里是5、3、1項
?
⑦只選中只有一個子元素的項
html代碼如：
<html><body><ol><li>aa</li></ol><ul><li>bb</li><li>cc</li></ul><p>qq</p></body><style>:only-child{color:red;}</style> </html>只影響aa
⑧對于自定義列表，選擇第一個<dd>
dd:first-of-type{color:red}
效果是Dave Shea那項變紅色（但人民郵電出版社不變）
first-of-type表示第一個這個類型（dd）的元素。
可以更改為last-of-type（最后一個）
nth-of-type(even) 表示偶數個
nth-last-of-type(2n)倒數的偶數項的元素
?
⑨選擇在A標簽范圍內，只有一個B標簽的B標簽
如第一行有2個<span>，而第二行只有一個<span>
若對第二行CSS染色，使用
span:only-of-type{xxxx}
?
⑩不常用的
:empty 選中頁面中沒有子元素的元素
:root 選中根標簽
:not()? 不包含某個選擇器的元素，參數是簡單選擇器
:target 選中被錨點選中的目標元素
:lang()? language為某些特殊值的元素
?
簡單選擇器組合起來之后，表示兩個條件都符合的元素。
總結
以上是生活随笔為你收集整理的从零开始学_JavaScript_系列（13）——CSS2（新窗口打开，背景图片填充，底文字，小提示，CSS选择器整理）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java注释和注解_深入理解JAVA注解
- 下一篇： [Github推荐]CVPR2019录用