云题海 - 专业文章范例文档资料分享平台

当前位置:首页 > 参考手册-选择符

参考手册-选择符

  • 62 次阅读
  • 3 次下载
  • 2025/6/5 4:51:34

示例代码:

#demo:target{color:#f00;}

E:target伪类使用方法

假设上述代码在页面 a.html 中,那么当访问 a.html#demo 时,这个div元素将会被:target命中

区块1

区块1内容

区块1内容

区块1内容

区块2

区块2内容

区块2内容

区块2内容

区块3

区块3内容

区块3内容

区块3内容

区块4

区块4内容

区块4内容

区块4内容

区块5

区块5内容

区块5内容

区块5内容

3.21 @page :first

设置在打印时页面容器第一页使用的样式。仅用于@page规则。

? 该伪类选择符只允许定义margin, orphans, widows 和 page breaks相关属性 ? 相关查看:@page, :left, :right HTML示例代码:

页面容器中第一页的外边距为100px 200px
页面容器中第二页的外边距为默认值

3.22 @page :left

设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则。 ? 该伪类选择符只允许定义margin, padding, border 和 background属性 ? 相关查看:@page, :first, :right

3.23 @page :right

设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则。 ? 该伪类选择符只允许定义margin, padding, border 和 background属性 ? 相关查看:@page, :first, :left 四、伪对象选择符

4.1 E:first-letter/E::first-letter

设置对象内的第一个字符的样式。

? 此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先将其设置为块级对象。 ? 该伪类常被用来配合font-size属性和float属性制作首字下沉效果。

? IE6在使用该选择符时有个显式的BUG:选择符与包含规则的花括号之间不能紧挨着,需留有空格或换行。同时还存在该BUG的选择符包括:E:first-line

? CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的写法仍然有效。

? 即E:first-letter可转化为E::first-letter

HTML示例代码:

杂志常用的首字下沉效果

今天,阳光明媚,晴空万里,非常适合户外活动,如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。

4.2 E:first-line/E::first-line

设置对象内的第一行的样式。

? 此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先将其设置为块级对象。 ? IE6在使用该选择符时有个显式的BUG:选择符与包含规则的花括号之间不能紧挨着,需留有空格或换行。同时还存在该BUG的选择符包括:E:first-letter

? CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的写法仍然有效。

? 即E:first-line可转化为E::first-line HTML示例代码:

第一行文字的颜色与其它不同

今天,阳光明媚,晴空万里,非常适合户外活动,如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。

4.3 E:before/E::before

设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性

? CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的写法仍然有效。

? 即E:before可转化为E::before HTML示例代码:

Sorry, 你的浏览器不支持E:before和E::before

4.4 E:after/E::after

设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性

? CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的写法仍然有效。

? 即E:after可转化为E::after HTML示例代码:

Sorry, 你的浏览器不支持E:after和E::after

4.5 E::placeholder

设置对象文字占位符的样式。

? ::placeholder 伪元素用于控制表单输入框占位符的外观,它允许开发者/设计师改变文字占位符的样式,默认的文字占位符为浅灰色。

? 当表单背景色为类似的颜色时它可能效果并不是很明显,那么就可以使用这个伪元素来改变文字占位符的颜色。

? 需要注意的是,除了Firefox是 ::[prefix]placeholder,其他浏览器都是使用 ::[prefix]input-placeholder

? Firefox支持该伪元素使用text-overflow属性来处理溢出问题。 ::placeholder的使用示例:

input::-webkit-input-placeholder {color: #999;} input:-ms-input-placeholder { // IE10+

搜索更多关于: 参考手册-选择符 的文档
下载文档10.00 元 加入VIP免费下载
推荐下载
本文作者:...

共分享92篇相关文档

文档简介:

示例代码: #demo:target{color:#f00;}

× 游客快捷下载通道(下载后可以自由复制和排版)
单篇付费下载
限时特价:10 元/份 原价:20元
VIP包月下载
特价:29 元/月 原价:99元
低至 0.3 元/份 每月下载150
全站内容免费自由复制
VIP包月下载
特价:29 元/月 原价:99元
低至 0.3 元/份 每月下载150
全站内容免费自由复制
注:下载文档有可能“只有目录或者内容不全”等情况,请下载之前注意辨别,如果您已付费且无法下载或内容有问题,请联系我们协助你处理。
微信:fanwen365 QQ:370150219
Copyright © 云题海 All Rights Reserved. 苏ICP备16052595号-3 网站地图 客服QQ:370150219 邮箱:370150219@qq.com