CSS3-使用CSS选择器(第二部分)

CSS3-使用CSS选择器(第二部分)

<!-- 使用结构性伪类选择器 -->

<!-- 使用根元素选择器 -->
<style type = "text/css">
	:root{
		border: thin black solid;
		padding: 4px;
	}
</style>
<!-- 总是返回html元素 -->


<!-- 使用子元素选择器 -->
<!-- 使用 :first-child 选择器 -->
<style type = "text/css">
	:first-child{
		border: thin black solid;
		padding: 4px;
	}
</style>
<!-- 选择了所有元素的第一个元素 -->

<style type = "text/css">
	p > span:first-child{
		border: thin black solid;
		padding: 4px;
	}
</style>
<!-- 选择了p元素下第一个子span元素 -->


<!-- 使用 :last-child 选择器 -->
<style type = "text/css">
	:last-child{
		border: thin black solid;
		padding: 4px;
	}
</style>


<!-- 使用 :only-child 选择器 -->
<!--  父元素包含的唯一子元素,只包含一个元素 -->
<style type = "text/css">
	:only-child{
		border: thin black solid;
		padding: 4px;
	}
</style>


<!-- 使用 :only-of-type 选择器 -->
<style type = "text/css">
	:only-of-type {
		border: thin black solid;
		padding: 4px;
	}
</style>

<!--使用:nth-child选择器 -->
<!-- :nth-child(n) 选择父元素的第n个子元素 -->
<!-- :nth-last-child(n) 选择父元素的倒数第n个子元素 -->
<!-- :nth-of-child(n) 选择父元素定义类型的第n个子元素 -->
<!-- :nth-last-of-child(n) 选择父元素定义类型的倒数第n个子元素 -->
<style type = "text/css">
	body > :nth-child(2) {
		border: thin black solid;
		padding: 4px;
	}
</style>


<!-- 使用UI伪类选择器 -->
<!-- 选择启用或禁用元素 -->
<!-- :enabled  :disabled -->
<style type = "text/css">
	:enabled {
		border: thin black solid;
		padding: 4px;
	}
</style>


<!-- 选择已勾选的元素 -->
<style type = "text/css">
	:checked + span {
		border: thin black solid;
		padding: 4px;
	}
</style>


<!-- 选择默认元素 -->
<!-- 从一组类似的元素中选择默认元素,例如:提交按钮总是表单的默认按钮 -->
<style type = "text/css">
	:default {
		border: thin black solid;
		padding: 4px;
	}
</style>


<!-- 选择有效和无效的 input 元素 -->
<!-- :valid :invalid -->
<input required/>
<input required/>
<input type = "submit" value = "submit" />

<style type = "text/css">
	:invalid {
		outline: medium solid red;
	}
	:valid {
		outline: medium solid blue;
	}
</style>
<!-- 当(required)的input中未填值时为 invalid , 填值后为 valid -->


<!-- 选择限定范围的 input 元素 -->
<!-- :in-range :out-of-range -->
<input min = "0" max ="100"/>
<input type = "submit" value = "submit" />

<style type = "text/css">
	:in-range {
		outline: medium solid red;
	}
	:out-of-range {
		outline: medium solid blue;
	}
</style>


<!-- 选择必须和可选的input元素 -->
<!-- :required 选择含required属性的input元素 -->
<!-- :optional 选择不含required属性的input元素 -->
<input required/>
<input />
<input type = "submit" value = "submit" />

<style type = "text/css">
	:required {
		outline: medium solid red;
	}
	:optional {
		outline: medium solid green;
	}
</style>


<!-- 使用动态伪类选择器 -->

<!-- 使用 :link 和 :visited 选择器 -->
<!-- :link 选择超级链接 -->
<!-- :visited 选择已访问的超级链接 -->
<style type = "text/css">
	:link {
		border: thin black solid;
		padding: 4px;
	}
	:visited {
		color: grey;
	}
</style>


<!-- 使用 :hover 选择器 -->
<!-- :hover 选择鼠标悬停在其上的任意元素 -->
<style type = "text/css">
	:hover {
		border: thin black solid;
		padding: 4px;
	}
</style>


<!-- 使用 :active 选择器 -->
<!-- :active 选择当前被用户激活的元素,多数情况下是鼠标点击时 -->
<style type = "text/css">
	:active {
		border: thin black solid;
		padding: 4px;
	}
</style>


<!-- 使用 :focus 选择器 -->
<!-- :focus 选择当前获得焦点的元素 -->
<style type = "text/css">
	:focus {
		border: thin black solid;
		padding: 4px;
	}
</style>


<!-- 使用否定选择器 -->
<!-- :not() -->
<style type = "text/css">
	a:not([href*="apple"]) {
		border: thin black solid;
		padding: 4px;
	}
</style>
<!-- 选择 href 属性值中没有apple的a元素 -->


<!-- 使用 :empty 选择器 -->
<!-- :empty 选择没有属性值的元素 -->



<!-- 使用 :lang 选择器 -->
<!-- :lang(<目标语言>) -->
<style type = "text/css">
	:lang(en) {
		border: thin black solid;
		padding: 4px;
	}
</style>
<!-- 选择其内容采用英语表达的语言 -->


<!-- 使用 :target 选择器 -->
<style type = "text/css">
	:target {
		border: thin black solid;
		padding: 4px;
	}
</style>
<!-- 选择URL地址 #id 所匹配的元素 -->