HTML5学习_day13(1)--css3基础属性

原创 2016年10月12日 20:37:38

css3选择器

css2选择器

1.标签选择器

2.id选择器

3.class选择器

4.群组选择器

5.后代选择器

6.伪类选择器(first-child等)

7.通配选择器

css3选择器:

1.子选择器 例如:div>p

2.相邻兄弟选择器 div+p(只能选择到div下方第一个p 若div下方第一个不是p元素 就没改变 且div自身的样式不改变)

3.属性选择器 例如 div[属性]{}

<div width="123"></div>

<style type="text/css">

div[width]{

height: ;

background: ;

}

</style>

4.属性值选择器 例如:div[class="123"]{}

<div class="div0"></div>

<div class="div1 div0"></div>

<style type="text/css">

div[class="div0"]{值一定要完全匹配

这里的样式就是div0的样式

}

</style>

5.同级通用选择器 div~p{} 选择的是与div同级的所有p标签

6.伪类选择器

:before

:after

:nth-child(2)

:first-chile 在父级里面同级第一个标签被选中,如果最末尾元素不是选择器的标签时。就无法选中如(p:first-chile  第一个不是p标签  就无法选中)

:last-child  在父级里面同级最末尾的一个标签被选中,如果最末尾元素不是选择器的标签时。就无法选中如(p:last-chile  最后一个不是p标签  就无法选中)

:first-of-type 这个就是父级里面所有标签的第一个 如(p:first-of-type 就是该包含块中所有p标签中的第一个p标签)

:last-of-type 这个就是父级里面所有标签的最后一个 如(p:last-of-type 就是该包含块中所有p标签中的最后一个p标签)

:only-child 这个是父级里面只有一个标签才能选中如(p:onli-child p所在的包含块里面只有p这个唯一一个标签才能选中)

:only-of-type 这个是父级里面可以有多个标签 但选择器的标签种类只有一个如(p:only-of-type p标签只能在包含块中出现一次)


<span style="white-space:pre">		</span><div>
			<p>第一个元素</p>
			<h1>第二个子元素</h1>
			<span>第三个子元素</span>
			<span>第四个子元素</span>
			<p>第五个子元素</p>
		</div>		
		<style type="text/css">
			p:first-child{
				color: red; 
			}
			p:last-child{
				color: blue;
			}
		</style>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

【1】网页的构造块(《HTML5与CSS3基础教程 (第8版)》)

(吐槽一下,CSDN博客的文本编译器真是。。。唉。。。)一个网页主要包含三个部分: 文本内容 text content 对其他文件的引用 references to other files 标记 ma...

HTML5学习笔记—CSS3 transform转换属性(2D/3Dtransform方法)

transform方法 table{ border:3px solid yellow; border-collapse:collapse; } td,th{ border:1px solid pin...
  • ccnanxi
  • ccnanxi
  • 2017年01月03日 16:00
  • 373

《HTML5与CSS3权威指南》学习笔记1

第1章 Web时代的变迁 不管怎么样,就是变迁了…… 第2章 2.1.2 变化的标记方法 DOCTYPE声明:HTML5中刻意不使用版本声明 指定字符编码,可以且只可以使用原来...
  • yinmo01
  • yinmo01
  • 2012年09月29日 16:43
  • 1257

【html5和css3】transition属性整理

初学者整理transition属性,以为笔记,防止遗忘 transition

【html5和css3】animation属性整理

常做笔记,踏实学习 .div1{ width: 500px;

8.HTML5 CSS3 变形与动画相关属性

1. CSS3提供的对变形的支持 transform translate(tx,[ty]) translateX(tx):横向上位移 translateY(ty):纵向上位...

HTML5、CSS3新标签、属性概况

有时会遇到判断新标签、属性的题目,没找到适合应试的,所以自己来收集总结一下,只列举那些现在兼容性尚可(IE10支持)的新属性及其基本功能(以w3school为准)。感觉玩w3school资料更新不是很...

HTML5和css3超实用的新属性集合

1.用CSS美化被鼠标选中的文字的样式 Windows自身提供的是一种很难看的墨绿色的颜色,而苹果电脑上提供的是浅绿色。火狐浏览器,IE9,Opera和谷歌浏览器允许我们自定义被选择文字的颜色。/*...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5学习_day13(1)--css3基础属性
举报原因:
原因补充:

(最多只允许输入30个字)