CSS 提供了多种类型的选择器,用于针对特定的 HTML 元素应用样式。以下是一些最常用的 CSS 选择器及其实例:
1、 元素选择器:根据 HTML 元素的类型选择元素。
实例:`p` 选择所有的 `
` 段落元素。
p {
color: blue;
}2、 类选择器:根据元素的 `class` 属性选择元素。
实例:`.highlight` 选择所有具有 `class="highlight"` 的元素。
.highlight {
background-color: yellow;
}3、 ID选择器:根据元素的 `id` 属性选择元素,ID 在一个页面中应该是唯一的。
实例:`#header` 选择 `id="header"` 的元素。
#header {
font-size: 24px;
}4、 后代选择器:选择作为某个元素后代的所有元素。
实例:`div p` 选择所有在 `
` 元素内部的 `
` 元素。
div p {
margin: 10px;
}5、 子元素选择器:选择某个元素的直接子元素。
实例:`ul > li` 选择所有直接在 `
` 元素内的 `
` 元素。
ul > li {
list-style-type: disc;
}6、 属性选择器:根据元素的属性及其值选择元素。
实例:`a[href^="https"]` 选择所有 `href` 属性以 "https" 开始的 `` 元素。
a[href^="https"] {
color: green;
}7、 伪类选择器:根据元素的特定状态选择元素。
实例:`a:hover` 选择鼠标悬停时的 `` 元素。
a:hover {
text-decoration: underline;
}8、 伪元素选择器:选择元素的特定部分。
实例:`p::first-line` 选择 `
` 元素的第一行。
p::first-line {
font-weight: bold;
}9、 兄弟选择器:
实例:`h2 + p` 选择紧跟在 `h2` 元素后的首个 `
` 元素。
h2 + p {
margin-top: 0;
}10、 相邻兄弟选择器:选择紧随某个元素后的同类型兄弟元素。
实例:`h2 ~ p` 选择所有跟在 `h2` 元素后的 `
` 元素。
h2 ~ p {
margin-left: 20px;
}11、 否定伪类:选择不匹配特定选择器的元素。
实例:`p:not(.highlight)` 选择所有没有 `class="highlight"` 的 `
` 元素。
p:not(.highlight) {
color: black;
}这些选择器可以单独使用,也可以组合使用以创建更具体的选择条件。在实际开发中,类选择器和元素选择器是最常用的,因为它们提供了足够的灵活性来应用于各种设计需求,同时保持了代码的可维护性。




还没有评论,来说两句吧...