first-child选择器和last-child选择器
first-child指定第一个元素。last-child指定最后一个子元素。
例如：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>first-child选择器与last-child选择器使用示例</title>
<style>
li:first-child{
background-color: yellow;
}
li:last-child{
background-color: skyblue;
}
</style></head><body><h2>列表A</h2><ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li></ul></body></html>
nth-child选择器和nth-last-child选择器
指定父元素中某个指定序号的子元素来指定样式。指定方法如下所示：
nth-child(n){
//指定样式}<子元素>:nth-last-child(n){//指定样式}
例如：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>nth-child选择器与nth-last-child选择器使用示例</title>
<style>
li:nth-child(2){
background-color: yellow;
}
li:nth-last-child(2){
background-color: skyblue;
}
</style></head><body><h2>列表A</h2><ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li></ul></body></html>
对所有第奇数个子元素或第偶数个子元素使用样式
使用方法如下：
nth-child(odd){//指定样式}//所有正数下来的第偶数个子元素
<子元素>:nth-child(even){//指定样式}//所有倒数上去的奇数个子元素
<子元素>:nth-last-child(odd){//指定样式}//所有倒数上去的第偶数个子元素
<子元素>:nth-last-child(even){//指定样式}
例如：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>nth-child选择器与nth-last-child选择器使用示例</title>
<style>
li:nth-child(odd){
background-color: yellow;
}
li:nth-child(even){
background-color: skyblue;
}
</style></head><body><h2>列表A</h2><ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li></ul></body></html>
选择器nth-of-type和nth-last-of-type
nth-child在使用过程中会有问题，问题产生的原因是，nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素的时候，是连同父元素中的所有子元素一起计算的。CSS3中使用nth-of-type选择器和nth-last-of-type选择器可以避免这类问题的发生，使用这两个选择器的时候，CSS3在计算子元素时第奇数个子元素还是偶数个子元素的时候，就只针对同类型的子元素进行计算，使用方法如下：
h2:nth-of-type(odd){
background-color:yellow;
}h2:nth-of-type(even){
background-color:skyblue;
}
循环使用样式
li:nth-child(4n+1){background-color:yellow}li:nth-child(4n+2){
background-color:limegreen;
}li:nth-child(4n+3){
background-color:red;
}li:nth-child(4n+4){
background-color:white;
}
这样样式会隔4循环样式。奇数个和偶数个也可以改写成下面方式：
//所有正数下来的第奇数个子元素
<子元素>:nth-child(2n+1){//指定样式}//所有正数下来的第偶数个子元素
<子元素>:nth-child(2n+2){//指定样式}//所有倒数上去的第奇数个子元素
<子元素>:nth-last-child(2n+1){//指定样式}//所有倒数上去的第偶数个子元素
<子元素>:nth-last-child(2n+2){//指定样式}
only-child选择器
only-child选择是指定当某个元素中只有一个子元素时才使用的样式。例如：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>nth-child选择器与nth-last-child选择器使用示例</title>
<style>
li:only-child{
background-color: yellow;
}
</style></head><body><h2>列表A</h2><ul>
<li>列表项目1</li></ul></body></html>
UI元素状态伪类选择器
UI元素状态伪类选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。在CSS3中，共有11种UI元素状态伪类选择器，分别是E:hover、E:active、E :focus、E:enabled、E:disabled、E:read-only、E:read-write、E:checked、E:default、E:indeterminate及E::selection。
选择器：E:hover、E:active和E:focus
E:hover选择器用来指定当鼠标指针移动到元素上面时元素所使用的样式。
E:active选择器用来指定元素被激活（鼠标在元素上按下还没有松开）时使用的样式。
E:focus选择器用来指定元素获得光标焦点时使用的样式，主要在文本框控件获得焦点并进行文字输入的时候使用。例子如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>E:hover选择器、E:active选择器与E:focus选择器使用示例</title>
<style>
input[type="text"]:hover {
background-color: greenyellow;
}
input[type="text"]:focus {
background-color: skyblue;
}
input[type="text"]:active{
background-color: yellow;
}
</style></head><body><form>
<p>姓名：<input type="text" name="name"></p>
<p>地址：<input type="text" name="address"></p></form></body></html>
http://www.cnblogs.com/hetaojs/p/6973211.html
延伸阅读
- 学习、实践。再学习，再实践 2023-04-15 16:46:17.453
- 从0到0.5，坚持学习 2022-09-08 15:52:26.217
- 来万码学习，是我最正确的选择 2022-09-07 11:34:40.69
- 学习与实践 2022-06-24 14:03:16.913
- 学习——工作——再学习 2021-06-01 15:31:45.667
- 不断学习，才能不断进步 2021-05-19 11:14:42.067
- 谢谢当初的选择 2020-06-11 16:44:20.733
- 选择要趁早 2020-06-11 15:49:52.17
- 此生难忘的一次学习 2020-06-11 15:30:55.913
- 我的学习之路 2019-11-24 10:38:29.473
学习、实践。再学习，再实践