`
conkeyn
  • 浏览: 1522817 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

第2章 选择器 =>特定属性选择类型 P49

    博客分类:
  • CSS
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*[lang|="en"]{
	color:red;
}

[class|="one"]{
	font-weight:bold;	
}

</style>
</head>

<body>
<h1 lang="en"
>Hello!</h1>
<p lang="en-us"
>Greeting!</p>
<div lang="en-au"
>G'day!</div>
<p lang="fr">Bonjour!</p>
<h4 lang="cy-en">Jrooana!</h4>
<span class="one-barren cloudy"
>Tom</span></p>
</body>
</html>

 这个规则会选择lang属性值等于en或者以en-开头的所有元素。

一般地,[attribute|="val"]可以用于任何属性及其值,假充一个HTML文档中一系列图片,其中每个图片的文件名都形如figure-1.gif和figure-3.gif。


img[src|="figure"]{border:1px solid gray;}

 

 

分享到:
评论

相关推荐

    css的选择器

    本文介绍了CSS中多种类型的选择器,包括类与ID选择器、元素选择器、属性选择器、伪类和伪元素等。通过这些选择器,我们可以精确控制页面的布局和样式,实现复杂的设计效果。掌握这些选择器是成为优秀前端开发人员的...

    CSS选择器.txt

    2. **类选择器**:用于选中具有特定类名的元素。 - 示例:`.class`。选择所有包含类`class`的元素。 - 复合类选择器:`.class.class`。选择同时拥有两个类`class`的元素。 3. **属性选择器**: - `[text]`:选择...

    CSS3选择器教辅.pdf

    - 这些选择器允许选择父元素的特定子元素或特定类型的子元素,如选择父元素的第一个、最后一个、第n个子元素或特定类型子元素。 9. 其他选择器: - :root、:empty、:target、:enabled、:disabled、:checked、:not...

    HTML CSS选择器

    &lt;p class="style2"&gt;&lt;em&gt;第二&lt;/em&gt;段样式为style123&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; ``` 在这个例子中,`p.style1 em`表示选择所有具有`class="style1"`的`&lt;p&gt;`元素内部的`&lt;em&gt;`元素,并将其文字颜色设为蓝色。 **应用场景:*...

    第13章 CSS选择器[下]

    二、类型选择器 类型选择器是基于HTML元素标签名的选择器,如`p`、`div`或`h1`。它们直接应用于指定类型的元素,如`p {font-size: 16px;}`将设置所有段落的字体大小为16像素。 三、类选择器 类选择器(.class_name...

    JSoup CSS选择器用法大全

    2. **属性选择器**: - `[attr]`: 匹配具有指定属性 `attr` 的任何元素。 - `[attr=value]`: 匹配 `attr` 属性值等于 `value` 的元素。 - `[attr^=value]`: 匹配 `attr` 属性值以 `value` 开头的元素。 - `[attr...

    第03章 常规选择器(4)

    由于没有具体的描述信息,我将根据标题“第03章 常规选择器(4)”来假设我们已经了解了基本的选择器,并将在此基础上继续深化理解。 首先,让我们回顾一下CSS选择器的基本类型。CSS选择器分为几个类别,包括标签...

    python爬虫之css选择器

    描述:选择每个`&lt;p&gt;`元素为其父元素的第二个子元素、最后一个子元素、第n个子元素等。 ##### 7. 其他选择器 - **否定选择器**:`:not(selector)` 示例:`:not(p)` 描述:选择不是`&lt;p&gt;`元素的所有其他元素。 - ...

    第四章 CSS选择器.docx

    3. **后代选择器**:使用空格分隔两个选择器,表示选择第一个选择器内的任何层次的第二个选择器元素。例如: ```css ul li { list-style-type: none; } ``` 这将移除所有`&lt;ul&gt;`下的`&lt;li&gt;`元素的列表样式。 4....

    jquery 选择器 大全

    在jQuery中,选择器分为多种类型,包括基本选择器、层次选择器、过滤器选择器以及内容和属性过滤器。下面我们将详细探讨这些选择器的用法和实例。 1. **基本选择器**: - `#id`:通过ID选择器选取具有特定ID的元素...

    CSS3选择器.rar

    - **类型选择器**:通过元素名来选择元素,如`p`选择所有的段落。 - **类选择器**:使用`.`前缀,如`.myClass`选择具有特定类名的元素。 - **ID选择器**:使用`#`前缀,如`#myID`选择具有特定ID的唯一元素。 - *...

    jQuery选择器大全(48个代码片段 21幅图演示)

    - `,` 分割选择器:用于选择不同类型的元素,如`$("div, p")`。 - `MultipleSelectors`:同时选择多个类或ID,如`$("#myID .myClass")`。 3. **层次选择器** - `child`:`&gt;` 选择子元素,如`$("ul &gt; li")`。 - ...

    使用HTML开发商业网站-属性选择器和关系选择器课件.pptx

    6. :nth-of-type(n) 和 :nth-last-of-type(n):类似于`:nth-child()`,但只选择特定类型的元素,比如只选择所有`&lt;p&gt;`元素中的第n个。 7. :empty:选择没有任何子元素(包括文本节点)的元素。 掌握这些选择器的用法...

    css+jquery选择器大全

    例如,可以组合使用类选择器和属性选择器来选择具有特定类且拥有特定属性的元素。 由于文章内容中提到OCR扫描可能导致识别错误,读者在学习过程中遇到类似问题,应当参照官方文档或权威资源进行核对与学习。这样...

    第03章 常规选择器(3)

    元素选择器是最基础的选择器类型,它通过元素名来选择页面上的所有该类型的元素。例如,`p` 选择器会选中所有的段落元素。在HTML文档中,`&lt;p&gt;` 标签用于创建段落,而使用 `p {color: red;}` 就可以将所有段落文本设...

    第03章 常规选择器(1)

    ID选择器以`#`标识,用于根据元素的id属性选取特定的元素。例如,`#header`会选取id为`header`的元素。ID选择器具有唯一性,每个页面中每个ID只能出现一次,因此它常用于设置页面主要部分的样式。 四、后代选择器 ...

    第13章 CSS选择器[上]

    4. **属性选择器**:例如`[attr]`,选择具有特定属性的元素,还可以指定值,如`[href]`或`[type="button"]`。 5. **伪类和伪元素**:如`:hover`,`:active`,`:focus`,`:first-child`等,根据元素的状态或位置进行...

    JQuery选择器测试 离线版

    在jQuery中,选择器分为多种类型,包括基础选择器、类别选择器、ID选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器和通用选择器等。 1. **基础选择器**:主要包括`$()`,用于选取一个或多个DOM元素...

    jsoup 选择器(一)常规选择器

    ID选择器用于选择具有特定`id`属性的唯一元素。在HTML中,每个`id`应该是唯一的。例如,要选取`id`为`mainContent`的元素,可以这样写: ```java Element mainContent = doc.select("#mainContent").first(); ``` #...

    jQuery基础选择器练习题

    2. **子元素选择器**: 使用`&gt;`符号,如`$("div &gt; p")`选取`&lt;div&gt;`的直接子元素`&lt;p&gt;`。 3. **相邻兄弟选择器**: 使用`+`符号,如`$("div + p")`选取紧跟在`&lt;div&gt;`后面的那个`&lt;p&gt;`元素。 4. **通用兄弟选择器**: 使用`...

Global site tag (gtag.js) - Google Analytics