前端学习 --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 / ...
随机推荐
- Influxdb配置文件详解---influxdb.conf
官方介绍:https://docs.influxdata.com/influxdb/v1.2/administration/config/ 全局配置 1 2 reporting-disabled = ...
- WinDbg使用学习
拿到软件崩溃之后产生的crash文件,后缀名为dump 使用winDbg的File-----> Open Crash Dump 打开Crash文件 File---------> Symbo ...
- Python基础_内置函数
Built-in Functions abs() delattr() hash() memoryview() set() all() dict() help() min() setat ...
- Vue 入门之概念
Vue 简介 Vue 是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 [view].新的 Vue 版本参考了 React 的部分设计,当然也有自己独特的地方,比如 Vue 的单文件组 ...
- Oracle中的SQL分页查询原理和方法详解
Oracle中的SQL分页查询原理和方法详解 分析得不错! http://blog.csdn.net/anxpp/article/details/51534006
- 课堂实践ASL博客
实践博客 二分法查找元素 1.首先定义三个位置min,mid,max 2.每次从所有元素所处位置的中间开始查找(所有元素必须以由小及大顺序排列完毕) 3.当中间元素大于所查找元素时,从中间元素(mid ...
- spring冲刺第十天
调试运行,对整体的游戏方面进行改进.冲刺完了,但依然有很多问题,比如无法暂停,游戏结束后只能退出重来等
- System 类的使用
/*System 系统类 主要用于获取系统的属性数据.System类常用的方法: arraycopy(Object src, int srcPos, Object dest, int destPos, ...
- 软件工程实践2018第六次作业——现场UML作图
团队信息 学号 姓名 博客链接 124 王彬(组长) 点击这里 206 赵畅 点击这里 215 胡展瑞 点击这里 320 李恒达 点击这里 131 佘岳昕 点击这里 431 王源 点击这里 206 陈 ...
- 第三周作业（三）WordCount
这个程序主要就是统计一下文件中的字符数,单词数以及行数. 我的程序很简单,代码很简短,只实现了书中的基本功能. #include <stdio.h> #include <string ...