实验4 css的基本使用,html&css实验4.css子女选择器

这次实验主要熟悉css中的后代选择器：nth-child,nth-of-type , >, (空格), + 之类的用法：

复合选择器：

后代选择器：p span

{font-size:14px;}选择p元素的所有子孙元素中的span元素

子女选择器：p>span{font-size:14px;}选择p元素的所有子女元素中的span元素

组合选择器：p#start{font-size:14px;}选择id为start的p元素(交集)群组选择器：em, .even

{font-size:14px;}选择em元素或者类名为even的元素

相邻兄弟选择器：h1 + p{color:red;}选择h1之后的相邻兄弟元素(必须为p元素后续兄弟选择器：h1 ~ p

{color:red;}选择在h1之后所有兄弟元素中的p元素否定选择器：p:not(#start){color:red;}选择所有id不是start的p元素

nth-child选择器(结构伪类)：p:first-child{color:red;}

p的双亲的第一个子女p:last-child{color:red;}

p的双亲的最后一个子女p:only-child{color:red;}

p的双亲的唯一一个子女p:nth-child(5){color:red;}

p的双亲的第5个子女p:nth-child(even)color:red;}

p的双亲的第偶数个子女(奇数:odd)p:nth-child(3n+1){color:red;}

p的双亲的选择第1、4、7、...个子女p:nth-last-child(5){color:red;}

p的双亲的倒数第5个子女

nth-of-type选择器(结构伪类)：p:first-of-type{color:red;}

p的双亲的第一个子女(只计算p元素)p:last-of-type{color:red;}

p的双亲的最后一个子女p:only-of-type{color:red;}

p的双亲的唯一一个子女p:nth-of-type(5){color:red;}

p的双亲的第5个子女p:nth-of-type(odd){color:red;}

p的双亲的第奇数个子女(even,odd)p:nth-of-type(3n){color:red;}

p的双亲的选择第3、6、...个子女p:nth-last-of-type(5){color:red;}

p的双亲的倒数第5个子女

nth-child的其它用法： :nth-child(n+6)选中从第6个开始的子元素:nth-child(-n+9)选中从第1个到第9个子元素:nth-child(n+4):nth-child(-n+8)选中第4-8个子元素:nth-child(n+2):nth-child(-n+9):nth-child(odd)

选中的子元素是从第2位到第9位，并

且只包含奇数位。

实验CSS代码如下：

a:link{text-decoration:none;color:black;}

li:nth-child(even) a:link{text-decoration:none;color:green;}

a:visited{text-decoration:none;color:black;}

li:nth-child(even) a:visited{text-decoration:none;color:green;}

a:hover{text-decoration:underline;color:blue;}

li:nth-child(even) a:hover{text-decoration:underline;color:blue;}

a:active{text-decoration:underline;color:red;}

li:nth-child(even) a:active{text-decoration:none;color:green;}

input:focus,textarea:focus{background-color:yellow;}

button:disabled,input:disabled{color:#CCC;}

input:checked+span{color:red;}

textarea::selection{color:white;background-color:blue;}

a{color:blue;text-decoration:underline;}

li:nth-child(even) a{color:green;}

li:nth-child(n+3):nth-child(-n+9):nth-child(odd) a{color:red;}

a:link,a:visited{color:blue;text-decoration:none;}

a:active{color:#532301;text-decoration:none;}

p{text-align:left;text-indent:2em;}

p:first-letter{font-size:1.5em}

p:first-line{font-style:italic;}

p:hover{color:green;}

p:nth-of-type(even){font-weight:bold;}

.ref{vertical-align:super;font-size:10px;}

p:nth-child(n+3){text-indent:2em;}

p:first-letter{color:blue;font-size:1.5em;}

span{display:none;}

span:first-child{display:inline;}

p:hover span{display:inline;}

p:nth-child(n+3){text-align:left;}

tr:first-child > td{background-color:#DDD}

td:nth-child(even){background-color:rgb(200,200,255);}

tr:nth-of-type(2) td:nth-child(-n+3){color:grey;}

tr:nth-of-type(2) td:nth-child(n+4):nth-child(-n+7):after,tr:nth-of-type(3) td:nth-child(-n+4):after{content:"*";}

tr:nth-of-type(odd)>td:nth-of-type(odd),tr:nth-of-type(even)>td:nth-of-type(even){background-color:rgb(200,200,200);}

tr:nth-of-type(odd) >td:nth-of-type(even),tr:nth-of-type(even) >td:nth-of-type(odd){background-color:rgb(100,100,100);}

tr:nth-of-type(odd)>td:nth-of-type(odd):hover,tr:nth-of-type(even)>td:nth-of-type(even):hover{background-color:rgb(200,200,240);}

tr:nth-of-type(odd) >td:nth-of-type(even):hover,tr:nth-of-type(even) >td:nth-of-type(odd):hover{background-color:rgb(100,100,160);}

tr:nth-child(n+7) td>img:hover{border:dashed 1px yellow;margin:auto}

tr:nth-child(-n+2) td>img:hover{border:dashed 1px red;margin:auto}