CSS学习笔记（三）--CSS选择器_使用css选择一个html中的文本中的类元素-优快云博客

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

选择器分组

假设希望 h2 元素和段落都有灰色。h2, p {color:gray;}
可以将任意多个选择器分组在一起，用逗号分割开，

通配符选择器

CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。如：* {color:red;}

声明分组

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

对声明分组，一定要在各个声明的最后使用分号，这很重要。浏览器会忽略样式表中的空白符。没有分号可能会把后边的代码忽略。

CSS 类选择器

我们使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通配选择器
*.important {color:red;}
所有calss=”important”的元素都按照important的方式来。

结合元素选择器

p.important {color:red;} p.important 解释为：“其 class 属性值为 important 的所有段落”。

CSS 多类选择器

一个 class 值中可能包含一个词列表，各个词之间用空格分隔
我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景。

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

使用：<p class="important warning"></p>

CSS ID 选择器

ID 选择器前面有一个 # 号 - 也称为棋盘号或井号
ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值。
<p id="intro">This is a paragraph of introduction.</p>
ID 选择器会使用一次，而且仅一次。ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表.
类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。

简单属性选择

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器
*[title] {color:red;}
a[href] {color:red;}
a[href][title] {color:red;}

根据具体属性值选择

链接指向一定的服务器的链接变色
a[href=”http://www.w3school.com.cn/”][title=”W3School”] {color: red;}
格式要求必须与属性值完全匹配。如果属性值包含用空格分隔的值列表，匹配就可能出问题。

根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点
p[class~="important"] {color: red;}如果忽略了波浪号，则说明需要完成完全值匹配,p.important 和 p[class=”important”] 应用到 HTML 文档时是等价的。

子串匹配属性选择器

这里写图片描述

特定属性选择类型

*[lang|=”en”] {color: red;}这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。

这里写图片描述

根据上下文选择元素

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：h1 em {color:red;}

CSS 伪类

伪类的语法：selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用:selector.class : pseudo-class {property: value}

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */