html设置type选择器,css :first-of-type选择器实例讲解
css :first-of-type介绍
css :first-of-type选择器用于匹配父元素的第一个特定子元素。
语法：
:first-of-type {
style properties
}
如：p:first-of-type用于匹配父元素里的第一个p元素。
css :first-of-type实例
设置其父级的第一个p元素的背景色
p:first-of-type
{
background:#ff0000;
}
This is a heading
The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
/* http://www.manongjc.com/article/1306.html */
再看一个实例：
p:first-of-type
{
background-color:yellow;
}
码农教程
java教程
php教程
css教程
mysql教程
html教程
sql教程
js教程
运行结果如下：
p:first-of-type需要注意两点：
第一，是在整个HTML文档中匹配
第二，p:first-of-type选取的是父元素里的第一个子元素p标签，并不要求父元素的第一个子元素必须是p标签。
上面实例中，body的第一个p标签子元素为"
码农教程
"，所以该元素会被选中。
同理“
mysql教程
”和"
sql教程
"作为div(class为div1和class为div2)元素的第一个p标签，所以也会被选中.
html设置type选择器,css :first-of-type选择器实例讲解相关推荐
- html类选择器和id选择器,CSS Id 和 Class选择器
CSS Id 和 Class选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. 一.id 选择器 id 选择 ...
- 使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字 实例 说明 :link a:link 选择所 ...
- style type=text/css中的type=text/css到底是什么意思
最佳答案 type="text/css"是指定MIME类型,其中: text是指对象为网页中的文本 css或是javascript是指当前指定的文本类型... 如果要在HTML文件 ...
- CSS中的id选择器和class选择器简单介绍
<!-- CSS中选择器 CSS有两种选择器id和class,总之如果说你想在HTML元素中设置CSS属性, 你要在元素中设置id和class选择器.那么我们现在来一个一个的介绍这两中选择器 i ...
- css样式表和选择器
CSS样式----图文详解:css样式表和选择器 主要内容 CSS概述 CSS和HTML结合的三种方式: 行内样式表 . 内嵌样式表 . 外部样式表 CSS四种基本选择器: 标签选择器 . 类选择器 ...
- CSS学习笔记之选择器（一）
目录 CSS选择器 标签选择器 id选择器 class选择器 后代选择器 群组选择器 * CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素. ...
- CSS的四种基本选择器和四种高级选择器
CSS选择器:就是指定CSS要作用的标签,那个标签的名称就是选择器.意为:选择哪个容器. CSS的选择器分为两大类:基本选择题和扩展选择器. 基本选择器: 标签选择器:针对一类标签 ID选择器:针对某 ...
- Html和css的class和id的命名,[HTML] CSS Id 和 Class选择器
id 和 class 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. id 选择器 id 选择器可以为标 ...
- html伪类选择器focus,了解CSS :focus-within伪类选择器
一.了解CSS :focus-within伪类选择器 CSS :focus-within伪类选择器和IE8就开始支持的:focus可以说是近亲,区别在于:focus表示当前元素处于focus状态时候干 ...
- 改变 input[type=range] css样式
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
最新文章
- 如何优雅的设计一个告警系统？远没有你想的那么简单！
- 洛谷P3953 逛公园
- Android中的PopupWindow详解
- Jive学习（四）--Jive缓存
- 小学生python-如何看待小学生开始学Python？
- 阿里进军欧洲市场遇阻：仅凭复制中国模式难获成功
- Linux Device和Driver注册过程，以及Probe的时机
- [IE编程] WebBrowser控件的多页面浏览(Tabbed Browsing)开发接口
- java 热布署 开源_一种简单快捷的 java 热部署方式
- 世界杯正在成为鸡肋！球迷越来越像傻瓜！
- python在线翻译小程序_Python 做一个翻译小程序
- python调用QT界面使用方法
- 51单片机流水灯现象2
- TAT-QA: A Question Answering Benchmark on a Hybrid of Tabular and Textual Content in Finance
- 无法查看别的计算机,雨林木风win7网上邻居看不到别的电脑的解决教程
- Java static关键字与静态块
- C# 读取和输出asc文件
- HTML5+CSS3小实例：黏性小球loading动画
- 土地利用/覆被变化(LUCC)定义理解
- idea中打开有冲突的文件，解决冲突