CSS3简介、新增选择器、属性选择器、伪元素选择器、伪元素
生活随笔
收集整理的這篇文章主要介紹了
CSS3简介、新增选择器、属性选择器、伪元素选择器、伪元素
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS3知識點:
CSS3的相關屬性不兼容低版本瀏覽器，IE9以下是不兼容的，在實際開發中要特別注意，移動端支持優于PC端，是在CSS2上新增的屬性，關于兼容這里有兩個名詞需要了解：
漸進增強 ：（針對低版本瀏覽器進行頁面構建，保證最基本的功能，再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗）；
優雅降級（一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容）
新增選擇器：
結構偽類選擇器：
通常選擇的是某指定的元素
<style>li:first-child {/* 1選中某元素（li）的父級（爸爸）的第一個子級元素（兒子）*/background: yellow;}li:last-child {/* 2選中某元素（li）的父級（爸爸）的最后一個子級元素（兒子）*/background: skyblue;}li:nth-child(3) {/*3 選中某元素（li）的父級（爸爸）的第3個子級元素（兒子，沒有0*/background: rgb(159, 41, 157);}li:nth-last-child(2) {/* 4選中某元素（li）的父級（爸爸）的倒數第2個子級元素（兒子）*/background:rgb(221, 42, 102);}/*需要注意的是：上面括號中的數字可以是關鍵詞或公式，如event表示偶數，則選中的是第偶數個，odd表示的是奇數，則選中的是第奇數個*/</style><body><div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div></body><style>div span:first-of-type {/* 選中某類型(span)的第一個元素*/color: yellow;}div span:last-of-type {/* 選中某類型(span)的最后一個元素*/color: yellow;}div span:nth-of-type(2) {/* 選中某類型(span)的第2個元素*/color: yellow;}</style><body><div><p>測試1</p><span>測試2</span><div>測試3</div><h2>測試4</h2><p>測試5</p><span>測試6</span><div>測試7</div><h2>測試8</h2><p>測試9</p><span>測試10</span><div>測試11</div><h2>測試12</h2></div></body>屬性選擇器：
選取標簽帶有某些特殊屬性的元素
<style>li[class] {/*1選中帶有class屬性的元素*/background: blue;}li[class=list2] {/*2選中帶有class屬性且屬性值為list2的元素*/font-size: 50px;}li[class^=lis] {/*3選中帶有class屬性且屬性值是以lis開頭的元素*/font-size: 50px;}li[class$=st2] {/*4選中帶有class屬性且屬性值是以st2結尾的元素*/list-style: none;}li[class*=t] { /* 5選中帶有class屬性且屬性值中有t的元素*/text-decoration: underline;}li[class~='tab'] {/* 5選中class屬性值中有tab屬性值的元素*/font-size: 40px;color: yellow;}li[id="box1"] { /* 5選中帶有id屬性且屬性值為box1的元素*/text-decoration: underline;}</style><body><div><ul><li>1</li><li class="list1">2</li><li>3</li><li class="list2">4</li><li class="box4 tab">5</li><li class="test2">6</li><li class="box1 tab">7</li><li id="box1">8</li></ul></div></body>偽元素選擇器：
標簽后面帶有四個點
<style>p::first-letter {/*p::first-letter 1選中p元素中文本的第一個字或者單詞*/font-size: 50px;}p::first-line {/*p::first-line 2選中p元素中第一行文本*/text-decoration: underline;}p::selection {/*p::selection 3選中p元素中鼠標選中的文本*/background: skyblue;color: white;}</style><body><p>今天給大家介紹一下偽元素選擇器，偽元素選擇器后面帶有四個小點，類選擇器帶有一個小點 ，偽類帶有兩個小點。今天給大家介紹一下偽元素選擇器，偽元素選擇器后面帶有四個小點，類選擇器帶有一個小點 ，偽類帶有兩個小點。今天給大家介紹一下偽元素選擇器，偽元素選擇器后面帶有四個小點，類選擇器帶有一個小點 ，偽類帶有兩個小點。</p></body>:focus用來選取有獲取焦點的元素，一般和input搭配使用：
<style>input:focus {background: skyblue;}</style><body><input type="text" value=""></body>before和after偽元素：
這兩個是比較常用的，他們必須要有content屬性否則無效，content可以空著（字體圖標中的編碼可以寫到content里面），其本質是在一個標簽內容前或后添加新內容，它們默認是行內元素，當display轉換后，可以設置對應的屬性。
<style>div::before {/*before在元素的前面添加內容，前面的四個點可以省略寫兩個，但是瀏覽器會默認補為四個點*/content: '我';background: skyblue;font-size: 40px;display: block;}div::after {/*after在元素的后面添加內容*/content: '十八歲！';font-size: 30px;background-color: rgb(94, 235, 230);}</style><body><div>今年</div></body>提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者 刪除。
筆者：苦海
總結
以上是生活随笔為你收集整理的CSS3简介、新增选择器、属性选择器、伪元素选择器、伪元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 显示多个页面退出登陆_软件测试小白如何第
- 下一篇： CSS中背景颜色、背景图片、渐变色、背景