當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS3的常用属性（一）

發(fā)布時間：2023/12/2 CSS 46 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3的常用属性（一）小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

E:first-child： 選擇所有元素的第一個子元素<E>（該偽類很容易讓人誤解，且是在CSS2中定義）
- p:first-child ?表示選擇器匹配任何元素的第一個子元素
- p>i:first-child ?表示選擇器匹配所有元素的第一個子元素
- p:first-child i ?表示選擇器匹配任何元素的第一個子元素中的所有元素
E:last-child： 選擇元素的最后一個子元素（與E:first-child相似）
E:nth-child(n)： 選擇所有元素的子元素<E>，且<E>元素是符合n制定的規(guī)則的
- E:nth-child(3)：選中第3個子元素<E>
- E:nth-child(n)：選中全部的子元素<E>，因為n遵循線性變化，從0，1，2，3，4…… 當n<=0時，選取無效
- E:nth-child(2n-1)：選中所有的奇數(shù)的<E>
- E:nth-child(-n 5)：選中前5個<E> ? 注意： E:nth-child(5-n) 這樣寫是沒有作用的
- E:nth-last-child(-n 5)：選中后5個<E>
- E:nth-child(even)：選中所有的偶數(shù)的子元素<E> ?補充： E:nth-child(odd) ?所有的奇數(shù)
E:empty： 選中沒有任何內(nèi)容的<E>元素，包括空格
E:target： 結(jié)合錨點進行使用，出于當前錨點的元素會被選中
E:not(selector)： 除selector（任意選擇器）外的元素都會被選中
其他不常用偽類選擇器如： :nth-of-type()，:nth-last-of-type()，:first-of-type，:last-of-type，:only-child，:only-of-type等

E::before，E::after： <E>元素內(nèi)部的開始和結(jié)束創(chuàng)建一個元素，該元素是行內(nèi)元素，且需結(jié)合content屬性使用
特別說明：這兩個選擇器在舊版本當中是偽類選擇器（不存在偽元素的概念），新版本下E:before，E:after會被自動識別為E::befote，E::after

rgba(0,0,0,0.1)： 色彩空間，一種新的顏色的表示方式，其中R（red），G（green），B（blue），A（alpha，不透明度）
hsla(200,,,1)： H（hue，色調(diào)，取值范圍0~360，其中0/360表示紅色，120表示綠色，240表示藍色），S（saturation，飽和度，取值范圍0%~100%），L（lightness，亮度，取值范圍0%~100%），A（alpha，不透明度，取值范圍0~1）
補充： opacity（不透明度）只能針對整個盒子設(shè)置，子盒子及其內(nèi)容會繼承父盒子的不透明度，而rgba，hsla可應(yīng)用于任何設(shè)置顏色的地方，且不具有繼承性

text-shadow： 可分別設(shè)置偏移量，模糊度，顏色（可設(shè)透明度）
- 水平偏移量：正值向右，負值向左
- 垂直偏移量：正值向下，負值向上
- 模糊度不能為負值
  舉例說明：
  文字凸起： .tu{ text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000; }
  .ao{
  text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
  }

box-sizing： css中通過box-sizing來指定盒子模型；box-sizing有兩個值；分別是：
- content-box：盒子的實際寬度等于width值加上border值加上padding值，是默認值
- border-box：盒子的實際寬度等于設(shè)置的width值，即使定義了border和padding，也不會改變盒子的實際寬度

更多專業(yè)前端知識，請上【猿2048】www.mk2048.com

以上是生活随笔為你收集整理的CSS3的常用属性（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。