掌握好這幾個css屬性，少寫100行js代碼#學浪計劃#

1.calc函數

calc可動態設置某個元素的長度。

<code>
html
{
    
font-size
:
calc
(
100vw
 / 
8
)
}
.main
{
    
width
:
100%
;
    
height
:
calc
(
100vh
 - 
200px
)
}/<code>

比如上述代碼，把main元素的高度就設置為當前窗口的高度減去200px，字體大小也可用於此函數實現自適應字體；這個函數可用於所有css長度的屬性

2.attr函數

這個函數用於獲取元素的屬性的值，我常用於在before等偽類樣式中。

<code>
ul
 
li
 
::before
 {
 
position
: absolute;
 
color
: 
#fff
;
 
left
: 
calc
(
100%
 - 
50px
);
 
font-size
: 
12px
;
 
content
: 
attr
(data-tip);
 
line-height
: 
40px
;
 
transform
: 
scale
(
0
);
 
transition
: all 
0.8s
;
}/<code>

html

<code> 
<
li
 
data-tip 
=
"about"
>
<
a
 
href
=
""
>關於我們
a
>
li
>
 
<
li
 
data-tip
=
"center"
>
<
a
 
href
=
""
>項目中心
a
>
li
>
 
<
li
 
data-tip
=
"media" 
>
<
a
 
href
=
""
>媒體報道
a
>
li
>/<code>

attr就獲取li元素中data-tip屬性，然後加入到before中，注意不是所有的屬性都可以用attr獲取。

3.nth-child()

這個屬性大家應該用的還是比較多,可用於選擇特定的元素。

<code>
ul
 
li
:nth-child(odd)
{
background-color
:green;} 

ul
 
li
:nth-child(even) 
{
background-color
:gray} 

ul
 
li
:nth-child(3n)
{
background-color
:green;} 

ul
 
li
:nth-child(4)
{
background-color
:green;} 

ul
 
li
:nth-child(3n+2)
{
background-color
:green;} 

ul
 
li
:nth-child(n+6)
{
background-color
:green;} 

ul
 
li
:nth-child(-n+6)
{
background-color
:green;} 

ul
 
li
:nth-child(n+3)
:nth-child(-n+5) 
{
background-color
:green;} 

ul
 
li
:nth-child(3n-1)
{
background-color
:green;}/<code>

4.invalid和vaild

這兩個css屬性主要配合文本框的pattern的屬性使用，驗證成功時加載vaild樣式，失敗加載invaild樣式

html

<code><
input
 
type
=
"text"
 placeholder=
"請輸入你的手機"
 pattern=
"^1[3456789]\d{9}$"
 required>/<code>

css

<code>
input
:invalid 
{
background
:Red}
input
:valid
{
background
:green}/<code>

5.filter: grayscale

這個屬性主要是修改元素的黑白度，比如某人去世，讓界面變灰，就可以使用此屬性

<code>
html
{
filter
:
grayscale
(
100%
);}/<code>

這樣就可以使得頁面變成灰色，適用於悼念某人的情況下。

6.linear-gradient

此屬性配合background使用，實現漸變的背景

<code>
div
{
background-image
: 
linear-gradient
(to right, red , yellow); }/<code>

上述代碼設置div從左側到右側，從紅色到黃色的漸變。

關鍵字: ul 獲取 child