整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
類
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定(點擊時)的鏈接 */
.tButton:link {color: #FF0000}
.tButton:visited {color: #FF0000}
.tButton:hover {color: #FF0000}
.tButton:active {color: #FF0000}注意:
在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后, 才是有效的。
在 CSS 定義中，a:active 必須被置于 a:hover 之后, 才是有效的。
記住, 這四種狀態, 在css中, 必須按照固定的順序寫：
a:link 、a:visited 、a:hover 、a:active
常用的a鏈接樣式：
a:link,a:visited{text-decoration:none;color:#444;}
a:hover{color:#f00;}偽元素
:first-line 偽元素
"first-line" 偽元素用于向某個選擇器中的文字的首行添加特殊樣式：
:first-letter 偽元素
first-letter 偽元素用于向某個選擇器中的文本的首字母添加特殊的樣式：
:before 選擇器
:before 選擇器在被選元素的內容前面插入內容。
請使用 content 屬性來指定要插入的內容。
在每個 <p> 元素的內容之前插入新內容：
p:before{
content:"臺詞：";
}:after 選擇器
:after 選擇器在被選元素的內容后面插入內容。
請使用 content 屬性來指定要插入的內容。
p:after{
content:"臺詞：";
}:selection 對光標選中的元素添加樣式。
特殊符號的使用
.label:before{content:"15";margin-right:0.3rem;}篩選分功能的偽類
:empty 選取沒有子元素的元素。比如選擇空的 span, 就可以用 span:empty 選擇器來選擇。這里要注意元素內有空格的話也不能算空, 不會被這個偽類選中。
:checked 選取勾選狀態的 input 元素， 只對 radio 和 checkbox 生效。
:disabled 選取禁用的表單元素。
:first-child 選取當前選擇器下第一個元素。
:last-child 與first-child 相反, 選取當前選擇器下最后一個元素。
:nth-child(an+b) 選取指定位置的元素。比如使用 li:nth-child(2n+1)
:nth-last-child(an+b) 這個偽類和 nth-child 相似, 只不過在計數的時候, 這個偽類是從后往前計數。
:only-child 選取唯一子元素。如果一個元素的父元素只有它一個子元素, 這個偽類就會生效。如果一個元素還有兄弟元素, 這個偽類就不會對它生效。
:only-of-type 選取唯一的某個類型的元素。如果一個元素的父元素里只有它一個當前類型的元素, 這個偽類就會生效。這個偽類允許父元素里有其他元素, 只要不和自己一樣就可以。
實例:制作首行特效
<html>
<head>
<style type="text/css">
p:first-line
{
color: #ff0000;
font-variant: small-caps
}
</style>
</head>
<body>
<p>
You can use the :first-line pseudo-element to add a special effect to the first line of a text!
</p>
</body>
</html>實例:制作首字母特效
<html>
<head>
<style type="text/css">
p:first-letter
{
color: #ff0000;
font-size:xx-large
}
</style>
</head>
<body>
<p>
You can use the :first-letter pseudo-element to add a special effect to the first letter of a text!
</p>
</body>
</html>子選擇器
:nth-child(n) p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 <p> 元素。
:nth-of-type(n) p:nth-of-type(2) 選擇屬于其父元素第二個 <p> 元素的每個 <p> 元素。
nth-child(①阿拉伯數字 ②odd even ③表達式)
li:nth-child(3n+1){
color: red;
}實例:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
/*strong:nth-child(阿拉伯數字2){
選擇stong并且strong在家里的排行是老2
}
strong:nth-of-type(阿拉伯數字2){
選擇strong但是他只要是類型的第二個就行了
}*/
/*strong:nth-child(2){ /* 沒有 */
color: red;
}*/
strong:nth-of-type(2){ /* <strong>我是三哥</strong> */
color: green;
}
</style>
</head>
<body>
<div>
<strong>我是大哥</strong>
<em>我是二姐</em>
<strong>我是三哥</strong>
<em>我是四妹</em>
</div>
</body>
</html>實例: 各行變色
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
li:nth-child(even){
background-color: orange;
}
li:nth-child(odd){
background-color: pink;
}
li:nth-child(5){/*單獨給第5個設置了*/
background-color: purple;
}
</style>
</head>
<body>
<button id="btn">新建</button>
<ul id="ul">
<li>明年或有4000億外資入市 美聯儲12月或再加息</li>
<li>科技 | 谷歌"臨時工"向CEO發公開信 要求提高工資</li>
<li>iOS 12.1.1更新發布：支持更多運營商使用雙SIM卡</li>
<li>體育 | 獻上膝蓋!外籍大神足彩11連中賺3040倍贏不停</li>
<li>三年抱倆！江宏杰宣布福原愛懷二胎 已懷孕6個月</li>
<li>曝林志穎登機后要拿行李 致航班延誤惹人怨</li>
<li>庫里飆9三分戲耍般轟42+9+7 復出后光速回歸巔峰</li>
</ul>
<script type="text/javascript">
btn.onclick=function(){
ul.innerHTML +="<li>陳偉騰的愛豆是kobe</li>";
}
</script>
</body>
</html>CSS2.1中只能給標簽增加：a:link、a:hover、a:visited、a:active
:focus input:focus 選擇獲得焦點的 input 元素。
:empty p:empty 選擇沒有子元素的每個 <p> 元素（包括文本節點）。
:checked input:checked 選擇每個被選中的 <input> 元素。
:enabled input:enabled 選擇每個啟用的 <input> 元素。
:disabled input:disabled 選擇每個禁用的 <input> 元素
:target #news:target 選擇當前活動的 #news 元素
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
/*
偽類選擇器我們通常習慣用一個冒號隔開
*/
/*獲得焦點*/
input[type="text"]:focus{
border-color: red;
outline: none;
}
/*元素被選中*/
[type="checkbox"]:checked,[type="radio"]:checked{
width: 50px;
height: 50px;
}
/*被禁用的 說白了就是元素有disable屬性的標簽*/
button:disabled{
background-color: orange;
}
</style>
</head>
<body>
<!--CSS2.1中只能給標簽增加：a:link、a:hover、a:visited、a:active
:focus input:focus 選擇獲得焦點的 input 元素。
:empty p:empty 選擇沒有子元素的每個 <p> 元素（包括文本節點）。
:checked input:checked 選擇每個被選中的 <input> 元素。
:enabled input:enabled 選擇每個啟用的 <input> 元素。
:disabled input:disabled 選擇每個禁用的 <input> 元素
:target #news:target 選擇當前活動的 #news 元素
-->
<input type="text" name="" id="" value="" />
<input type="radio" name="" id="" value="" />
<input type="checkbox" name="" id="" value="" />
<button disabled>按鈕被禁用</button>
<button>按鈕可點擊</button>
</body>
</html>:selection
文本被選中的時候
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
div{
width: 600px;
border: 1px solid red;
}
/*偽元素選擇器我們習慣用2個冒號*/
/*div:after{
content: "NBA";
}*/
/*首字*/
div::first-letter{
font-size: 48px;
}
/*首行*/
div::first-line{
background-color: orange;
}
/*文本被選中的時候*/
div::selection{/*它必須是2個冒號*/
color: #fff;
background-color: pink;
}
</style>
</head>
<body>
<div>可怕的是，庫里有手感時，他是無法阻擋的，此后他繼續施展外線火力，首節就投出5中4的三分表現。首節他又得到了16分，上一場比賽他首節得到18分，看來復出后庫里的狀態是迅速又回到了開季的巔峰。庫里下去休息時，為勇士建立了7分的優勢，結果他在場下沒一陣功夫，優勢都被騎士重新追趕回去了。重新上陣后，庫里還是保持良好的進攻狀態，外線又是4中2，而且他在該傳球時就果斷傳，不會拖泥帶水。半場最后階段，騎士突然打出進攻高潮，狂中3分，庫里也有回應，但對面還是各種神仙球也進，沒辦法，上半場勇士暫時落后。</div>
</body>
</html>
:only-child和:only-of-type
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
del:only-child{
/*我選擇del標簽并且該標簽作為div唯一的兒子*/
color: red;
}
del:only-of-type{
/*我選擇del標簽并且該標簽作為div唯一的類型*/
background-color: orange;
}
</style>
</head>
<body>
<div>
<strong>我是大哥</strong>
<em>我是二姐</em>
<strong>我是三哥</strong>
<em>我是四妹</em>
<del>我是五弟</del>
</div>
</body>
</html>:nth-child和nth-last-child
言
熟悉前端的人都會聽過css的偽類與偽元素，然而大多數的人都會將這兩者混淆。本文從解析偽類與偽元素的含義出發，區分這兩者的區別，即使你有用過偽類與偽元素，但里面總有一兩個你沒見過的吧。
偽類與偽元素
先說一說為什么css要引入偽元素和偽類，以下是css2.1 Selectors章節中對偽類與偽元素的描述：
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
直譯過來就是：css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。也就是說，偽類和偽元素是用來修飾不在文檔樹中的部分，比如，一句話中的第一個字母，或者是列表中的第一個元素。下面分別對偽類和偽元素進行解釋。
偽類用于當已有元素處于的某個狀態時，為其添加對應的樣式，這個狀態是根據用戶行為而動態變化的。比如說，當用戶懸停在指定的元素時，我們可以通過:hover來描述這個元素的狀態。雖然它和普通的css類相似，可以為已有的元素添加樣式，但是它只有處于dom樹無法描述的狀態下才能為元素添加樣式，所以將其稱為偽類。
偽元素用于創建一些不在文檔樹中的元素，并為其添加樣式。比如說，我們可以通過:before來在一個元素前增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實際上不在文檔樹中。
偽類與偽元素的區別
這里通過兩個例子來說明兩者的區別。
下面是一個簡單的html列表片段：
<ul> <li>我是第一個</li> <li>我是第二個</li></ul>
如果想要給第一項添加樣式，可以在為第一個<li>添加一個類，并在該類中定義對應樣式：
<ul>
<li class="first-item">我是第一個</li>
<li>我是第二個</li></ul>
li.first-item {
color: orange}
如果不用添加類的方法，我們可以通過給設置第一個<li>的:first-child偽類來為其添加樣式。這個時候，被修飾的<li>元素依然處于文檔樹中。
li:first-child {
color: orange}
下面是另一個簡單的html段落片段：
<p>Hello World, and wish you have a good day!</p>
如果想要給該段落的第一個字母添加樣式，可以在第一個字母中包裹一個元素，并設置該span元素的樣式：
<p><span class="first">H</span>ello World, and wish you have a good day!</p>
.first {
font-size: 5em;}
如果不創建一個<span>元素，我們可以通過設置<p>的:first-letter偽元素來為其添加樣式。這個時候，看起來好像是創建了一個虛擬的<span>元素并添加了樣式，但實際上文檔樹中并不存在這個<span>元素。
<p>Hello World, and wish you have a good day!</p>
p:first-letter {
font-size: 5em;}
從上述例子中可以看出，偽類的操作對象是文檔樹中已有的元素，而偽元素則創建了一個文檔數外的元素。因此，偽類與偽元素的區別在于：有沒有創建一個文檔樹之外的元素。
偽元素是使用單冒號還是雙冒號
CSS3規范中的要求使用雙冒號(::)表示偽元素，以此來區分偽元素和偽類，比如::before和::after等偽元素使用雙冒號(::)，:hover和:active等偽類使用單冒號(:)。除了一些低于IE8版本的瀏覽器外，大部分瀏覽器都支持偽元素的雙冒號(::)表示方法。
然而，除了少部分偽元素，如::backdrop必須使用雙冒號，大部分偽元素都支持單冒號和雙冒號的寫法，比如::after，寫成:after也可以正確運行。
對于偽元素是使用單冒號還是雙冒號的問題，w3c標準中的描述如下：
Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.
大概的意思就是：雖然CSS3標準要求偽元素使用雙冒號的寫法，但也依然支持單冒號的寫法。為了向后兼容，我們建議你在目前還是使用單冒號的寫法。
實際上，偽元素使用單冒號還是雙冒號很難說得清誰對誰錯，你可以按照個人的喜好來選擇某一種寫法。
偽類與偽元素的具體用法
這一章以含義解析和例子的方式列出大部分的偽類和偽元素的具體用法。下面是根據用途分類的偽類總結圖和根據冒號分類的偽元素總結圖：
某些偽類或偽元素仍然處于試驗階段，在使用前建議先在Can I Use等網站查一查其瀏覽器兼容性。處于試驗階段的偽類或偽元素會在標題中標注。
作者：向建峰_Javan
鏈接：http://www.imooc.com/article/details/id/254506
"巧用CSS ::before 創建帶透明陰影效果的圖標按鈕：實戰指南"
引言
在Web前端設計中，CSS的偽元素`::before`為我們提供了無盡的創新可能，尤其在創建獨特且富有交互性的UI組件時，例如帶有透明陰影效果的圖標按鈕。本文將深入解析如何利用`::before`偽元素結合CSS3的陰影屬性，實現一種新穎、美觀且實用的圖標按鈕設計，讓你的用戶界面更加生動和有趣。
---
css
.button {
position: relative;
}
.button::before {
content: "";
/* 這里將添加用于生成圖標的樣式 */
}
`::before`是CSS中的一個偽元素，它可以在元素內容的前面插入額外的內容。這意味著我們可以在不修改HTML結構的前提下，通過CSS添加樣式化的圖形或內容。這對于創建自定義圖標按鈕極為有用。
css
.button {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50; /* 綠色背景 */
color: white;
border: none;
cursor: pointer;
}
.button::before {
content: '';
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #fff transparent;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 15px;
}
這段代碼創建了一個帶有白色三角形圖標的綠色按鈕。
---
css
.button:hover::before {
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}
若要實現更高級的效果，比如讓陰影隨著鼠標懸停而變化，我們可以使用`:hover`偽類：
- **自定義形狀圖標**：只需修改`::before`內的`border`屬性即可創建不同形狀的圖標。
- **動態過渡效果**：結合`transition`屬性，可以為陰影效果添加平滑過渡。
- **響應式設計**：針對不同屏幕尺寸，調整陰影大小及透明度，提升用戶體驗。
---
結論
通過巧妙地運用CSS `::before`偽元素以及`box-shadow`屬性，我們成功地制作出了一款具有透明陰影效果的圖標按鈕。這樣的實踐不僅提升了網站或應用的視覺吸引力，同時也增強了其交互性。希望本篇指南能幫助你在實際項目中靈活運用這些技巧，創作出更多令人眼前一亮的設計。在前端的世界里，想象力和技術的融合才是無限可能的源泉。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
