HTML5 -03- CSS3-元素相关知识

3 HTML5-CSS3-元素相关知识

3.1 属性选择器

属性选择器：属性是相对于标签而言。所谓属性选择器就是根据指定名称的属性的值来查找元素

    1)E[attribute] 表示存在attr属性即可；
            div[class]
    2)E[attr=val] 表示属性值完全等于val；
            div[class=mydemo]
    3)E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置；
            div[class*=mydemo]
    4)E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置；
            div[class^=mydemo]
    5)E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置；
            div[class$=demos] 

• 注：下划线：text-decoration:underline
• 注：字体大小：font-size:30px

3.2 兄弟选择器

• +：获取当前元素的相邻的满足条件的元素
  

• ~：获取当前元素的满足条件的兄弟元素 

	/*下面这句样式说明查找 ：添加了.first样式的标签的相邻的li元素
	1.相邻
	2.必须是指定类型的元素*/
	.first + li{
		color: blue;
	}

	/*下面样式查找添加了.first样式的元素的所有兄弟li元素
	1.必须是指定类型的元素*/
	.first ~ li{
		color: pink;
	}     

3.3 伪类选择器

以某元素相对于其父元素或兄弟元素的位置来获取元素的结构伪类。因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，第一种是我们在链接中常看到的锚点伪类，如":link",":visited";另外一种被称作用户行为伪类

1. E:first-child:查找E这个元素的父元素的第一个子元素E
2. E:last-child:最后一个子元素
3. E:nth-child(n): 第n个子元素，计算方法是E元素的全部兄弟元素
4. E:nth-last-child(n): 同E:nth-child(n) 相似，只是倒着计算
5. E:nth-child(even): 所有的偶数
6. E:nth-child(odd): 所有的奇数
7. E:nth-of-type(n):指定类型
8. E:empty 选中没有任何子节点的E元素，注意，空格也算子元素
9. E:target 结合锚点进行使用，处于当前锚点的元素会被选中

    /*相对于父元素的结构伪类*/
    /*E:first-child:查找E元素的父级元素中的第一个E元素。在查找的时候并不会限制查找的元素的类型*/
    /*下面这句样式查找：li的父元素中的第一个li元素
      1.相对于当前指定元素的父元素
      2.查找的类型必须是指定的类型*/