CSS3新增的属性选择器有哪些？属性选择器简介-css教程-PHP中文网

首页

web前端

css教程

CSS3新增的属性选择器有哪些？属性选择器简介

云罗郡主

Oct 23, 2018 pm 02:27 PM

属性选择器

本篇文章给大家带来的内容是关于CSS3新增的属性选择器有哪些？属性选择器简介，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

元素的属性，我们都知道是什么。例如下面代码中type和value就是input元素的属性。属性选择器，顾名思义，就是通过属性来选择元素的一种方式。

<input type="text" value="lvye"/>

CSS3新增的属性选择器有哪些？属性选择器简介

CSS3新增的这3个属性选择器使得选择器具有通配符的功能，有点正则表达式的感觉。

我们在百度文库下载资料的时候，经常会看到文档列表的超链接前面都会显示一个文档类型的小图标。这是用户体验非常好的设计细节。这个效果的实现技术，只需要使用CSS3中的属性选择器就可以轻松实现了。

CSS3新增的属性选择器有哪些？属性选择器简介

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>CSS3 属性选择器</title>
    <style type="text/css">
        /*清除所有元素默认的padding和margin*/
        *{padding:0;margin:0;}
        /*清除列表项符号*/
        ul{list-style-type:none;}
        a
        {
            display:inline-block;
            font-size:12px;
            height:20px;
            line-height:20px;
        }
        /*匹配jpg文件*/
        a[href$="jpg"]:before
        {
            content:url("../App_images/lesson/run_css3/1.png");
        }
        /*匹配PDF文件*/
        a[href$="pdf"]:before
        {
            content:url("../App_images/lesson/run_css3/2.png");
        }
        /*匹配PDF文件*/
        a[href$="ppt"]:before
        {
            content:url("../App_images/lesson/run_css3/3.png");
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="css3.jpg">这是jpg图片</a></li>
        <li><a href="css3.pdf">这是pdf文件</a></li>
        <li><a href="css3.ppt">这是ppt文档</a></li>
    </ul>
</body>
</html>

分析：

（1）其实百度文库列表的效果实现原理很简单，只需要使用属性选择器匹配a元素中href属性值的最后几个字符（文件后缀名）。由于文件类型的不同，文件后缀名也会不同。根据后缀名不同，分别为不同文件类型的超链接添加不同图标即可。当然实际上百度文库列表实际代码不像上述代码，思想是一样的。有兴趣的同学可以查看一下百度文库的源代码。

（2）content属性用于为元素插入内容，在CSS3教程中用户界面中的“为元素添加内容content属性”这一节我们会详细讲解到。

以上就是对CSS3新增的属性选择器有哪些？属性选择器简介的全部介绍，如果您想了解更多有关CSS3视频教程，请关注PHP中文网。

以上是CSS3新增的属性选择器有哪些？属性选择器简介的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：lvyestudy。如有侵权，请联系admin@php.cn删除

优雅地使用jQuery查找name属性不为undefined的元素Feb 27, 2024 pm 01:42 PM

标题：优雅地使用jQuery查找name属性不为undefined的元素在开发网页时，我们经常需要使用jQuery来操作DOM元素，其中经常需要根据特定条件来查找元素。有时候我们需要查找具有特定属性的元素，比如查找name属性不为undefined的元素。本文将介绍如何优雅地使用jQuery实现这一功能，并附上具体的代码示例。首先，让我们来看一下如何使用jQ

利用 jQuery 快速更新表格行属性值的实用技巧Feb 25, 2024 pm 02:51 PM

标题：实用提示：利用jQuery快速修改表格行的属性值在网页开发中，常常会遇到需要通过JavaScript来动态修改表格行的属性值的情况。而利用jQuery，可以在编写简洁、高效的代码的同时，快速实现这一功能。下面将分享一些实用的提示，以便在实际项目中更加方便地操作和修改表格行的属性值。1.获取表格行的属性值在使用jQuery修改表格行的属性

css常用选择器有哪些Apr 25, 2024 pm 01:24 PM

CSS 中常用的选择器包括：类选择器、ID 选择器、元素选择器、后代选择器、子选择器、通配符选择器、群组选择器和属性选择器，用于指定特定元素或元素组，从而实现样式化和页面布局。

不同种类的CSS3选择器Feb 18, 2024 pm 11:02 PM

CSS3选择器有多种类型，它们可以根据不同的元素属性、结构关系或状态来选择元素。下面将介绍几种常用的CSS3选择器类型，并提供具体的代码示例。基本选择器：元素选择器：使用元素名称作为选择器，此处以p元素为例：p{color:red;}类选择器：使用类名作为选择器，以.开头，此处以class为example的元素为例：.example{fo

jQuery查找name属性不为null的元素方法详解Feb 28, 2024 am 08:12 AM

jQuery是一款非常流行的JavaScript库，被广泛用于网页开发中。在网页开发中，经常会遇到需要查找指定元素的需求，而有时我们需要查找具有特定属性的元素，比如查找name属性不为null的元素。本文将详细介绍如何使用jQuery来查找name属性不为null的元素，让大家对这个功能有一个全面的了解。首先，让我们来看一个简单的HTML例子，假设我们有如下

CSS样式无法正常显示的解决方式Feb 24, 2024 pm 01:18 PM

CSS显示不出来怎么办，需要具体代码示例CSS（层叠样式表）是一种用于描述网页元素样式的标记语言，通过设定不同的样式规则，可以控制网页的布局、颜色、字体等外观效果。然而，有时候我们会遇到CSS显示不出来的问题，导致网页无法正常呈现所设定的样式。本文将介绍一些常见的CSS显示问题，并提供具体的代码示例来解决这些问题。引入CSS文件错误在头部（

css选择器有哪些属性选择器Oct 07, 2023 pm 02:50 PM

css选择器的属性选择器有等于选择器、包含选择器、开始选择器、结束选择器、子串选择器、多值选择器和否定选择器等。详细介绍：1、等于选择器，使用方括号和等号，表示选取具有指定属性值的元素；2、包含选择器，使用方括号和星号，表示选取包含指定字符串的属性值的元素；3、开始选择器，使用方括号和尖号，表示选取以指定字符串开头的属性值的元素；4、结束选择器，使用方括号和美元符号等等。

CSS 选择器属性指南：id，class 和属性选择器Oct 25, 2023 am 08:53 AM

CSS选择器属性指南：id，class和属性选择器CSS（层叠样式表）是用来描述网页上的元素如何被渲染和布局的一种语言。在CSS中，选择器用来选择具体的HTML元素，然后应用样式规则。本文将重点介绍三种常见的选择器属性：id，class和属性选择器，并提供具体的代码示例。id选择器id选择器用于选择具有特定id属性的元素，id属性需要

See all articles