举报投诉联系我们 手机版 热门标签 鳄鱼CMS
您的位置:鳄鱼CMS > css3 选择器 CSS3 [attribute^=value] 选择器

css3 选择器 CSS3 [attribute^=value] 选择器

2023-03-12 08:31 CSS参考手册

css3 选择器 CSS3 [attribute^=value] 选择器

css3 选择器

CSS3 选择器是 CSS3 中新增的一种选择器,它可以帮助我们更加精确地定位 HTML 元素,从而让我们能够更好地定义样式。CSS3 选择器可以分为三大类:属性选择器、伪类选择器、伪元素选择器。

首先,CSS3 属性选择器是用来匹配 HTML 元素的特定属性的,它可以帮助我们快速找到想要的元素。例如,[title] 选择器可以用来匹配所有 title 属性不为空的元素;[title="hello"] 选择器可以用来匹配 title 属性为 hello 的元素。

[title] { 
    color: red; 
} 
[title="hello"] { 
    color: blue; 
} 

其次,CSS3 伪类选择器是用来匹配特定的 HTML 状态的,例如 :hover、:focus 等。这些伪类选择器可以帮助我们轻松地定义当用户与 HTML 元素交互时应该显示的样式。例如,当用户将鼠标悬浮在一个超链接上时,就可以使用 :hover 选择器来修改该超链接的样式。

a:hover { 
    color: red; 
} 

最后,CSS3 伪元素选择器是用来匹配特定部分内容的,例如 ::first-letter、::first-line 等。这些伪元素选择器可以帮助我们对文本内容进行样式上的修饰。例如 ::first-letter 选择器可以用来修饰文本中的首字母样式。

p::first-letter { 
    font-size: 200%;     
    font-weight: bold;   
    color: #ff0000;     
} 

CSS3 [attribute^=value] 选择器

CSS3 [attribute^=value] 选择器

CSS 选择器参考手册

实例

设置 class 属性值以 "test" 开头的所有 div 元素的背景色:

<!DOCTYPE html>
<html>
<head>
<style> 
div[class^="test"]
{
background:#ffff00;
}
</style>
</head>
<body>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="test">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>

</body>
</html>

浏览器支持

IE Firefox Chrome Safari Opera

所有主流浏览器都支持 [attribute^=value] 选择器。

注释:对于 IE8 及更早版本中的 [attribute^=value],必须声明 <!DOCTYPE>。

定义和用法

[attribute^=value] 选择器匹配属性值以指定值开头的每个元素。

亲自试一试 - 实例

设置 class 属性值以 "test" 开头的所有元素的背景色:

<html><!DOCTYPE html>
<html>
<head>
<style> 
[class^="test"]
{
background:#ffff00;
}
</style>
</head>
<body>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="test">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>

</body>
</html>

相关页面

CSS 教程:CSS 属性选择器

CSS 选择器参考手册

阅读全文
以上是鳄鱼CMS为你收集整理的css3 选择器 CSS3 [attribute^=value] 选择器全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 鳄鱼CMS eyucms.com 版权所有 联系我们