前端学习 --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 / ...
随机推荐
- VMware两台虚拟机之间文件共享
虚拟机A的文件拷贝到虚拟机B scp[参数][原路径][目标路径] eg: scp -r root@192.168.0.172:/home/rookie/下载/ /home/rooookie/下载/ ...
- 使用python实现用微信远程控制电脑
首先,我们要先看看微信远程控制电脑的原理是什么呢? 我们可以利用Python的标准库控制本机电脑,然后要实现远程的话,我们可以把电子邮件作为远程控制的渠道,我们用Python自动登录邮箱检测邮件,当我 ...
- Python20-Day05
一.模块与包 1.模块 什么是模块? 在python中,模块可以分为四个通用类别: 1. 使用python编写的.py文件 2. 已经被编译为共享库或DLL的c或者c++扩展 3. 把一系列模块组织到 ...
- python处理xml实例
""" Author = zyh FileName = read_xml_1.py Time = 18-9-26 下午5:19 """ fr ...
- javascript中的call(),apply(),bind()方法的区别
之前一直迷惑,记不住call(),apply(),bind()的区别.不知道如何使用,一直处于懵懂的状态.直到有一天面试被问到了这三个方法的区别,所以觉得很有必要总结一下. 如果有不全面的地方,后续再 ...
- 第一次Sprint计划
目标: 各成员先学习基于eclipse开发android应用软件的基本技术(砍柴要先磨刀,工具都没怎么做) 先弄一个简单的四则运算答题功能看看程序是否能在手机上运行 (以上为冲刺一内容) 时间: 5月 ...
- Internet History, Technology and Security (Week 9)
Week 9 Security: Web Security We are now on the second to last week of the class and finishing up ou ...
- 蜗牛慢慢爬 LeetCode 19. Remove Nth Node From End of List [Difficulty: Medium]
题目 Given a linked list, remove the nth node from the end of list and return its head. For example, G ...
- 联想本win10 virtualbox 安装centos
(1)必须开发操作系统虚拟化功能,参考该百度经验 https://jingyan.baidu.com/article/8275fc864d423e46a03cf638.html (2)调整虚拟机硬盘和 ...
- VNC Server (Ubuntu 16.04.3 GNOME)
1. 安装VNC服务 sudo apt-get install vnc4server -y 2. 启动VNC服务 vncserver :1 3. 此时客户端连上后你会发现灰屏,原因出在~/.vnc/x ...