CSS选择器 Selectors(伪对象选择符)

最新推荐文章于 2024-06-19 15:19:49 发布

.NET跨平台

最新推荐文章于 2024-06-19 15:19:49 发布

阅读量823

点赞数

分类专栏： HTML5+CSS|CSS3

HTML5+CSS|CSS3 专栏收录该内容

153 篇文章 10 订阅

订阅专栏

伪对象选择符

选择符	版本	描述
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>

效果图：
在这里插入图片描述

.NET跨平台

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器 Selectors(伪对象选择符)

伪对象选择符选择符版本描述E:first-letter/E::first-letterCSS1/3设置对象内的第一个字符的样式。E:first-line/E::first-lineCSS1/3设置对象内的第一行的样式。E:before/E::beforeCSS2/3设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用...
复制链接

扫一扫