CSS选择器
- 每一条css样式定义由两部分组成：选择符（选择器）和声明（样式），在
{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素
- CSS中，选择器是一种模式，用于选择需要添加样式的元素
- 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确
- 选择器 与
{ 之间必须包含空格
<style type="text/css">
<!-- * 是通配符，常用于重置浏览器默认样式，对所有标签元素起效果 -->
* {
margin: 0;
padding: 0;
}
<!-- 上例中，margin:0; 就是属性声明，margin为属性名，0为属性值 -->
<!-- body就是选择器，下例中只对 body 元素起效果 -->
body {
font-size: 12px;
color: red;
}
</style>
- 下面所介绍的选择器，主流的浏览器基本都支持，IE低版本有较多的兼容问题，点击查看更多
通用选择器 *
- 通用选择器是功能最强大的选择器，它是用一个
*号指定，它的作用是匹配HTML中所有标签元素。如使用下面代码将HTML中任意标签元素字体的颜色全部设置为红色
* {
color:red;
}
标签选择器（元素选择器／类型选择器）
- 最常见的CSS选择器是标签选择器。换句话说，文档的元素就是最基本的选择器
- 标签选择器其实就是html代码中的标签，例如：
<html>、<body>、<h1>、<p>、<img>
<style type="text/css">
p {
font-size:12px;
line-height:1.6em;
}
</style>
类选择器
- 类选择器在css样式编码中是最常用到的
- 类选择器允许以一种独立于文档元素的方式来指定样式
- 语法：
.类选择器 {css样式代码;}
- 英文小圆点开头
.
- 其中类选择器名称可以任意起名，但尽量取得有意义（非中文名），chassName必须以字母开头
- 区分大小写
- 在一个HTML文档中，类选择器可以使用多次
<style type="text/css">
.set-red{
color:red;
}
.set-green{
color:green;
}
/* 注意：这里 span .set-red {color: red;} 这样写是没有效果的，因为处于同一层次 */
/* span.set-red {color: red;} 去掉中间的空格，意思为选择 span 元素，且它包含 setRed 的 class 属性 */
/* 有时还会遇到比如 .b.c { color: green; } 类似的CSS样式，这里的意思为元素包含 b 和 c 的 class属性 */
</style>
</head>
<body>
<p>文字颜色设置为<span class="set-red">红色</span>或者<span class="set-green">绿色</span>。</p>
</body>
ID选择器
- ID选择器允许以一种独立于文档元素的方式来指定样式
- 语法：
#ID选择器 {css样式代码;}
- 在很多方面，ID选择器都类似于类选择器，但也有一些重要的区别
- 为标签设置
id = "ID名称"，而不是class = "类名称"
- ID选择符的前面是
#号，而不是英文小圆点.
<style type="text/css">
#set-red{
color:red;
}
#set-green{
color:green;
}
</style>
</head>
<body>
<p>文字颜色设置为<span id="set-red">红色</span>或者<span id="set-green">绿色</span>。</p>
</body>
- 注意：
-
id必须以字母开头
- 区分大小写
- 在实际中，浏览器并不会检查ID的唯一性，设置多个ID，可以为这些具有相同ID的元素应用相同样式，但在编写DOM脚本时只能识别该id的第一个元素。所以我们在一个HTML文档中，需要保证ID的唯一性
-
如无必要，不得为 id、class 选择器添加类型选择器进行限定，在性能和维护性上，都有一定的影响
类和ID选择器的区别、使用场景
- 相同点：
- 不同点：
-
ID选择器只能在文档中使用一次。与类选择器不同，在一个Html文档中，ID选择器只能使用一次，仅此一次。而类选择器可以使用多次
-
可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的，即不能使用ID词列表
- 使用场景：
- class 重在样式的复用，重普遍性。
- id 重在划分样式区域，可以作为样式表中的命名空间来管理样式。
- id也可以指定某一个特殊元素的样式，重特殊性
<style type="text/css">
/*类选择器*/
.set-red{
color:red;
}
.bigS-size{
font-size:20px;
}
/*ID选择器*/
#set-red-id{
color:red;
}
#big-size-id{
font-size:20px;
}
</style>
</head>
<body>
<!-- 正确写法 -->
<p>第一处文字颜色设置为<span class="set-red">红色</span>，第二处文字颜色也设置为<span class="set-red">红色</span>，第三处文字设置为<span class="set-red big-size">红色的大字体</span></p>
<!-- 错误写法 -->
<p>第一处文字颜色设置为<span id="set-red-id">红色</span>，第二处文字颜色也设置为<span id="set-red-id">红色</span>，第三处文字设置为<span id="set-red-id big-size-id">红色的大字体</span></p>
</body>
属性选择器-[att]（IE6-不支持）
- 属性选择器可以根据元素的属性及属性值来选择元素
- 注意：属性选择器中的值不使用双引号包围也可以，但编码规范中要求使用双引号
""包围
<style type="text/css">
/* 第一种：[att] 简单属性选择器 */
/* 通过某个属性来选中元素，而不论属性值是什么 */
h1[class] {color: red;}
img[alt] {color: red;}
a[href][title] {color: red;}
#div[class] {color: red;}
.box[id] {color: red;}
[class] {color: red;}
/* 第二种：[att=val] 具体属性选择器 */
/* 通过某个属性的属性值是什么来选中元素 */
[class = "test box"] {color: red;}
/* class里面的值以及顺序必须完全相同，并且不可多空格或者少空格 */
[id = "tox"] {color: red;}
/* ID选择器和指定id属性的属性选择器并不是一回事，主要在于优先级不同 */
a[href = "http://www.baidu.com"][title ="baidu"] {color: red;}
/* 第三种：部分属性选择器。这里以 class 为例 */
/*
[class ~= "b"] 选择class属性值在用空格分隔的词列表中包含词语"b"的所有元素
[class ^= "b"] 选择class属性值以"b"开头的所有元素
[class $= "b"] 选择class属性值以"b"结尾的所有元素
[class *= "b"] 选择class属性值包含"b"的所有元素
[class |= "b"] 选择class属性值等于b或以b-开头的所有元素
*/
</style>
伪类、选择器、伪元素选择器
子选择器（Child selector）
- 使用大于号
>（子结合符），比如E > F，匹配E元素的所有直接子元素F
- 编码规范：>、+、~ 选择器的两边各保留一个空格
<style type="text/css">
/* 实例1 */
/* 选取 h1 元素的第一代子元素中所有的 strong 元素 */
h1 > strong {color: red;}
/* 实例2 */
table.company td > p
/* 上面的选择器会选择作为 td 元素第一代子元素中所有的的 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性 */
</style>
</head>
<body>
<!-- h1 > strong {color:red;} 这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 元素不受影响，因为这里的 strong 元素不属于 h1 元素的第一代子元素 -->
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
后代（包含）选择器（Descendant selector）
- 后代选择器又称为包含选择器，使用空格，用于选择指定标签元素下的后辈元素
<style type="text/css">
/* 后代选择器的功能极其强大。有了它，可以使 HTML 中不可能实现的任务成为可能 */
/* 假设有一个文档，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区的背景为白色，这两个区都包含链接列表。不能把所有链接都设置为蓝色，因为这样一来边栏中的蓝色链接都无法看到 */
/* 解决方法是使用后代选择器。在这种情况下，可以为包含边栏的 div 指定值为 sidebar 的 class 属性，并把主区的 class 属性值设置为 maincontent。然后编写以下样式 */
div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}
</style>
-
包含选择器与子选择器的区别：子选择器指选择某元素的直接后代，或者你可以理解为作用于其第一代子元素。而后代选择器是作用于其所有子后代元素。后代选择器通过空格来进行选择，子控制器是通过
>进行选择
- 注意：
- 关于后代选择器，又一个易被忽视的方面，即两个元素之间的层次间隔是可以无限的。例如，如果写作
ul em {color:red;}，这个语法就会选择从ul元素继承的所有em元素，而不论em的嵌套层次有多深
相邻兄弟选择器（Adjacent sibling selector）
- 相邻兄弟选择器使用加号
+，比如E + F，匹配E元素之后的同级元素F（直接相邻）
<style type="text/css">
/* 实例1 */
/* 选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素*/
h1 + p {margin-top:50px;}
/* 实例2 */
/* 下面这个选择器只会把列表中的第二个和第三个列表项的字体颜色变为红色，第一个列表项不受影响。因为第三个 li 是第二个 li 的兄弟元素，所以也会应用样式，如果第三个并不是 li 元素（即不为第二个 li 元素的兄弟元素了），那么它不会应用样式 */
/* 这种情况下，如果我们想为之后的 li 元素应用样式，即使不为兄弟元素，可使用通用兄弟选择器 */
li + li {color:red;}
/* 如果改为 ul + ol {color:red;}，则第二个列表中所有列表项的字体颜色变为红色 */
/* 实例3 */
/* 相邻兄弟结合符还可以结合其他结合符 */
/* 下面这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素 */
html > body table + ul {margin-top:20px;}
</style>
</head>
<body>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</body>
- 注意：
- 用一个结合符只能选择两个相邻兄弟中的第二个元素
- 与子结合符一样，相邻兄弟结合符旁边可以有空白符
- 两个元素之间的文本内容不会影响相邻兄弟结合符起作用
- IE6-不支持
通用兄弟选择器
- 通用兄弟选择器使用波浪号
~，比如E ~ F，匹配E元素之后的所有同级元素F（无论直接相邻与否）
<style type="text/css">
/* 下面这个选择器会把 h2 元素之后的所有 p 元素的字体颜色变为红色 */
h2 ~ p {color:red;}
</style>
</head>
<body>
<h2>标题</h2>
<p>段落一</p>
<h3>23323</h3>
<p>段落二</p>
</body>
选择器分组
- 当我们想为HTML中多个标签元素设置同一个样式时，可以使用分组选择符
,
- 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行
<style type="text/css">
/* 下面代码能为h1、p标签同时设置字体颜色为红色 */
/* 将 h1 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式 {color: red;} 将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器 */
h1,
p {
color: red;
}
/* 相当于下面的代码 */
h1 {
color: red;
}
p {
color: red;
}
</style>
- 注意：
- 可以将任意多个选择器分组在一起，对此没有任何限制
- 通过分组，我们可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表
CSS的继承、选择器的优先级、计算
继承（Inherited）
- CSS继承：继承就是子标签继承了上级标签的CSS样式的属性
- 不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before 和 unicode-bidi。
- 所有元素可继承：visibility 和 cursor。
- 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
- 注意：
<a>标签有自己的颜色和样式，不会继承自父元素
- 终端块状元素可继承：text-indent 和 text-align。
- 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
- 表格元素可继承：border-collapse
选择器的优先级
- css样式的简单权重级别由高到低排列：
- 在属性后面使用
!important 会覆盖页面内任何位置定义的元素样式。
- 作为style属性写在元素标签上的内联样式
- id 选择器
- 类选择器、伪类选择器、属性选择器
- 标签选择器、伪元素选择器
- 通配符选择器
- 浏览器自定义
复杂场景下计算优先级
- 复杂场景下将选择器分为四个级别通过各级别的出现次数决定。
- 四个级别分别为：行内选择符、ID选择符、类别选择符、元素选择符。
- 优先级的算法：
- 每个规则对应一个初始"四位数"：0、0、0、0
- 若是 行内选择符，则加 1、0、0、0
- 若是 ID选择符，则加 0、1、0、0
- 若是 类选择符/属性选择符/伪类选择符，则分别加 0、0、1、0
- 若是 元素选择符/伪元素选择符，则分别加 0、0、0、1
- 算法：将每条规则中，选择符对应的数相加后得到的“四位数”，从左到右进行比较，大的优先级更高。 优先级相同时，采用就近原则，即最后出现的样式。
网友评论