<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>selector-attr.html</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 属性选择器可以根据元素的属性及属性值来选择元素。 也可作用于class属性。
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
input[type="text"] {
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"] {
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
-->
<style type="text/css">
[title] {
color:red;
}
a[href*="w3school.com.cn"] {
color: red;
}
[lang|=en] {
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<a href="http://w3school.com.cn">W3School</a>
<h1>无法应用样式：</h1>
<a name="w3school">W3School</a>
<hr />
<h1>可以应用样式：</h1>
<a href="http://www.w3school.com.cn/">W3School</a>
<a href="http://www.w3school.com.cn/css/">CSS</a>
<a href="http://www.w3school.com.cn/html/">HTML</a>
<h1>无法应用样式：</h1>
<a href="http://www.w3c.org/">W3C</a>
<a href="http://www.microsoft.com">Microsoft</a>
<a href="http://www.apple.com.cn">Apple</a>
<hr />
<h1>可以应用样式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<h1>无法应用样式：</h1>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>
</body>
</html>
分享到：
相关推荐
user=> ( require '[blx.enlive-selector-from-css :as ecss]) nil user=> ( ecss/translate-css " div.big > ul:last-of-type input.xyz[type=text] " ) [ :div.big :> [ :ul html/last-of-type] [ :input.xyz ( ...
links = response.css('a[href]::attr(href)').getall() ``` 这将返回一个包含所有`<a>`标签`href`属性值的列表。 在实际的爬虫项目中，我们通常会结合使用多种选择器和方法，以及条件判断等逻辑，来实现更复杂的...
HtmlAgilityPack.CssSelectors.NetCore· ...安装 ... QuerySelectorAll ( " div .my-class[data-attr=123] > ul li " ); HtmlNode node = nodes [ 0 ]. QuerySelector ( " p.with-this-class span[da
在`css-selector--master`这个项目中，你可能找到了关于这些选择器的实例和练习，通过实践，你可以更好地理解它们的用法并提高CSS技能。尝试修改代码，观察不同选择器如何影响页面布局，这对于成为一名熟练的前端...
5. **属性操作**：可以使用`attr()`和`removeAttr()`来获取或设置元素的属性值，如`Selector('#element').attr('href')`和`Selector('#element').removeAttr('disabled')`。 6. **CSS操作**：Selector也支持修改...
- `:not(selector)`: 选择不符合指定 `selector` 的元素。 - `:nth-child(n)`: 选择父元素的第 `n` 个子元素。 - `:nth-of-type(n)`: 选择父元素的第 `n` 个特定类型的子元素。 - `:first-child`: 选择父元素的...
selector { property: value; } ``` 例如，设置所有段落的字体大小为14px： ```css p { font-size: 14px; } ``` **2. CSS选择器** - **元素选择器**：如`p`，选择所有段落元素。 - **类选择器**：以点号`.`开头，...
This function accepts a string containing a CSS selector which is then used to match a set of elements. The core functionality of jQuery centers around this function. Everything in jQuery is based ...
- `:not(selector)`: 选择不符合指定选择器的元素。 - `:target`: 选择当前活动的URL锚点。 - `::before` 和 `::after`: 在元素内容之前或之后插入内容。 2. **结构性伪类** - `:empty`: 选择没有子元素（包括...
- 对于某些属性（如`style`），`attr`可能无法完全反映出元素的样式状态，因为CSS的计算值不会被`attr`方法获取。这时应使用`.css()`方法。 - 当设置属性值时，如果属性不存在，`attr`会创建该属性。如果属性已存在...
$('#skin-link').attr('href', skin + '.css'); }); }); ``` 4. **响应式设计**： 考虑到不同设备和屏幕尺寸，确保皮肤在各种分辨率下都能良好显示。可以使用媒体查询（Media Queries）来为不同设备定制样式。 ...
- `:not(selector)`：选择不符合指定选择器的元素。 - `:target`：选择当前活动的锚点链接。 - `:checked`：选择已勾选的复选框或单选按钮。 - `:enabled` 和 `:disabled`：选择启用或禁用的表单元素。 - `:nth...
4. 属性选择器：基于元素的属性和值，如`[attr=value]`。 5. 伪类和伪元素：表示元素的特定状态或位置，如`:hover`、`:active`、`:first-child`。 **三、CSS语法** CSS语法规则通常遵循以下格式： ```css selector ...
- **群组选择器（selector1, selector2, ..., selectorN）**：如`.first, .last`将`.first`和`.last`元素一起设置样式。 **三、属性选择器** - **E[attr]**：如`.demo a[id]`选择具有`id`属性的`a`元素。 - **E...
- CSS规则由两个主要部分构成：选择器（Selector）和声明块（Declaration Block）。 - 声明块包含一个或多个声明，每个声明由属性（Property）和值（Value）组成，以冒号分隔，每条声明以分号结束。 2. **选择器*...
$('link[rel="stylesheet"]').attr('href', 'css/' + selectedSkin + '.css'); // 更新CSS链接 }); }); ``` 在提供的`demo1.html`和`demo2.html`示例文件中，可能展示了如何在实际网页中集成并使用这个插件。这些...
1. **选择器增强**：CSS2.0引入了更多高级选择器，如类选择器（`.class`）、ID选择器（`#id`）、属性选择器（`[attr=value]`）以及后代选择器（`selector1 selector2`），增强了对元素的定位能力。 2. **定位系统**...
- **属性选择器**：根据元素的属性匹配，如`[attr=value]`。 - **伪类和伪元素**：表示元素的特殊状态，如`:hover`表示鼠标悬停，`:first-child`表示元素的第一个子元素。 **3. 层叠与继承** - **层叠**：当多个...
1. **选择器**：jQuery提供了丰富的选择器，如ID选择器（#id）、类选择器（.class）和属性选择器（[attr=value]），使得选取DOM元素变得更加容易。 2. **DOM操作**：jQuery提供了一系列方法，如`$(selector).html()...
CSS3引入了更多高级选择器，如属性选择器（`[attr=value]`）、伪类选择器（`:hover`, `:active`, `:focus`等）和伪元素选择器（`::before`, `::after`）。这些选择器大大增强了样式选择的灵活性和精确性。 在...