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>


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

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

1.用CSS美化被鼠标选中的文字的样式 Windows自身提供的是一种很难看的墨绿色的颜色,而苹果电脑上提供的是浅绿色。火狐浏览器,IE9,Opera和谷歌浏览器允许我们自定义被选择文字的颜色。/*...
  • hanangjie
  • hanangjie
  • 2016年02月29日 16:10
  • 1572

html5,css3 学习心得

8月1日至8月10日 学习HTML5,CSS3 下面总结一下。 html5: HTML5主要新增了一些如下的新特性 1.用于绘画的canvas元素 主要通过JavaScript来绘制图形 基本实现...
  • qq_30604453
  • qq_30604453
  • 2016年08月10日 14:01
  • 1038

HTML5与CSS3学习心得

在学习Html5和CSS3过程中,布局都是又标签来进行填充自己的页面,然后通过css来进行对自己的界面进行修饰与装潢,打个比喻,你的body就行一个刚买的房子,里面的标签就像你把自己的房间如何规划,而...
  • root_1314_0708
  • root_1314_0708
  • 2016年08月19日 19:24
  • 1377

【前端面试】HTML5+CSS3初级面试3

1、写出media type的几种使用方法。 1)方法一 : 2)方法二: 3)方法三: @import url("style.css") screen; 4)方法四: @import url...
  • u010297791
  • u010297791
  • 2017年02月10日 11:15
  • 2899

Html5学习之路 基础

对于我们刚开始学习html的学生来说 ,繁杂的标签是非常麻烦的  而且不好记,闲话少说,首先我推荐的编译器是Hbuider,作为我们中国人开发的第一个编译器,我们理所当然支持一下。不过个人使用的是PH...
  • qq_28292937
  • qq_28292937
  • 2016年05月27日 20:54
  • 1017

HTML5中CSS3的属性选择器

HTML5中CSS3的属性选择器 E[att] E[att="val"] E[att^="val"] E[att$="val"] E[att*="val"] E[att~="val"]...
  • qq_37768482
  • qq_37768482
  • 2017年05月09日 16:54
  • 493

CSS3基础入门学习: 背景制作实例!

CSS3 背景CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制。在本章,您将学到以下背景属性:background-sizebackground-origin您也将学到如何使用多重背景图片...
  • yeana1
  • yeana1
  • 2016年07月28日 15:26
  • 398

WPF-WrapPanel 学习

WrapPanel,以流的形式由左到右,由上到下显示控件。 示例:   WrapPanel Margin="3">     Button VerticalAlignment="Top">Top But...
  • xiaojia7283
  • xiaojia7283
  • 2014年02月19日 15:32
  • 583

自学html5开发要学哪些?

HTML5开发是当今比较火热的一个专业,它相对于iOS开发、Android开发来说,学习门槛比较低,不需要任何编程基础,所以对于没有编程基础的同学来说,学HTML5开发是比iOS开发和Android开...
  • shenzhenfeng
  • shenzhenfeng
  • 2016年12月09日 20:46
  • 1395

HTML5、CSS3新标签、属性概况

有时会遇到判断新标签、属性的题目,没找到适合应试的,所以自己来收集总结一下,只列举那些现在兼容性尚可(IE10支持)的新属性及其基本功能(以w3school为准)。感觉玩w3school资料更新不是很...
  • rennaiqian
  • rennaiqian
  • 2017年03月19日 23:53
  • 221
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5学习_day13(1)--css3基础属性
举报原因:
原因补充:

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