这些标签能够让搜索引擎更直接的解析页面内容。
<header></header>语义：文档或者页面的头部
<nav></nav>语义：导航
这两者不是组合标签，但经常这样使用
<header>
<nav>
<ul>
<li>导航1</li>
<li>导航2</li>
</ul>
</nav>
</header>
注意header并不一定是页面的头部。
<footer></footer>
语义：文档或者页面的脚部。通常用来包含文档的版权信息 或者授权 或者友情链接
<aside></aside>
语义：侧边栏 或者副属信息
<hgroup></hgroup>
语义：标题的集合，可以用来包含多个h1到h6的标签
<figure></figure>
语义：图片区域，可以包含多个图片或者一个figcaption，figcaption用来表示图片标题
<figcaption></figcaption>
语义：图片区域的标题，一般写在figure里面
<section></section>
语义：分区，页面或者文档的一部分区域，有独立的内容。但结构相近，就可以用section。
可以包含header h1~h6等等
<article></article>
语义:独立的内容，可以是文章 blog 帖子 短文或者回复评论
CSS选择器：
子选择器: >
例如
<style>
div>span{
border:1px solid red;
background:yellow;
}
</style>
<body>
<div>
<p>
<span>我是p里的span</span>
</p>
<span>我是div里的span</span>
<span>我是div里的span</span>
<span>我是div里的span</span>
</div>
</body>
作用范围：div下的span会享受样式 p里的不享受
原因 p里的是孙子
相邻兄弟选择器+
例如
<style>
p+span{
border:1px solid red;
background:yelllow;
}
</style>
<div>
<p>
我是p
</p>
<span>我是相邻p标签的span</span>
<span>我不是相邻的span</span>
</div>
<div>
<p>
我是p
</p>
<strong>我是相邻p标签的span</strong>
<span>我不是相邻的span</span>
</div>
作用范围：选择相邻的两个元素 元素一定要有同一个父级，+后面的元素享受样式。
比如上面只有 ：我是相邻p标签的span享受样式
同级元素通用选择器:~
作用范围：所有相同父级中，位于p标签之后的同级span标签享受样式。
下面这个例子里 就是：我是同级p之后的span 享受样式
<style>
p~span{
border:1px solid red;
background:yellow;
}
</style>
<div>
<span>我是p之前的span</span>
<span>我是p之前的span</span>
<span>我是p之前的span</span>
<p>我是p</p>
<ul>
<li>
<span>我是之后的li里的span</span>
</li>
</ul>
<h2>
<span>我是之后的h2里的span</span>
</h2>
<span>我是同级p之后的span</span>
<span>我是同级p之后的span</span>
<span>我是同级p之后的span</span>
</div>
属性选择器：
第一种：选择带有某种属性的所有元素
a[属性名]{。。。。}
例如
只有有属性的四个a标签享受样式
<style>
a[href]{
border:1px solid red;
background:yellow;
}
</style>
<body>
<a href="#">我是有属性的A</a>
<a href="#">我是有属性的A</a>
<a href="#">我是有属性的A</a>
<a href="#">我是有属性的A</a>
<a>我是没有属性的A</a>
<a>我是没有属性的A</a>
<a>我是没有属性的A</a>
<a>我是没有属性的A</a>
</body>
第二种：选择带有某种属性，并且规定属性值的元素
只有text属性为password的享受样式
例如
<style>
input[type="password"]{
border:10px solid red;
background:yellow;
}
</style>
<body>
<input type=“text”>
<input type="text">
<inpur type="password">
<input type="password">
</body>
子选择器 > 父级与子级之间
相邻兄弟选择器 + 相邻的第一个元素
同级通用选择器 ~ 所有相同父级中同级的元素
伪类：是一种特殊的属性，可以理解为表示一种状态
a标签的4个伪类：
a:link{} 规定链接没有被访问时的样式
a:visited{} 规定链接被访问之后的样式
a:hover{} 规定鼠标移上去时的样式
a:active{}规定点击时的样式
注意这四个伪类写的顺序是不能更改的
对于这个四个伪类顺序，可用love hate爱恨简记
还有一种用法
p:first-child{..}
用来选择属于其父级下的第一个元素，并且必须是p，否则不生效
p:lastt-child{..}
用来选择属于其父级下的最后一个元素，并且必须是p，否则不生效
类似的还有
p:first-of-type{}
p:last-of-type{}
用来选择属于其父级下的第一个/最后一个元素，并且一定会生效
选择属于其父级下的第n个元素,并且一定会到匹配p标签，不会不生效。
如:
p:nth-of-type(n){
background:red;
}
温馨提示：n可以用来计算并多选。比如写上2n-1,那么所有的排行为奇数的对应标签都会被选中
伪类选择器
选择属于其父级下的第n个元素,并且必须是p标签，如果第一个标签不是p，则不生效。
如：p:nth-child(n){
background:red;
}
温馨提示：n可以用来计算并多选。比如写上2n,那么所有的排行为偶数的对应标签都会被选中
结构伪类选择器使用语法
选择器 功能描述
E:fisrt-child 作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
E:last-child 作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
E:root 选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同
E F:nth-child(n) 选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.
E F:nth-last-child(n) 选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个 元素，与last-child等同
E:nth-of-type(n) 选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n) 选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type 选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同
E:last-of-tye 选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同
E:only-child 选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type 选择父元素只包含一个同类型子元素，且该子元素匹配E元素
E:empty 选择没有子元素的元素，而且该元素也不包含任何文本节点
注：（1），“ul>li:nth-child(3)”表达的并不是一定选择列表ul元素中的第3个子元素li，仅有列表ul中第3个li元素前不存在其他的元素，命题才有意义，否则不会改变列表第3个li元素的样式。
（2），:nth-child(n) 中参数只能是n，不可以用其他字母代替。
（3），:nth-child(odd) 选择的是奇数项，而使用:nth-last-child(odd) 选择的却是偶数项
扫一扫
882
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
