CSS选择器
- 类型选择器，是对 HTML 标签中的 class 属性进行选择。CSS 类选择器的选择符是 “.”。
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="utf-8"/>
<title>CSS学习笔记</title>
<style type="text/css">
p {
color: red;
}
.bgc {
background-color: yellow;
}
</style>
</head>
<body>
<p class="bgc">CSS学习笔记</p>
</body>
</html>- id 是对 HTML 标签中 id 属性进行选择。id 选择器的选择符是 “#”。 任何元素都可以使用 id 属性设置唯一的 id 名称。这是选择单个元素的最有效的方式。id 选择器具有唯一性。
- 通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<p>测试字段</p>
<span>你好</span>
<strong>好嗨哟</strong>
</body>
</html>- 标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个必须是标签选择器，第二个为 class 选择器或 id 选择器。两个选择器之间不能有空格。简单记忆为：并且的意思。即…又…的意思，比如 p.one 选择的是类名为 one 的段落标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
p {
color: red;
}
p.one {
color: blue;
}
p#two {
color: yellow;
}
</style>
</head>
<body>
<p>测试</p>
<p class="one">测试</p>
<p id="two">测试</p>
</body>
</html>- 后代选择器又叫包含选择器，用来选择元素或元素组的后代。其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.one #two p {
color: red;
}
</style>
</head>
<body>
<div class="one">
<div id="two">
<p>测试</p>
</div>
</div>
</body>
</html>- 与后代选择器相比，子元素选择器只能选择作为某个元素的子元素。子选择器使用大于号作为子结合符。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
p > strong {
color: red;
}
</style>
</head>
<body>
<p>
<strong>测试</strong>
<strong>测试</strong>
</p>
<p>
<em>
<strong>测试</strong>
<strong>测试</strong>
</em>
</p>
</body>
</html>注：从上述两个例子中我们可以看出，子代选择器只选择指定标签的第一代子元素或者理解为它的直接后代（只指定儿子，而不管孙子），后代选择器是作用于所有子后代元素（不只儿子，还可以选择到孙子，重孙子等等）。
- 并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class 类选择器、id 选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的 CSS 样式。简单记忆为：和的意思。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
p,
#one,
.two {
color: red;
}
</style>
</head>
<body>
<p>我是中国人</p>
<span id="one">我爱中国</span>
<strong class="two">我们是中国人</strong>
</body>
</html>- 属性选择器是根据元素的属性及属性值来选择元素。常用的几种属性选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
p {
color: blue;
}
p[title='one'] {
color: red;
}
p[title~='two'] {
color: green;
}
p[title|='three'] {
color: pink;
}
</style>
</head>
<body>
<p title="five">我爱学习</p>
<p title="one">我爱运动</p>
<p title="one two">我爱吃饭</p>
<p title="three-four">我爱睡觉</p>
</body>
</html>- CSS 伪类用于向某些选择器添加特殊的效果。下面给大家介绍几个常用的伪类。
- :link 应用于未被访问过的链接。IE6 不兼容，解决此问题，直接使用 a 标签。
- :hover 应用于有鼠标指针悬停于其上的元素。在 IE6 只能应用于 a 连接，IE7+ 所有元素都兼容。
- :active 应用于被激活的元素，如被点击的链接、被按下的按钮等。
- :visited 应用于已经被访问过的链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
/*a:link{
color: red;
}*/
/*链接默认状态*/
a {
color: red;
text-decoration: none;
}
/*链接访问之后的状态*/
a:visited {
color: yellow;
}
/*鼠标放到链接上显示的状态*/
a:hover {
color: blue;
text-decoration: line-through;
}
/*链接激活的状态*/
a:active {
color: pink;
}
</style>
</head>
<body>
<a href="">测试</a>
</body>
</html>- 层叠性是指多种 CSS 样式的叠加。而最终什么选择器在层叠中胜出遵循下列规则。
- !important 具有最大优先级。也就是说任何情况下，只要定义了它,它的样式最终就会被应用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
#syl {
color: yellow;
font-size: 10px;
}
.box {
color: green;
font-size: 60px;
}
div {
color: red !important;
font-size: 60px !important;
}
</style>
</head>
<body>
<div class="box" id="syl" style="font-size:12px; color:yellow;">测试</div>
</body>
</html>注：这里的先后次序不是说 class 里面类名的先后次序，而是说定义样式的先后顺序。上述例子中先定义的 box2 类样式，再定义的 box 类样式，最后显示的是 box 类中的样式。
- 优先级：
- 规则（1）：行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式。
- 规则（2）：important > 内联 > id > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承。另外权重会叠加，所以为了便于理解，权重设置如下： - 1 表示标签选择器的权重；- 10 表示类选择器的权重；- 100 表示 id 选择器的权重；- 1000 表示内联样式的权重。
注：权重相同时，CSS 遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。所有都相同时，声明靠后的优先级大。
- 通用兄弟元素选择器（E~F）：
E 和 F 属于同一父元素之内，并且 F 在 E 之后，通用兄弟选择器会选择符合这样排列的所有的 F 元素。
<!DOCTYPE html>
<html>
<head>
<title>shiyanlou</title>
<style type="text/css">
.test ~ p {
background: red;
}
</style>
</head>
<body>
<div>
<p>1</p>
<p class="test">2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</div>
<p>8 out of div</p>
</body>
</html>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-12-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读