Web Front-endCSS TutorialWhat are the new attribute selectors in CSS3? Introduction to attribute selectors
What this article brings to you is what are the new attribute selectors in CSS3? An introduction to attribute selectors has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. We all know what the attributes of the
element are. For example, type and value in the following code are attributes of the input element. Attribute selector, as the name suggests, is a way to select elements through attributes.
<input type="text" value="lvye"/>
The three new attribute selectors added to CSS3 enable the selector to function as a wildcard, a bit like a regular expression.
When we download information from Baidu Wenku, we often see a small icon of the document type displayed in front of the hyperlink in the document list. This is a very good design detail for user experience. The implementation technology of this effect can be easily achieved by using the attribute selector in CSS3.
Example:
<!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>Analysis:
(1) In fact, the principle of implementing the effect of Baidu library list is very simple, you only need to use attributes The selector matches the last few characters (file suffix) of the href attribute value in the a element. Due to different file types, file extensions will also be different. Depending on the suffix name, you can add different icons to the hyperlinks of different file types. Of course, the actual code of Baidu library list is not like the above code, the idea is the same. Interested students can check out the source code of Baidu Library.
(2) The content attribute is used to insert content into elements. We will explain it in detail in the section "Adding content content attributes to elements" in the user interface of the CSS3 tutorial.
The above is what are the new attribute selectors for CSS3? A complete introduction to the introduction of attribute selectors. If you want to know more about CSS3 video tutorial, please pay attention to the PHP Chinese website.
The above is the detailed content of What are the new attribute selectors in CSS3? Introduction to attribute selectors. For more information, please follow other related articles on the PHP Chinese website!
优雅地使用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 PMCSS 中常用的选择器包括：类选择器、ID 选择器、元素选择器、后代选择器、子选择器、通配符选择器、群组选择器和属性选择器，用于指定特定元素或元素组，从而实现样式化和页面布局。
不同种类的CSS3选择器Feb 18, 2024 pm 11:02 PMCSS3选择器有多种类型，它们可以根据不同的元素属性、结构关系或状态来选择元素。下面将介绍几种常用的CSS3选择器类型，并提供具体的代码示例。基本选择器：元素选择器：使用元素名称作为选择器，此处以p元素为例：p{color:red;}类选择器：使用类名作为选择器，以.开头，此处以class为example的元素为例：.example{fo
jQuery查找name属性不为null的元素方法详解Feb 28, 2024 am 08:12 AMjQuery是一款非常流行的JavaScript库，被广泛用于网页开发中。在网页开发中，经常会遇到需要查找指定元素的需求，而有时我们需要查找具有特定属性的元素，比如查找name属性不为null的元素。本文将详细介绍如何使用jQuery来查找name属性不为null的元素，让大家对这个功能有一个全面的了解。首先，让我们来看一个简单的HTML例子，假设我们有如下
CSS样式无法正常显示的解决方式Feb 24, 2024 pm 01:18 PMCSS显示不出来怎么办，需要具体代码示例CSS（层叠样式表）是一种用于描述网页元素样式的标记语言，通过设定不同的样式规则，可以控制网页的布局、颜色、字体等外观效果。然而，有时候我们会遇到CSS显示不出来的问题，导致网页无法正常呈现所设定的样式。本文将介绍一些常见的CSS显示问题，并提供具体的代码示例来解决这些问题。引入CSS文件错误在头部（
css选择器有哪些属性选择器Oct 07, 2023 pm 02:50 PMcss选择器的属性选择器有等于选择器、包含选择器、开始选择器、结束选择器、子串选择器、多值选择器和否定选择器等。详细介绍：1、等于选择器，使用方括号和等号，表示选取具有指定属性值的元素；2、包含选择器，使用方括号和星号，表示选取包含指定字符串的属性值的元素；3、开始选择器，使用方括号和尖号，表示选取以指定字符串开头的属性值的元素；4、结束选择器，使用方括号和美元符号等等。
CSS 选择器属性指南：id，class 和属性选择器Oct 25, 2023 am 08:53 AMCSS选择器属性指南：id，class和属性选择器CSS（层叠样式表）是用来描述网页上的元素如何被渲染和布局的一种语言。在CSS中，选择器用来选择具体的HTML元素，然后应用样式规则。本文将重点介绍三种常见的选择器属性：id，class和属性选择器，并提供具体的代码示例。id选择器id选择器用于选择具有特定id属性的元素，id属性需要
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
SublimeText3 Mac version
God-level code editing software (SublimeText3)
SublimeText3 English version
Recommended: Win version, supports code prompts!
Zend Studio 13.0.1
Powerful PHP integrated development environment
