子选择器
符号是>
,用来选择某个元素的子元素,只能是第一代元素。后代选择器
符号是空格,用来选择某个元素的后代元素,也就是所有的后代,不仅限于第一代元素。:first-child
伪类
表示给元素的第一个子元素添加样式。
举例:p:first-child
表示给元素的第一个子元素的p
标签添加样式。:nth-child( )
伪类
括号里填数字,表示第几个子元素。
举例:p:nth-child(2)
表示给元素的第二个子元素的p
标签添加样式。a
标签的Love Hate准则
a
标签有四个伪类,分别是a:link
表示未访问的链接,a:visited访问过的链接,a:hover
表示鼠标移动到链接,a:active
表示鼠标点击链接的一瞬间。
这几个伪类在CSS文件中书写的顺序不同,会导致链接显示的效果不同。假设另未访问的链接是黑色,访问过的链接是蓝色,鼠标移动到链接上时是黄色,假设设置的顺序分别是a:link
,a:hover
,a:visited
,那么当链接访问过时,鼠标移动到链接上就不会呈现黄色,如果没有被访问过,鼠标移动到链接上就会变成黄色;再将顺序调整为a:link
,a:visited
,a:hover
后,不论是否被访问过,鼠标移动到链接上都会变成黄色。
Love Hate原则表示的是a标签的四个伪类的书写顺序,即a:link
,a:visited
,a:hover
,a:active
。
总结来说,在CSS中,如果对于相同元素有针对不同条件的定义,应该把最一般的条件放在最上面,并依次向下,保证最下面的是最特殊的条件。浏览器在显示元素时,才会从特殊到一般、逐级向上验证条件,才会使你的每一个CSS语句都起到效果。opacity
属性
opacity
属性设置元素的不透明级别,从 0.0 (完全透明)到 1.0(完全不透明)。background-position
属性
设置背景图像的起始位置。这个属性的属性值比较复杂,举例说明:
background-position: 20px 20px
表示背景的左上角的坐标(x, y),假设这个背景是某个div的背景,那么这个坐标是相对于div左上角位置的坐标;background-position: top right
表示背景在div
的右上角显示。background-color
属性
这个属性的应用好像无处不在,自己在做的HTML时,有一个表格,表格的第三列和第四列都是透明的,然后自己傻傻的给这两列设置了background-color: transparent
,然后很满意,后来才发现background-color
属性的默认值本来就是transparent
,不需要设置,天啊,我居然傻傻地以为background-color
的默认值是白色。所以这就告诉我们一个道理,不要想当然,尤其是细节问题,一定要去实践一下。background-repeat
属性
属性值:repeat | repeat-x | repeat-y | no-repeat
。
repeat
:默认值,即在x和y轴方向上都重复;
repeat-x
:只在x轴方向上重复;
repeat-y
:只在y轴方向上重复;
no-repeat
:在x轴和y轴上都不重复。