CSS选择器 渐变背景

boy 火巨

css选择器

CSS分组选择  td,div,ul,li       将同样样式应用于多个选择器，以逗号分隔   示例：td,div a,body{ font-size: 16px; } 

CSS相邻选择器   e1+e2    选择紧贴在e1元素之后的e2元素，相邻选择符只会选择符合条件的相邻的兄弟元素   示例：p + p {  color: red; } 

E:focus 焦点   设置元素在成为输入焦点（该元素的 onfocus 事件发生）时的样式。

示例： input:focus{ background: blue; color: yellow; border: 1px solid black; outline: none; } 

E:after 和 E:before         E:after 选择器在被选元素的内容后面插入内容。 E:before 选择器在被选元素的内容前面插入内容。 通常使用 content 属性配合，来指定要插入的内容。

示例： p:before { font-size:18px; color:red; font-weight: bold; content:"正文开始" }  

            p:after { font-weight: bold;  content:"正文结束。" }

css选取

tr td   :first-child   每个tr下面的第一个td
li    :nth-child(3)               第三个li

li    :nth-last-child(1)       倒数第一个

div:nth-child(odd) //奇数个div

div:nth-child(even) //偶数个div

p:first-child选择属于其父元素的首个子元素的每个 <p> 元素，

span:nth-child(2)  选择第2个span

li:first-child   选择列表中的第一个 <li> 元素并设置其样式：

ul>:first-child   设置每个 <ul> 的首个子元素，并设置其样式：

p:first-child i 选择每个 <p> 中的每个 <i> 元素并设置其样式，其中的 <p> 元素是其父元素的第一个子元素 

#Ulist li:nth-of-type(odd){ margin-left: 20px;}奇数行  

#Ulist li:nth-of-type(even){margin-left: 10px;}偶数行

渐变背景

从上到下的线性渐变：

background: linear-gradient(red, blue); /* 标准的语法 */

线性渐变 - 从左到右

background: linear-gradient(to right, red , blue); /* 标准的语法 */ }

带有指定的角度的线性渐变：

background: linear-gradient(180deg, red, blue); /* 标准的语法 */

带有多个颜色结点的从上到下的线性渐变：

background: linear-gradient(red, green, blue); /* 标准的语法 */

创建一个带有彩虹颜色和文本的线性渐变：

background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

从左到右的线性渐变，带有透明度：

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */

径向渐变 - 颜色结点均匀分布（默认情况下）

background: radial-gradient(red, green, blue); /* 标准的语法 */

颜色结点不均匀分布的径向渐变：

background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */

一个重复的线性渐变：

background: repeating-linear-gradient(red, yellow 10%, green 20%);

形状为圆形的径向渐变：

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

/*