CSS3学习系列之选择器(二)
2024-09-21 19:34:11
- 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>
最新文章
- Redis——学习之路四(初识主从配置)
- php 迭代器使用
- Linux分区方案 (转)
- [No000040]取得一个文本文件的编码方式
- 为Kindeditor控件添加图片自动上传功能
- js传递参数中包含+号时的处理方法
- 转:JAVA强制类型转换
- poj1179
- linux 解压命令大全
- SpringMVC 源码深度解析&;lt;context:component-scan&;gt;(扫描和注冊的注解Bean)
- 【python】开始python之旅
- javacoo/CowSwing 丑牛迷你采集器
- 第23章 访问者模式(Visitor Pattern)
- python引入模块时import与from ... import的区别
- js 获取n天前的时间
- Tomcat 静态部署 二步特别注意
- 实现 $.extend 的深复制和浅复制
- SQL2008清空删除日志:
- 18 Loader 总结
- SSM-MyBatis-14:Mybatis中智能标签
热门文章
- 初识JS
- ADO.NET 获取SQL SERVER数据库架构信息
- 输入一个数字n 如果n为偶数则除以2,若为奇数则加1或者减1,直到n为1,求最少次数 写出一个函数
- vscode同步设置&;扩展插件
- 记事本app TOP5(个人观点)
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(83)-Easyui Datagrid 行内编辑扩展
- 使用maven根据JSON文件自动生成Java POJO类(Java Bean)源文件
- Java学习笔记——设计模式之二.策略模式
- anjular中Service、Factory、Provider的使用与js中创建对象的总结
- Natas Wargame Level 3 Writeup 与 robots.txt