html&css实验4.css子女选择器
来源:互联网 发布:亚马逊买书软件 编辑:程序博客网 时间:2024/04/30 17:31
这次实验主要熟悉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代码如下:
<style type="text/css">a:link{text-decoration:none;color:black;} <!--伪类-->li:nth-child(even) a:link{text-decoration:none;color:green;} <!-- li双亲的第偶数个子女元素 未被访问的链接 -->a:visited{text-decoration:none;color:black;} <!-- 访问过的链接 -->li:nth-child(even) a:visited{text-decoration:none;color:green;} <!-- li双亲的第偶数个子女元素中 被访问过的链接 -->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;}<style><style type="text/css">input:focus,textarea:focus{background-color:yellow;} <!--选择获得焦点的 input 或者 textarea元素 -->button:disabled,input:disabled{color:#CCC;} <!--禁用的button或者input元素 -->input:checked+span{color:red;} <!-- 被选中的input元素的相邻兄弟span--> textarea::selection{color:white;background-color:blue;}<!-- 选中的文本--><style><style type="text/css">a{color:blue;text-decoration:underline;} <!-- -->li:nth-child(even) a{color:green;}<!-- li的双亲的第偶数个子女中的后代a元素-->li:nth-child(n+3):nth-child(-n+9):nth-child(odd) a{color:red;}<!--选中的子元素是从第3位到第9位,并且只包含奇数位 --><style><style type="text/css">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> 元素的首字母-->p:first-line{font-style:italic;} <!--选择每个 <p> 元素的首行 -->p:hover{color:green;} p:nth-of-type(even){font-weight:bold;} <!--p的双亲的第偶数个子女 -->.ref{vertical-align:super;font-size:10px;} <!-- 选择ref类 --><!-- 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。super垂直对齐文本的上标--><style><style type="text/css">p:nth-child(n+3){text-indent:2em;} <!-- 从第3个开始的子女元素-->p:first-letter{color:blue;font-size:1.5em;} <!-- p元素的第一个字母 -->span{display:none;} <!--display属性用于定义建立布局时元素生成的显示框类型 ,none此元素不会被显示。-->span:first-child{display:inline;} <!-- span的双亲的第一个子女,显示为内联元素,元素前后没有换行符-->p:hover span{display:inline;} <!--鼠标置于上方的p元素中的子孙span元素 -->p:nth-child(n+3){text-align:left;} <!-- p的第3个开始的子元素--><style><style type="text/css"> tr:first-child > td{background-color:#DDD}<!-- tr双亲的第一个子女元素 的 子孙td元素--> td:nth-child(even){background-color:rgb(200,200,255);}<!-- td的双亲的第偶数个子女元素--> tr:nth-of-type(2) td:nth-child(-n+3){color:grey;}<!--tr双亲的第2个子女 的 子孙td元素 中的 第1个到第3个子元素 --> 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双亲的第2个子女的 子孙中 的td元素第4个到第7个的子元素的内容之后插入“*”--> <!-- tr双亲的第3个子女的 子孙中 的td元素第4个到第7个的子元素的内容之后插入“*”--><style><style type="text/css">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的双亲的第奇数个子女 的后代 td元素中为基数的, 同。。 --> 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的双亲的第奇数个子女 的后代 td元素中为基数的 并且鼠标放置其中的--> 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的第7个以后的子女元素中的td元素 的img子女元素 hover时 --> tr:nth-child(-n+2) td>img:hover{border:dashed 1px red;margin:auto}<style>
- html&css实验4.css子女选择器
- 3.html&css实验3.css选择器
- Html+CSS CSS中的选择器
- Html+CSS中子选择器
- HTML/CSS选择器
- Web4之CSS选择器实验
- HTML&CSS实验(1)
- HTML&CSS实验(2)
- HTML&CSS实验(3)
- HTML&CSS实验(4)
- HTML&CSS实验(5)
- HTML&CSS实验(6)
- HTML&CSS实验(7)
- HTML&CSS实验(8)
- HTML&CSS实验(9)
- HTML+CSS关于CSS选择器 (5)
- HTML+CSS基础(七):CSS选择器
- HTML+CSS关于CSS选择器 (5)
- 添加 ros工作路径
- 浅谈TDD、BDD与ATDD软件开发 (敏捷开发模式)
- 软件工程--3.需求工程概述
- 素数生成算法
- eclipse 各种版本spring插件安装
- html&css实验4.css子女选择器
- 【Spring学习17】bean作用域:单例和多例
- Myeclipse工程项目报错connot be resolved to a type
- 用深度学习(CNN RNN Attention)解决大规模文本分类问题
- 009进入页面时的问候
- Java中的null
- c++继承(二)菱形继承
- 4-4 求自定类型元素的平均
- 大视野 1191 匈牙利算法