CSS选择器学习笔记（2）

猫性男孩

6 ID选择器：

[backcolor=rgb(255, 255, 255) !important]

[backcolor=rgb(255, 255, 255) !important]

1	#header{font-weight:bold;}

7 属性选择器：

1)

[backcolor=rgb(255, 255, 255) !important]

[backcolor=rgb(255, 255, 255) !important]

1	*[href]{color:red;}

[backcolor=rgb(248, 248, 248) !important]

2	<!-- lang: css -->

[backcolor=rgb(255, 255, 255) !important]

3

[backcolor=rgb(248, 248, 248) !important]

4	<!-- lang: css -->

[backcolor=rgb(255, 255, 255) !important]

5	a[href][title]{font-weight:bold;}

[backcolor=rgb(248, 248, 248) !important]

6	<!-- lang: css -->

[backcolor=rgb(255, 255, 255) !important]

7

[backcolor=rgb(248, 248, 248) !important]

8	<!-- lang: css -->

[backcolor=rgb(255, 255, 255) !important]

9	a[href="[color=blue !important]http://www.w3school.com.cn/"][title="W3School"] {color: red;}

2)

[backcolor=rgb(255, 255, 255) !important]

[backcolor=rgb(255, 255, 255) !important]

1	img[title~="Figure"] {border: 1px solid gray;}

[backcolor=rgb(248, 248, 248) !important]

2	<!-- lang: css -->

[backcolor=rgb(255, 255, 255) !important]

3	//这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。

[backcolor=rgb(248, 248, 248) !important]

4

[backcolor=rgb(255, 255, 255) !important]

5

同理：

[abc^="def"]选择 abc 属性值以 "def" 开头的所有元素

[abc$="def"]选择 abc 属性值以 "def" 结尾的所有元素

[abc*="def"]选择 abc 属性值中包含子串 "def" 的所有元素

[backcolor=rgb(255, 255, 255) !important]

[backcolor=rgb(255, 255, 255) !important]

1	*[lang|="en"] {color: red;}

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

8 后代选择器

1）

h1 em {color:red;} 上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：

[backcolor=rgb(255, 255, 255) !important]

[backcolor=rgb(255, 255, 255) !important]

1	<h1>This is a <em>important</em> heading</h1>

[backcolor=rgb(248, 248, 248) !important]

2	<!-- lang: html -->

[backcolor=rgb(255, 255, 255) !important]

3	<p>This is a <em>important</em> paragraph.</p>

[backcolor=rgb(248, 248, 248) !important]

4

[backcolor=rgb(255, 255, 255) !important]

5

2）

如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

[backcolor=rgb(255, 255, 255) !important]

[backcolor=rgb(255, 255, 255) !important]

1	h1 > strong {color:red;}

这个规则会把第一个 h1 下面的 strong 元素变为红色，但是第二个 strong 不受影响,第三个h1下的strong也变红：

[backcolor=rgb(255, 255, 255) !important]

[backcolor=rgb(255, 255, 255) !important]

1	<h1>This is <strong>very</strong> important.</h1>

[backcolor=rgb(248, 248, 248) !important]

2	<!-- lang: html -->

[backcolor=rgb(255, 255, 255) !important]

3	<h1>This is <em>really <strong>very</strong></em> important.</h1>

[backcolor=rgb(248, 248, 248) !important]

4	<!-- lang: html -->

[backcolor=rgb(255, 255, 255) !important]

5	<h1><strong>Hello</strong></h1>