CSS你可能还不知道的一些知识点
一、特殊選擇器
1、* 用于匹配任何的標記
2、> 用于指定父子節點關系
3、E + F?毗鄰元素選擇器，匹配所有緊隨E元素之后的同級元素F
4、E ~ F 匹配所有E元素之后的同級元素F
5、名稱[表達式]
5.1?E[att]?匹配所有具有att屬性的E元素（[att]獲取所有的定義了att的標簽；E[att=val]?匹配所有att屬性等于“val”的E元素；
5.2?[att=val] 獲取所有定義了att屬性并且屬性值等于val的標簽；
5.3?[att^=val]獲取所有定義了att屬性并且屬性值以val開頭的標簽；
5.4?[att$=val]獲取所有定義了att屬性并且屬性值以val結尾的標簽；
5.5?[att*=val]獲取所有定義了att屬性并且屬性值包含val字符的標簽；
5.6?[att~=val]獲取所有定義了att屬性并且屬性值包含val單詞的標簽；
5.7?[att|=val]獲取所有定義了att屬性并且屬性值等于val或者以val-開頭的標簽。）
6、偽類/偽元素
6.1?css 偽類用于向某些選擇器添加特殊的效果。css 偽元素用于將特殊的效果添加到某些選擇器。?
可以明確兩點，第一兩者都與選擇器相關，第二就是添加一些“特殊”的效果。這里特殊指的是兩者描述了其他 css 無法描述的東西。
偽類種類偽元素種類區別
這里用偽類 :first-child 和偽元素 :first-letter 來進行比較。
p>i:first-child {color: red}<p><i>first</i><i>second</i></p> //偽類 :first-child 添加樣式到第一個子元素如果我們不使用偽類，而希望達到上述效果，可以這樣做：
.first-child {color: red}<p><i class="first-child">first</i><i>second</i></p>即我們給第一個子元素添加一個類，然后定義這個類的樣式。那么我們接著看看為元素：
:p:first-letter {color: red}<p>i am stephen lee.</p> //偽元素 :first-letter 添加樣式到第一個字母那么如果我們不使用偽元素，要達到上述效果，應該怎么做呢？
.first-letter {color: red}<p><span class='first-letter'>i</span> am stephen lee.</p>
即我們給第一個字母添加一個 span，然后給 span 增加樣式。
兩者的區別已經出來了。那就是：
偽類的效果可以通過添加一個實際的類來達到，而偽元素的效果則需要通過添加一個實際的元素才能達到，這也是為什么他們一個稱為偽類，一個稱為偽元素的原因。
總結：
偽元素和偽類之所以這么容易混淆，是因為他們的效果類似而且寫法相仿，但實際上 css3 為了區分兩者，已經明確規定了偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。
:pseudo-classes::pseudo-elements但因為兼容性的問題，所以現在大部分還是統一的單冒號，但是拋開兼容性的問題，我們在書寫時應該盡可能養成好習慣，區分兩者。
簡單的說呢:偽元素的權重比偽類高，比如一個容器的為元素和偽類都定義了同一屬性，但值不一樣，那么將采用偽元素的。 從規范的角度偽元素一個頁面只使用一次，而偽類可以多次使用。偽元素產生新對象，在dom中看不到，但是可以操作；偽類是dom中一個元素的不同狀態；
6.1 常用的偽類
6.1.1?a:hover,a:link,a:active,a:visited,:focus /*動態偽類*/
6.1.2?:disabled,:enabled,:checked,:read-only,:read-write /*UI狀態偽類*/
6.1.2.1?:read-only 只讀狀態
6.1.2.2?:read-write 非只讀狀態
6.1.3?css3偽類
6.1.3.1?:nth-child(n)其父元素的第n個元素（如：p:nth-child(2){color:red;} p元素是其父元素的第2個元素的話字體顏色就是紅色）
6.1.3.2?nth-last-child(n) 其父元素的倒數第n個元素
6.1.3.3?:nth-of-type(n)?（如：p:nth-of-type(2){color:red;} p元素是其父元素的第2個p元素的話字體顏色就是紅色）
6.1.3.4?:first-child 其父元素的第一個元素
6.1.3.5?:last-child?其父元素的最后一個元素
6.1.3.6?nth-last-of-type(n)?（如：p:nth-last-of-type(2){color:red;} p元素是其父元素的倒數2個p元素的話字體顏色就是紅色）
6.1.3.7?:first-of-type 其父元素的第一個p元素
6.1.3.8?:last-of-type?其父元素的最后一個p元素
6.1.4?:not() /*否定偽類選擇器*/ (如：p:not(.a){color:red;})
6.2 常用的偽元素
? ? ???6.2.1?:before,::after
<style type="text/css"> p::before { content:"臺詞："; } </style> </head> <body> <p>我是唐老鴨。</p> <p>我住在 Duckburg。</p> <p><b>注釋：</b>對于在 IE8 中工作的 :before，必須聲明 DOCTYPE。</p> </body>6.2.2?::first-letter
<style type="text/css"> p::first-letter { color:red; } </style> </head> <body> <p>我是唐老鴨。</p> <p>我住在 Duckburg。</p> <p><b>注釋：</b>對于在 IE8 中工作的 :before，必須聲明 DOCTYPE。</p> </body>6.2.3?::first-line
<style type="text/css"> p::first-line { color:red; } </style> </head> <body> <p>我是唐老鴨。</p> <p>我住在 Duckburg。</p> <p><b>注釋：</b>對于在 IE8 中工作的 :before，必須聲明 DOCTYPE。注釋：</b>對于在 IE8 中工作的 :before，必須聲明 DOCTYPE。注釋：</b>對于在 IE8 中工作的 :before，必須聲明 DOCTYPE。注釋：</b>對于在 IE8 中工作的 :before，必須聲明 DOCTYPE。</p> </body>6.2.4?::selection
<style type="text/css"> ::selection { color:red; background-color:#00F; } </style> </head> <body> <p>我是唐老鴨。</p> <p>我住在 Duckburg。</p> <p><b>注釋：</b>對于在 IE8 中工作的 :before，必須聲明 DOCTYPE。注釋：</b>對于在 IE8 中工作的 :before，必須聲明 DOCTYPE。注釋：</b>對于在 IE8 中工作的 :before，必須聲明 DOCTYPE。注釋：</b>對于在 IE8 中工作的 :before，必須聲明 DOCTYPE。</p> </body>二、CSS權重
1、權重列表
<style> /*A>B>C>D>0*/ .main-content{color:#666;}/*0*/ h3{color:#f00;}/*D*/ .h3{color:#0f0;}/*C*/ .main-content h3{color:#00f;}/*CD*/ .main-content .h3{color:#0ff;}/*CC*/ #h3{color:#ff0;}/*B*/ </style> </head> <body> <div class="main-content"><h3 class="h3" id="h3">你好</h3> </div> </body>三、CSS3新增屬性
1、定義文本樣式
1.1?文字陰影text-shadow
<style> p {font-size:60px;font-weight:900;color:#999;text-shadow:5px 5px 5px #333,/*水平位移、垂直位移、模糊半徑、顏色*/-15px 15px 5px #333,-15px -15px 5px #333; } </style> </head> <body> <p>HTML5+CSS3</p> </body>1.2?文字縮進text-indent
1.3?文本換行
<style> p {width:100px;border:solid 1px red;word-wrap:break-word;/*斷單詞*/word-break:break-all;/*斷字符*/white-space:nowrap;/*強制在一行內顯示所有文本*/ } </style> </head> <body><p>中英混對薩排的時候English English English English English</p> </body>1.4?文本溢出
<style type="text/css"> div {width:200px;white-space:nowrap;border:solid 1px red;text-overflow:clip;/*不顯示省略標記，而是簡單的裁切掉*/text-overflow:ellipsis;/*當對象內文本溢出時顯示省略標記*/overflow:hidden; } </style> </head><body> <div>的撒打算打算打算大神大神大神大神大神</div> </body>1.5?圓角 border-radius
1.6?陰影 box-shadow
1.7?背景圖片鋪滿 background-size:cover
1.8?transform
<style type="text/css"> #d1 {width:100px;height:100px;background-color:#00F; } #d1:hover {transform:rotate(40deg) scale(1.2);/*順時針旋轉40度，放大1.2倍*/transform:translate(40px,40px);/*水平偏移40px,垂直偏移40px*/transform:skew(30deg,-10deg);/*水平傾斜30度，垂直傾斜10度*/ } </style> </head><body> <div id="d1"></div> </body>1.9?平滑過渡 transition
<style type="text/css"> #d1 {width:100px;height:100px;background-color:#00F; } #d1:hover {background-color:#F00;transition:background-color 1s ease-in;/*過渡的屬性，如果是所有的則是all，經歷的時間，過渡效果*/ } </style> </head> <body> <div id="d1"></div> </body>2.0?更復雜的動畫 animation?
<style type="text/css"> #d1 {magin:0px auto;width:959px;height:613px;background-image:url("11.jpg");animation:x-spin 20s infinite linear;/*動畫名稱，經歷時間，播放次數(為infinite則一直播放)，播放方式*/ } @-webkit-keyframes x-spin {0%{transform:rotateX(0deg);/*沿x軸開始旋轉*/}50%{transform:rotateX(180deg);/*沿x軸旋轉180*/}10%{transform:rotateX(360deg);/*沿x軸旋轉360*/} } </style> </head> <body> <div id="d1"></div> </body> <style type="text/css"> #d1 { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; }@keyframes mymove { from {left:0px;} to {left:200px;} } </style> </head> <body> <div id="d1"></div> </body>2.1?漸變?
<style type="text/css"> #d1 {height:200px;width:400px;border:solid 1px red;/*線性漸變，開始位置，結束位置，開始的顏色，結束的顏色，色標（色標位置，色標顏色，可以有多個色標，色標即是顏色過渡點）*///background:-webkit-gradient(linear,left top,left bottom,from(blue),to(red),color-stop(0.4,#fff),color-stop(0.6,#fff));/*徑向漸變，內圓圓心位置，內圓半徑，外圓圓心半徑，外圓半徑，開始顏色，結束顏色，色標*/background:-webkit-gradient(radial, center center, 0, center center, 460, from(blue), to(red),color-stop(0.6,#fff)); }</style> </head> <body> <div id="d1"></div> </body>2.2?響應式布局
<style type="text/css"> /*屏幕寬度大于900的時候*/ * {padding:0px;margin:0px;font-family:"微軟雅黑"; } #header {height:100px;border:solid 1px red;margin:0px auto; } #main {margin:10px auto;height:400px; } #footer {margin:0px auto;height:100px;border:solid 1px red; } @media screen and (min-width:900px) {#header,#footer{width:800px;}#main{width:800px;height:400px;;}#main-left{width:200px;height:400px;border:solid 1px red;float:left;}#main-center{width:394px;height:400px;border:solid 1px red;float:left;}#main-right{width:200px;height:400px;border:solid 1px red;float:left;} } @media screen and (min-width:600px) and (max-width:900px) {#header,#footer{width:600px;}#main{width:600px;height:400px;;}#main-left{width:200px;height:400px;border:solid 1px red;float:left;}#main-center{width:396px;height:400px;border:solid 1px red;float:left;}#main-right{display:none;} } @media screen and (max-width:600px) {#header,#footer{width:300px;}#main{width:300px;height:400px;;}#main-left{display:none;}#main-center{width:300px;height:400px;border:solid 1px red;}#main-right{display:none;} } </style> </head> <body> <div id="header">頭部</div> <div id="main"><div id="main-left">主題-左邊</div><div id="main-center">主題-中間</div><div id="main-right">主題-右邊</div> </div> <div id="footer"></div> </body>?
轉載于:https://www.cnblogs.com/xiaotianrui/p/8085322.html
總結
以上是生活随笔為你收集整理的CSS你可能还不知道的一些知识点的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python 解LeetCode：23.
- 下一篇： 【selenium2】【unittest