伪对象选择符
选择符 | 版本 | 描述 |
---|---|---|
E:first-letter/E::first-letter | CSS1/3 | 设置对象内的第一个字符的样式。 |
E:first-line/E::first-line | CSS1/3 | 设置对象内的第一行的样式。 |
E:before/E::before | CSS2/3 | 设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content 属性一起使用 |
E:after/E::after | CSS2/3 | 设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content 属性一起使用 |
E::placeholder | CSS3 | 设置对象文字占位符的样式。 |
E::selection | CSS3 | 设置对象被选择时的颜色。 |
:first-letter
选择器
定义和用法
:first-letter选择器用来指定元素第一个字母的样式。
提示: :first-letter
选择器可以使用以下属性:
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if float is 'none')
text-transform
line-height
float
clear
注意: “first-letter
” 选择器仅适用于在块级元素中.
选择每个 <p>
元素的第一个字母来设置样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p:first-letter{
font-size:200%;
color:#8A2BE2;
}
</style>
</head>
<body>
<div>
<h1>Hello World!</h1>
<p>PHP</p>
<p>HTML</p>
<p>CSS</p>
</div>
</body>
</html>
效果图:
:first-line
选择器
定义和用法
:first-line
选择器用来指定选择器第一行的样式。
注意: :first-line
选择器可以使用以下属性:
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
注意: “first-line
” 选择器适用于块级元素中。
每个<p>
元素的第一行选择的样式:
效果图:
:before
选择器
定义和用法
:before
选择器向选定的元素前插入内容。
使用content
属性来指定要插入的内容。
注意: :before
在IE8
中运行,必须声明<!DOCTYPE>
每个 <p>
元素之前插入内容、并设置所插入内容的样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p:before{
content:"标题";
background-color:yellow;
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<div>
<p>1、测试文本!</p>
<p>2、测试文本!</p>
</div>
</body>
</html>
效果图:
:after
选择器
定义和用法
:after
选择器向选定的元素之后插入内容。
使用content
属性来指定要插入的内容。
注意:
:after
在IE8
中运行,必须声明<!DOCTYPE>
在每个 <p>
元素后面插入内容,并设置所插入内容的样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p:after{
content:"- 台词";
background-color:yellow;
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<div>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</div>
</body>
</html>
效果图:
::placeholder
选择器
语法:
E::placeholder { sRules }
说明:
设置对象文字占位符的样式。
::placeholder
伪元素用于控制表单输入框占位符的外观,它允许开发者/设计师改变文字占位符的样式,默认的文字占位符为浅灰色。- 当表单背景色为类似的颜色时它可能效果并不是很明显,那么就可以使用这个伪元素来改变文字占位符的颜色。
- 需要注意的是,除了Firefox是
::[prefix]placeholder
,其他浏览器都是使用::[prefix]input-placeholder
Firefox
支持该伪元素使用text-overflow
属性来处理溢出问题。
::placeholder
的使用示例:
<input type="text" placeholder="占位符"/>input::-webkit-input-placeholder {
color: #999;
}
input:-ms-input-placeholder { // IE10+
color: #999;
}
input:-moz-placeholder { // Firefox4-18
color: #999;
}
input::-moz-placeholder { // Firefox19+
color: #999;
}
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<style>
input::-webkit-input-placeholder {
color: green;
}
input:-ms-input-placeholder { // IE10+
color: green;
}
input:-moz-placeholder { // Firefox4-18
color: green;
}
input::-moz-placeholder { // Firefox19+
color: green;
}
</style>
</head>
<body>
<input id="test" placeholder="Placeholder text!">
</body>
</html>
::selection
选择器
定义和用法:
::selection
选择器匹配元素中被用户选中或处于高亮状态的部分。
::selection
只可以::selection
选择器应用于少数的CSS
属性:color, background, cursor
,和outline
注意:
E9+, Opera, Google Chrome
和Safari
支持::selection
选择器
Firefox 通过其私有属性::-moz-selection
支持
CSS
语法:
::selection
{
CSS声明;
}
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
::selection
{
color:pink;
}
::-moz-selection
{
color:pink;
}
</style>
</head>
<body>
<p>将选定的文本变为粉色</p>
</body>
</html>
效果图: