11-1 css屬性選擇器

時間 2019-11-29

標籤 css 屬性選擇器欄目 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>

二高級選擇器佈局

1 後代選擇器子帶選擇器（兒子選擇器）毗鄰選擇器弟弟選擇器學習

例子：url

 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:blue
14         }
15         /*毗鄰選擇器，就是a和span緊挨着*/
16         a+span{
17             color:yellow
18         }
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 交集選擇器spa

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

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     我是一個div
26 </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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。