前端学习 --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 / ...
随机推荐
- MUI的踩坑笔记
最近在做公司项目的手机端实现,稍微记录下遇到的坑 1.在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady( ...
- [文章存档]如何检测 Azure Web 应用沙盒环境文件系统存储量
链接:https://docs.azure.cn/zh-cn/articles/azure-operations-guide/app-service-web/aog-app-service-web-h ...
- NO.4：自学python之路------内置方法、装饰器、迭代器
引言 是时候开始新的Python学习了,最近要考英语,可能不会周更,但是尽量吧. 正文 内置方法 Python提供给了使用者很多内置方法,可以便于编程使用.这里就来挑选其中大部分的内置方法进行解释其用 ...
- 不用U盘，用一台好电脑给另一个电脑重装windows10
先把坏电脑硬盘拆下来,然后挂到好电脑上 把这块盘用系统的磁盘管理工具改成GPT分区表格式,然后整盘分区(NTFS). 再对这个分区进行压缩卷操作,分出第二个区(FAT32格式 大小大于5G 我这里用了 ...
- mpstat命令详解
基础命令学习目录首页 原文链接:https://www.cnblogs.com/ggjucheng/archive/2013/01/13/2858775.html 简介 mpstat是Multipro ...
- 在Gulp中使用BrowserSync
博客已迁移至http://zlwis.me. 很早就听说过BrowserSync,也看过一些相关文章,可就是没用过.之前一直在用Gulp开发项目,每次编写完Sass后还要用按F5刷新页面看效果,想想也 ...
- maven实战读书笔记（一）
环境变量设置 MAVEN_HOME:G:\maven-3.2\apache-maven-3.2.5 Path: G:\maven-3.2\apache-maven-3.2.5\bin 其实正确的设置应 ...
- （第十一周）约跑APP测试报告
项目名称:约跑App 用户需求规格说明书URL:http://www.cnblogs.com/liquan/p/6071804.html 组长博客URL:http://www.cnblogs.com/ ...
- Sprint2
进展:主要进行了在安卓手机端进行APP开发的资料及有关学习的视频的查找等.了解也学习了这些资料还有技术.第一个任务完成了一半. 燃尽图:
- 手机访问本地php项目遇到的问题及解决
做html5的本地应用要调试后台,学了下php 按照和连j2ee的时候一样,电脑发射wifi,ipconfig..等等 发现tomcat的可以访问,apache的不能访问,搜索好久,没找到解答, j ...