CSS :first-child 伪类

CSS :first-child 伪类

 向元素的第一个子元素添加样式,示例如下:

例 1 - 匹配第一个 <p> 元素(第一个段落显示为红色)

<style type="text/css">
p:first-child
{
color:red
};
</style>

<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p> 

例 2 - 匹配所有 <p> 元素中的第一个 <em> 元素(2个段落中的第一个strong都显示为红色)

<style type="text/css">
p > em:first-child
{
color:red
}
</style>

<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>

例 3 - 匹配所有第一个子元素 <p> 元素中的所有 <em> 元素(第一个段落中的所有strong显示为红色)

<style type="text/css">
p:first-child em
{
color:red
}
</style>

<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
时间: 2024-10-22 12:28:51

CSS :first-child 伪类的相关文章

css中的伪类

1.伪类的语法 selector:pseudo-class {property:value;} 对应的中文:选择器:伪类{属性:值:} 2.anchor伪类 1 <style type="text/css"> 2 /*anchor伪类的顺序是固定的,不变的*/ 3 /*未访问时的样式*/ 4 a:link{color: black;} 5 /*访问过后的样式*/ 6 a:visited{color: pink;} 7 /*鼠标划过时的样式*/ 8 a:hover{color

CSS中的伪类和伪元素

伪类 伪类与类相似,但又没有类附加标签上.伪类分为UI伪类和结构化伪类. UI伪类 :link(将样式添加到未被访问的链接上) :visted(将样式已添加到访问的链接上) :hover(将样式添加到鼠标悬浮的元素上) :active(将样式添加到被激活的元素上) :focus(将样式添加到被选中的元素上) 结构化伪类 :first-child(将样式添加到第一个子元素上) :last-child(将样式添加到最后一个子元素上) 伪元素 伪元素是在文档中若有实无的元素. 主要有以下几种 :fir

css选择器2——伪类选择器

一.伪元素选择器 1. E:first-letter/E::first-letter(css3时代两个冒号) 设置元素内的第一个字符的样式. 例如: p::first-letter{font-size:50px;} 2. E:first-line/E::first-line 设置元素内的第一行的样式. 例如: p::first-line{color:green;} 3. E:before/E::before在每个E元素的内容之前插入内容.用来和content属性一起使用. 例如: a::befo

CSS权威指南之css声明,伪类,文本处理--(简要笔记一)

1.css层叠的含义 后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒. 3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换. 大多数都是非替换元素.span中的内容由用户代理. 4.元素间的父子与祖先 如果一个元素在另外一个元素的直接上一层,他们就有父子关系 如果是从一个元素到另外一个元素的路径要经过两层或多层,那这个就是祖先与后代的关系 5.animate的动画叠加解决办法 使用的时候在animate前面放上stop 6

iOS Web开发激活css的active伪类

最近在做一个资讯客户端,用到UIWebview展示一些网页内容,本来想做一个简单的按压效果,发现在css中设置active属性一直不管用. 查阅了一下资料,今天发现,要让css active伪类生效,只需要给这个元素的touchstart/touchend绑定一个空的匿名方法即可成功. 下面简单以一个文本作为例子: <!DOCTYPE html> <html> <head> <style> p { color: yellow; } p:active { co

CSS选择器:伪类(图文详解)

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式.这就叫做"伪类".伪类用冒号来表示. 比如div是属于box类,这一点很明确,就是属于box类.但是a属于什么类?不明确.因为需要看用户点击前是什么状态,点击后是什么状态.所以,就叫做"伪类". 静态伪类和动态伪类 伪类选择器分为两种. (1)静态伪类:只能用于超链接的

强大的CSS:focus-visible伪类真的太6了!

一.快速了解CSS :focus-visible伪类 :focus-visible伪类是非常年轻的一个伪类,目前仅Chrome浏览器标准支持,但足够了.如果你是一个深入用户体验的开发者,这个伪类会非常有用. :focus-visible伪类应用的场景是:元素聚焦,同时聚焦轮廓浏览器认为应该显示. 是不是很拗口?规范就是这么定义的.:focus-visible的规范并没有强行约束匹配逻辑,而是交给了UA(也就是浏览器).我们通过真实的案例来解释下这个伪类是做什么用的. 在所有现代浏览器下,链接元素

css(二)css选择器,伪类

前戏 前面我们说过CSS规则由选择器和声明组成,我们要给标签设置属性,那我们就要找到对应的标签,CSS选择器可以帮我们找到我们需要的标签 css选择器有: 标签选择器 类选择器 ID选择器 全局选择器 群组选择器 后代选择器 标签选择器 标签选择器前面我们用过,它是以HTML标签作为选择器 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type&qu

CSS:placeholder-shown伪类实现Material Design占位符交互效果

一.Material Design规范中占位符交互效果 Material Design风格占位符交互效果官方示意见此demo页面. 效果可以参见下面的GIF录屏示意: 现在这种设计在移动端很常见,因为宽度是稀缺的.相信不少人设计项目中有实现过这种交互,而且,我敢保证是利用JS实现的. 实际上,我们可以借助CSS :placeholder-shown伪类,纯CSS,无任何JS,实现这样的占位符交互效果. :placeholder-shown表示,当输入框的placeholder内容显示的时候,输入

CSS:focus-visible伪类真的太6了!

一.快速了解CSS :focus-visible伪类 :focus-visible伪类是非常年轻的一个伪类,目前仅Chrome浏览器标准支持,但足够了.如果你是一个深入用户体验的开发者,这个伪类会非常有用. :focus-visible伪类应用的场景是:元素聚焦,同时聚焦轮廓浏览器认为应该显示. 是不是很拗口?规范就是这么定义的.:focus-visible的规范并没有强行约束匹配逻辑,而是交给了UA(也就是浏览器).我们通过真实的案例来解释下这个伪类是做什么用的. 在所有现代浏览器下,链接元素