03. CSS 选择器
元素选择器
类选择器 ==> 最常用
id选择器 ==> 很少使用，一般用于顶级框架的名称
通配符选择器
交集选择器
并集选择器
后代选择器
子元素选择器
相邻兄弟选择器
属性选择器
伪类选择器
伪元素选择器
CSS 选择器权值
如果要给 HTML 元素设置 CSS 样式，则需要在元素中设置 "id" 和 "class" 属性，该属性用作选择器。
一、元素选择器
标签{
属性:值;
}
二、类选择器
class 选择器用于描述一组元素的样式，也叫做类选择器，class 选择器有别于 id 选择器，class 可以在多个元素中使用，并且一个元素也可以指定多个类名。class 选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点 "." 号来定义。可以设置所有带有指定 class 的 HTML 元素，也可以指定特定的 HTML 元素使用 class。
注意：类名的第一个字符也不能使用数字。
-
单类名调用：
class="类名"； -
多类名调用：
class="类名1 类名2 ..."；
实例：
<!DOCTYPE html>
<html>
<head>
<style>
.center{
text-align:center;
}
.col{
color:red;
}
.font{
font-size:18px;
font-family:"Microsoft YaHei";
}
</style>
</head>
<body>
<h1 class="center">class 选择器</h1>
<p class="center col">我是一个段落。</p>
<p class="center font">我是另一个段落。</p>
</body>
</html>
实例：所有的 p 元素使用 class="center"，让该元素的文本居中
<!DOCTYPE html>
<html>
<head>
<style>
.center{
color:blue;
}
p.center{
text-align:center;
}
p.col{
color:red;
}
.font{
font-size:18px;
font-weight:bold;
font-family:"Microsoft YaHei";
}
</style>
</head>
<body>
<h1 class="center col">class 选择器</h1>
<p class="center col">我是一个段落。</p>
<p class="center col font">我是另一个段落。</p>
<h2 class="center">h2 标题</h2>
</body>
</html>
三、id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 属性和身份证一样具有唯一性。HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 "#" 来定义。
注意： id 属性不能以数字开头。
#id{
属性:值;
}
四、通配符选择器
*{
属性:值;
}
- 作用域：整个HTML页面
五、交集选择器
选择器1选择器2{
属性:值;
}
六、并集选择器
- 多个选择器具有相同样式
选择器1,选择器2{
属性:值;
}
// h1, h2, h3, h4, h5, h6, p{color:red;}
七、后代选择器
先代选择器 后代选择器{
属性:值;
}
- 作用于先代元素内的[所有的后代元素]；
八、子元素选择器
父选择器 > 子选择器{
属性:值;
}
-
只作用于父元素内的[直接子元素]；
-
如果不希望选择任意的后代元素，而是只选择某个元素的子元素，那么就使用子元素选择器
实例：把 div 元素中所有直接子元素 a 的字体设置为红色
<head>
<style>
div>a{
color:red;
}
</style>
</head>
<body>
<div>
<a href="">div 中第一个子元素 a，显示为红色</a>
<p>div 中第二个子元素 p<br/>
<a>p 元素的子元素 a，该元素是 div 元素的孙元素</a>
</p>
<a href="">div 中第三个子元素 a，显示为红色</a>
</div>
</body>
总结：> 作用于元素的第一代后代，空格 作用于元素的所有后代
九、相邻兄弟选择器
伯选择器 + 仲选择器{
属性:值;
}
-
作用于紧接在伯元素后的[仲元素]；
-
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，就可以使用相邻兄弟选择器
实例：选取了所有位于 div 元素后的第一个 p 元素：div+p
<head>
<style>
div+p{
background-color:red;
}
</style>
</head>
<body>
<p>body 的第一个子元素 p</p>
<div>body 的第二个子元素 div
<p>div 中第一个子元素 p</p>
<div>
<p>div 中第二个子元素 div 的子元素 p</p>
</div>
<p>div 中第三个子元素 p，是 div 的相邻兄弟元素，相同父级 div</p> //红
</div>
<p>body 的第三个子元素 p，是 div 的相邻兄弟元素，相同父级 body</p> // 红
<p>body 的第四个子元素 p，是 div 的普通兄弟元素</p>
</div>
</body>
实例：选取了所有 div 元素的所有相邻兄弟元素 p : div~p
<head>
<style>
div~p{
background-color:red;
}
</style>
</head>
<body>
<p>body 的第一个子元素 p</p>
<div>body 的第二个子元素 div
<div>div 元素下的第一个子元素 div</div>
<p>div 的相邻兄弟元素</p>
<p>div 的普通兄弟元素</p>
<p>div 的普通兄弟元素</p>
</div>
<p>body 下 div 的相邻兄弟元素</p>
<p>body 下 div 的普通兄弟元素</p>
<p>body 下 div 的普通兄弟元素</p>
</body>
十、属性选择器
[属性]{
属性:值;
}
实例：把所有带有 title 属性的元素的字体设置为红色：
<head>
<style>
[title]{
color:red;
}
</style>
</head>
<body>
<h1>h1 标题不带有 title 属性</h1>
<h2 title="标题">h2 可以设置样式</h2>
<a href="#" title="链接">超链接可以设置样式</a>
</body>
标签[属性=值]{
属性:值;
}
实例：把所有 title='Hello' 的元素的字体设置为蓝色：
<head>
<style>
[title=Hello]{
color:blue;
}
</style>
</head>
<body>
<h1 title="Hello world">h1 标题 title="Hello world"</h1>
<h2 title="Hello">h2 可以设置样式</h2>
<a href="#" title="Hello">超链接可以设置样式</a>
</body>
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用
<head>
<style>
input[type="text"]{
width:150px;
display:block;
margin-bottom:5px;
background-color:yellow;
}
input[type="button"]{
width:120px;
margin-top:5px;
background-color:green;
}
</style>
</head>
<body>
<form name="input" action="demo.php" method="get">
用户名：<input type="text" name="user" placeholder="请输入登录名">
昵 称：<input type="text" name="name" placeholder="请输入角色名">
<input type="button" value="查询">
</form>
</body>
十一、伪类选择器
选择器:伪类{
属性:值;
}
(1) <a>超链接伪类：
-
a:link：未访问的链接； -
a:visited：已访问的链接； -
a:hover：鼠标移动到链接； -
a:active：鼠标点击时的连接；
当为链接的不同状态设置样式时，必须遵循以下顺序规则：
-
a:hover必须跟在a:link和a:visited后面。 -
a:active必须跟在a:hover后面。
伪类可以与 CSS 类配合使用 ：选择器.class:伪类{attr:value;}
实例：设置鼠标移动到的链接为红色
<head>
<style>
a.tint:hover{
color:red;
}
</style>
</head>
<body>
<a href="#">超链接</a>
<a class="tint" href="#">超链接</a>
</body>
IE6不支持a以外其它任何标签的伪类；
IE6以上的浏览器支持所有标签的hover伪类；
(2) 位置结构伪类：
-
:first-child：第一个子元素； -
:last-child：最后一个子元素； -
:nth-child(n)：第n个元素（n=1,2,3...）； -
:nth-last-child(n)：倒数第n个元素（n=1,2,3...）; -
[n=
odd：奇数 | n=even：偶数]
注意：
- 不是第一个HTML标签，而是第一个HTML元素
- html元素：文本，图像，链接；
实例：选择作为任何元素的第一个子元素 p。选择器使用 p:first-child
<head>
<style>
p:first-child{
font-weight:bold;
color:blue;
}
</style>
</head>
<body>
<p>第一个 p 元素</p> // 蓝
<p>第二个 p 元素</p>
<p>第三个 p 元素</p>
</body>
(3) 【CSS3】目标伪类：
/*:target 选择器用于选取当前活动的目标元素*/
:target{
属性:值;
}
十二、伪元素选择器
标签::伪元素{
属性:值;
}
- 伪元素可以与 CSS 类配合使用
伪元素：
-
:first-line：向文本的首行设置特殊样式；-
注意：:first-line 伪元素只能用于块级元素，下面的属性可应用于 :first-line 伪元素
①、font
②、color
③、background
④、line-height
⑤、clear
⑥、vertical-align
⑦：text-decoration
⑧：text-transform
⑨、letter-spacing
⑩、word-spacing
-
-
:first-letter：向文本的首字母设置特殊样式；-
注意：:first-letter 伪元素只能用于块级元素，下面的属性可应用于 "first-letter" 伪元素
①、font、color、background、line-height、clear、vertical-align (only if "float" is "none")、text-decoration、text-transform
以上8个属性和 :first-line 伪元素相同，除了 letter-spacing 和 word-spacing 之外。②、float
③、margin
④、padding
⑤、border
-
-
:before：在标签之前添加content:新内容；
标签::before{
content:新内容;
// constent:none 默认
// constent:'string' 插入文本
// constent:attr(属性) 插入标签属性值
// constent:url(路径) 插入一个外部资源
}
:after：在标签之后添加content:新内容；
标签::after{
content:新内容;
}
:selection：选中区域；
注意：多重伪元素即可以结合多个伪元素来使用
实例：段落的第一个字母将显示为红色，其字体大小为 20px。第一行中的其余文本将为蓝色，并带有下划线装饰效果。段落中的其余文本将以默认字体大小和颜色显示
<head>
<style>
p:first-letter{
color:red;
font-size:20px;
}
p:first-line{
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<h1>The best things in life are free, like hugs, smiles, friends, kisses, family, love and good memories.</h1>
<p>The moon belongs to everyone，best things in life they're free，stars belong to everyone，they cling there for you and for me.Love can come to everyone，best things in life they're free，all of the good things，every one of the better things.</p>
<p>The best things in life are free, and the second best things are very, very expensive.</p>
</body>
十三、CSS 选择器权值
有时候我们为同一个元素设置了不同的 CSS 样式代码，浏览器会根据权值来判断使用哪种 CSS 样式，哪种样式权值高就使用该样式，所以理解选择器的特殊性很重要。
权值就是所用选择器的特殊性，浏览器会根据这种特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于具有一般选择器的规则，如果两个规则的特殊性相同，那么后定义的规则优先，这一点和 JS 相同，即后面定义的会覆盖前边定义的。
覆盖也就是 CSS 层叠，当有相同权重的样式存在时，会根据这些 CSS 样式的前后顺序来决定，处于最后面的 CSS 样式会被应用。那么对于 CSS 样式优先级的顺序就不难理解了。
特殊性可以分为4个等级，每个等级代表一类选择器：
①、代表内联样式，如 <p style="color:red"></p>，权值为 1000。
②、代表 ID 选择器，如 #content，权值为 100。
③、代表类，类选择器以及伪类和属性选择器，如 .main，权值为 10。
④、代表类型选择器，标签和伪元素选择器，如 div p，权值为 1。
通配符选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为 0。
注意：继承也有权值的，但是继承的权值是最低的。
每个等级的值为其所代表的选择器的个数乘以这一等级的权值（比如 ④ 中例子的权值为 2），最后把所有等级的值相加得出选择器的特殊值。比较同一级别的个数，数量多的优先级高，如果相同即比较下一级别的个数 。
权值的规则：选择器的权值相加，大的优先；如果权值相同，后定义的优先 。
权值的大小跟选择器的类型和数量有关，样式的优先级跟样式的定义顺序有关。
p{ /* 权值为 1 */
color:red;
}
p span{ /* 权值为 1+1=2 */
color:green;
}
.main{ /* 权值为 10*/
font-size:14px;
}
div p .main{ /* 权值为 1+1+10=12 */
color:purple;
}
#footer{ /* 权值为 100 */
color:gray;
}
#footer .note p{ /* 权值为 100+10+1=111 */
color:white;
}
最高权值
在实际的网站开发中，有些特殊的情况需要为某些样式设置具有最高权值，这时候我们可以使用 !important 来解决
<head>
<style>
p{
color:red!important; // 权值最高，p 元素显示红色
}
.demo{
color:green;
}
</style>
</head>
<body>
<p class="demo">在实际的网站开发中，有些特殊的情况需要为某些样式设置具有最高权值，这时候我们可以使用 !important 来解决。</p>
</body>
浙公网安备 33010602011771号