CSS学习: 选择器

为页面元素添加样式

找元素，找你想要应用样式的元素

一条简单的 css 规则：

1 2	/* 把一个 p 元素内的文本设置为红色 */ p { color: red; }

格式：

1 2	/* article 内如果有 p 则将 p 元素的字重设置为 bold （ article 是 p 的祖先元素，不一定是父元素 */ article p { font-weight: bold; }

特点：元素之间有空格

如果我们想要选择父子关系的元素，可以写成这样：

1	section > h2 { font-style:italic; }

还有同胞关系：

/* 相邻同胞 */
h2 + p { font-variant:small-caps; }

/* 一般同胞（不一定相邻）*/
h2 ~ a { color:red; }

*通用选择符 **

1 2	/* 是一个通配符，它匹配任何元素 / * { color: green; }

id 和 calss , 相当于为元素起了名称，通过 id 和 calss 我们可以直接找到对应元素，不必关心文档结构

1	.specialtext { font-style: italic; }

这里的 .specialtext 就是在找类名为 specialtext 的元素

我们也可以带着标签：

1 2	/* 类名为 specialtext 的 p 元素 */ p.specialtext { color: red; }

如果想通过一个元素上的两个类名来确定这个元素：

1 2	/* 这会找到同时拥有 specialtext 和 featured 两个类名的元素 */ .specialtext.featured { font-size: 120%; }

与类选择器类似， ID 选择器只需要把 . 改成 # 即可：

1	#specialtext { font-style: italic; }

1 2	/* 带有 title 属性的 img 元素 */ img[title] { border: 2px solid blue; }

1 2	/* title 属性的值为 'red flower' 的 img 元素 */ img[title=“red flower”] { border: 4px solid green; }

上面两个例子，一个通过属性名去选择元素，一个通过属性值去选择元素

以上就是几种常用的选择器，熟练使用之后可以应对大部分使用场景

体验小程序「简易记账」

关注公众号「特想学英语」

为您推荐