属性选择器
a[href^='http:']{ /*a标签中href属性以http:开头的设置如下样式*/
background-color: red;
}
a[href$='ppt']{ /*a标签中href属性以ppt结尾的设置如下样式*/
background-color: #008000;
}
a[href*='xxx']{ /*a标签中href属性包含xxx的设置如下样式*/
background-color: #004E8A;
}
结构伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{
table-layout: fixed;
margin: 0px auto;
text-align: center;
empty-cells: show;
border-collapse: collapse;
border: 1px solid #aaaaaa;
color: #666;
font-size: 16px;
}
th,td{
border: 1px solid #AAAAAA;
}
/*选择文档的根元素*/
/*:root{
background: red;
}*/
/*选择在所有在其父类子元素的第n个位置且匹配E的子元素的样式*/
/*tr:nth-child(2){
background: gold;
}*/
/*选择在所有在其父类子元素的倒数第n个位置且匹配E的子元素的样式*/
/*tr:nth-last-child(4){
background: red;
}*/
/*选择在所有在其父类同类型元素的第n个位置且匹配E的子元素的样式 与之对应的还有E:nth-last-type()*/
/*tr:nth-of-type(3){
background: red;
}*/
/*选择在所有在其父类元素的最后一个位置且匹配E的子元素的样式*/
/*tr:last-child{
background: red;
}*/
/*选择在所有在其父类元素的第一个同类型且匹配E的子元素的样式, 与之对应的还有last-of-type*/
/*tr:first-of-type{
background: red;
}*/
/*选择其父类元素只包含一个子元素的样式,且该元素匹配E*/
/*td:only-child{
background: red;
}*/
/*选择其父类只包含一个同类型的子元素,并且该元素匹配E*/
/*td:only-of-type{
background: red;
}*/
/*匹配E的元素并且该元素不包含任何子元素*/
td:empty{
background: red;
}
</style>
</head>
<body>
<table>
<tr>
<th>选择器</th>
<th>例子</th>
<th>例子描述</th>
<th>CSS</th>
</tr>
<tr>
<td>.class</td>
<td> .intro</td>
<td>选择 class="intro" 的所有元素。</td>
<td>1</td>
</tr>
<tr>
<td>#id</td>
<td>#firstname</td>
<td>选择 id="firstname" 的所有元素</td>
<td>1</td>
</tr>
<tr>
<td>element</td>
<td>p</td>
<td>选择所有 <p> 元素。</td>
<td>1</td>
</tr>
<tr>
<td>:hover</td>
<td>a:hover</td>
<td>选择鼠标指针位于其上的链接。</td>
<td>1</td>
</tr>
<tr>
<td>...</td>
<td></td>
</tr>
</table>
</body>
</html>
UI伪类选择器
UI伪类选择器只有当元素处于某种状态时才起作用,在默认状态下不起作用.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*匹配E的所有可用UI元素其type属性需为text*/
/*input[type='text']:enabled{
background: red;
}*/
/*匹配E的所有可用UI元素*/
/*input{
background: green;
}*/
/*匹配E的所有不可用元素*/
/*input:disabled{
background: red;
}*/
/*匹配E的所有可用UI元素,目前浏览器不支持*/
/*input:checked{
background: yellow;
}*/
/*匹配E的所有可读可写的UI元素*/
/*input:read-write{
background: yellow;
}*/
/*匹配E的所有的只读UI元素*/
/*input:read-only{
background: yellow;
}*/
/*匹配被用户选中或者高亮的部分*/
/*::selection{
color: red;
}*/
/*用于标签的值在指定范围之外显示*/
/*input:out-of-range{
border: 2px solid red;
}*/
/*用于标签的值在指定范围之内显示*/
/*input:in-range{
border: 2px solid yellow;
}*/
/*用于匹配可选的输入元素*/
/*input:optional{
border: 2px solid yellow;
}*/
/*用于匹配必填的输入元素*/
/*input:required{
border: 2px solid red;
}*/
/*用于匹配输入合法的元素*/
input[type='email']:valid{
border: 2px solid yellow;
}
/*用于匹配输入非法的元素*/
input[type='email']:invalid{
border: 2px solid red;
}
</style>
</head>
<body>
<form action="#" method="get">
姓名:<input type="text" name="name" id="name" value="乔强"/><br/>
国家:<input type="text" name="hello" id="hello" value="中国" disabled="disabled" /><br/>
<input type="checkbox" name="sex" id="sex" value="man" checked="checked"/>男<br/>
<input type="checkbox" name="sex" id="sex" value="woman" />女<br/>
普通的input元素<br/>
<input type="text" name="hello" id="hello" value="Hello" /><br/>
只读的input元素<br/>
<input type="text" name="readonlyElement" id="readonlyElement" value="Hello" /><br/>
<div id="myDiv">
这是div元素中的一些文本<br/>
<input type="number" name="number" id="number" value="6" max="10" min="5" />
</div>
可选的input元素<br/>
<input type="text" name="enable" id="enable" value="" /><br/>
必填的input元素<br/>
<input type="text" name="requird" id="requird" value="" required="required"/><br/>
<input type="email" name="email" id="email" />
</form>
</body>
</html>