前端学习——第四天

一、CSS背景属性

属性	描述
background-attachment	背景图像是否固定或者也随页面的其余部分滚动
background-color	元素的背景颜色
background-image	元素的背景图像
background-position	设置背景图像的起始位置
background-repeat	设置背景图像是否以及如何重复：no-repeat; repeat-x;repeat-y

渐变：

div{
  background-image:linear-gradient(to bottom,orange,yellow);
}

该例：渐变从上到下，从顶部的橘色，平稳过渡到底部的黄色

二、列表

ol{
list-style-type: upper-roman;
list-style-position: inside;
list-style-image: url(star.svg);
 }

ul{
list-style-type: square;
list-style-image: url(example.png);
list-style-position: inside;
}

ul{
list-style: square url(example.png) inside;
}

列表计数

<ol start="3" reversed>
  .....
</ol>

结果序号是：3、2、1

列表项指定数值：

<ol>
  <li value="2">xxx</li>
  <li value="6">xxxxxx</li>
</ol>

三、链接

a:link            点击前

a:visited       已点击

a:focus         选择

a:hover        悬停

a:active        点击

四、选择器

1、派生选择器：

li strong{
   color: green;
}

则只有<li>标签里的<strong>所包围的文字为green。

2、伪类和伪元素

（1）伪类：是一个以冒号(:)作为前缀的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。

如：      :link    :visited    :hover   :active等

（2）伪元素：前缀是两个冒号 (::) ， 同样是添加到选择器后面去选择某个元素的某个部分。

如—— ::after   ::before    ::first-letter   ::first-line    ::selection      ::backdrop

例子：

<ul>
   <li><a href="https://www.baidu.com/">百度一下</a></li>
</ul>

加上CSS：

[href^=http]::after{
    content: '*';
}

所有以http开头的超链接，其内容->加上一个'*'。

补充：

:nth-of-type(n)

选择匹配属于父元素的特定类型的第N个子元素的每个元素。