最近面试时候发现自己最熟悉的css确实开发中好多细节没注意到，为了防止在栽跟头，打算从头到底捋一遍咯
语法部分：
1.css几种选择器的写法
（1）h1 em {color:red;} （后代选择器）
（2）h1 > strong {color:red;} （子元素选择器）
（3）table.company td > p（结合后代选择器和子选择器）
（4）h1 + p {margin-top:50px;} （相邻兄弟选择器） 例子：li + li {font-weight:bold;} 会把列表中第二个元素变粗
（5）html > body table + ul {margin-top:20px;}（结合其他选择器）
这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。
2.伪类元素的使用：
| 属性 | 描述 | CSS |
|---|---|---|
| :active | 向被激活的元素添加样式。 | 1 |
| :focus | 向拥有键盘输入焦点的元素添加样式。 | 2 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 | 1 |
| :link | 向未被访问的链接添加样式。 | 1 |
| :visited | 向已被访问的链接添加样式。 | 1 |
| :first-child | 向元素的第一个子元素添加样式。 | 2 |
| :lang | 向带有指定 lang 属性的元素添加样式。 | 2 |
样式部分
3.background:
background-position 属性改变图像在背景中的位置。
背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。
CSS背景的属性
| 属性 | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
原文地址：https://www.cnblogs.com/menghan94/p/10415739.html
时间： 2024-10-12 13:39:46