前端学习 --Css -- 子元素的伪类
- :first-child 寻找父元素的第一个子元素，在所有的子元素中排序；
- :last-child 寻找父元素的最后一个子元素，在所有的子元素中排序；
- :nth-child 寻找父元素中的指定位置子元素，在所有的子元素中排序；
- :first-of-type 寻找指定类型中的第一个子元素
- :last-of-type 寻找指定类型中的最后一个子元素
- :nth-of-type 寻找指定类型中的指定子元素
可以使用even，来找到偶数的子元素
可以使用odd，来找到奇数的子元素
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*:first-child 寻找父元素的第一个子元素，在所有的子元素中排序；*/
P:first-child{
color: #ADFF2F;
}
/*:last-child 寻找父元素的最后一个子元素，在所有的子元素中排序；*/
P:last-child{
color: #008000;
}
/*:nth-child 寻找父元素中的指定位置子元素，在所有的子元素中排序；*/
P:nth-child(3){
color: #FFFFFF;
background-color: #000000;
}
/*:first-of-type 寻找指定类型中的第一个子元素*/
h3:first-of-type{
color: red;
}
/*:last-of-type 寻找指定类型中的最后一个子元素*/
h3:last-of-type{
color: green;
}
/*:nth-of-type 寻找指定类型中的指定子元素*/
h3:nth-last-of-type(2){
color: yellow;
} /*可以使用even，来找到偶数的子元素
可以使用odd，来找到奇数的子元素*/
h4:nth-last-of-type(even){
color: red;
} h4:nth-last-of-type(odd){
color: green;
} </style>
</head>
<body>
<p>有时关切是问，有时关切是不问。</p>
<h3>----我是分割线1----</h3>
<p>这样水波不兴，你好我也好。</p>
<h3>----我是分割线2----</h3>
<p>山还是山，水还是水，生活和工作终会照旧。</p>
<h3>----我是分割线3----</h3>
<p>希望观念的改变能留得长久些：敬天悯人，相信人心</p>
<h3>----我是分割线4----</h3>
<br/>
<br/>
<br/> <h4>水 </h4>
<h4>你眼睛的面积一定小于湖 </h4>
<h4>你也很少哭 </h4>
<h4>为什么坐在你面前 </h4>
<h4>就像站在湖边</h4>
<h4>细细的雾水就扯地连天 </h4>
</body>
</html>
效果图：
前端学习 --Css -- 子元素的伪类的更多相关文章
- HTML&CSS基础-子元素的伪类选择器
HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...
- 学习css常用基本层级伪类属性选择器
常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...
- 前端学习 -- Css -- 兄弟元素选择器
为一个元素后边的元素设置css样式: 语法:前一个 + 后一个. 作用:可以选中一个元素后紧挨着的指定的兄弟元素. 为一个元素后边的所有相同元素设置css样式: 语法:前一个 ~ 后边所有. < ...
- css 选择器 & UI元素的伪类选择器 & 伪元素选择器
UI元素的伪类选择器 1. :focus 用来选取获取焦点事件 2. :enabled 用来指定当元素处于可用状态时的样式 3. :disable 用来指定元素处于不可用时的状态 表单里应用 ...
- CSS伪元素与伪类的区别
伪类和伪元素介绍 伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能 ...
- css3 伪元素和伪类选择器详解
转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2. ...
- 前端学习——css基础知识，选择器与html模板、值得收藏的html标签
一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...
- CSS 子元素选择器与后代选择器区别实例讲解
css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...
- 动态修改 dom 元素的伪类样式
最近写代码,需要修改伪类的 content 属性,不想定义两个样式进行切换,而是直接通过 js 进行修改. html 中的伪类(如 a:hover / a:link / class::before / ...
随机推荐
- Ubuntu下配置Anaconda
转自:https://blog.csdn.net/Horcham/article/details/57075388 安装Anaconda Ubuntu下似乎库中不自带Anaconda,是自带纯净的py ...
- 【坚持】Selenium+Python学习之从读懂代码开始 DAY7
2018/05/25 EC [EC](https://github.com/easonhan007/webdriver_guide/blob/master/34/expected_conditions ...
- CHAPTER 40 Science in Our Digital Age 第40章 我们数字时代的科学
CHAPTER 40 Science in Our Digital Age 第40章 我们数字时代的科学 The next time you switch on your computer, you ...
- Ubuntu系统无法识别Logitech M590蓝牙鼠标的问题
参见 - https://blog.csdn.net/yh2869/article/details/73119018 亲测可用. 系统:ubuntu 16.04 64bit 现象:鼠标配对可以成功,但 ...
- dumpe2fs命令详解
基础命令学习目录首页 dumpe2fs 显示ext2.ext3.ext4文件系统的超级快和块组信息.此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE ...
- Linux系统下安装jdk1.8
JDK安装分为两种方式 一种是解压tar.gz配置安装, 一种是rpm安装,我这里是tar.gz安装方式 一.首先在oracle官方网下载jdk,网址如下:http://www.oracle.com ...
- 第14讲：嵌入式SQL语言(基本技巧)
一.交互式SQL的局限 & 嵌入式SQL的必要性 专业人员(如DBA)可以熟练地运用交互式SQL语言,但普通用户却不是那么容易上手,所以需要通过数据库应用程序来使用数据库.编写一个可以与数据库 ...
- 20162314 Experiment 2 - Tree
Experiment report of Besti course:<Program Design & Data Structures> Class: 1623 Student N ...
- CMD命令操作符
cmd command的缩写,是windows环境下的虚拟DOS窗口,提供有DOS命令,功能强大 mstsc 远程 inetmgr ...
- scrapy-继承默认的user-agent 中间件
class MyUserAgentMiddleware(UserAgentMiddleware): def __init__(self, user_agent): self.user_agent = ...