首页 > 代码库 > css 伪元素 :hover :active :before :after :visited :link :focus ...

css 伪元素 :hover :active :before :after :visited :link :focus ...

2024-09-27 16:06:02   220人阅读

CSS 伪元素

所有CSS伪类/元素

选择器示例示例说明
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接(点击后的效果)
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个<p> 元素的第一个字母
:first-line p:first-line 选择每个<p> 元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
:lang(language) p:lang(it) 为<p>元素的lang属性选择一个开始值

 

例子：

<style>
p.a:before
{
    content:"Read this -";
}
</style>
</head>

<body>
<p class="a">My name is Donald</p>
<p class="a">I live in Ducksburg</p>

<p class="a"><b>注意:</b>  :before 作用于 IE8,DOCTYPE 必须已经声明.</p>
<style>p.a::before { content: "Read this -" }</style>

My name is Donald

I live in Ducksburg

注意: :before 作用于 IE8,DOCTYPE 必须已经声明.

 例子：

 

<style>
.b:active
{
    background-color:yellow;
}
</style>
</head>
<body>

<a class="b" href="http://www.runoob.com/">runoob.com</a>
<a class="b" href="http://www.wikipedia.org">wikipedia.org</a>

<p><b>注意:</b>  :active选择器样式触发时链接到链接页面</p>
<style>.b:active { background-color: yellow }</style>

runoob.com wikipedia.org

注意: :active选择器样式触发时链接到链接页面

 

css 伪元素 :hover :active :before :after :visited :link :focus ...


联系
我们