css选择器、伪类易错点总结

最新推荐文章于 2025-08-12 15:59:30 发布

applepie1

最新推荐文章于 2025-08-12 15:59:30 发布

阅读量215

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/applepie1/article/details/84086396

css 专栏收录该内容

1 篇文章

订阅专栏

本文深入讲解了CSS选择器的不同类型及其应用方式，包括多类选择器、ID选择器、属性选择器、后代选择器等，并通过实例展示了如何精确地定位和样式化网页元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.CSS 多类选择器

This paragraph is a very important and urgent warning.

用一下代码都可以匹配

.important.warning {background:silver;}
.important.urgent.warning {background:silver;}

2.CSS ID选择器

#intro {font-weight:bold;}
This is a paragraph of introduction.

大小写敏感

3.CSS 属性选择器

1）属性和属性值必须完全匹配

p[class="important warning "] {color: red;}
//p[class="important "] {color: red;} error
This paragraph is a very important warning.

2)根据部分属性值选择

p[class~ ="important "] {color: red;}
This paragraph is a very important warning.

3)子串匹配选择器

a[href* ="w3school.com.cn"]
<a href="http://www.w3school.com.cn/css/">CSS</a>

4）特定属性选择器

*[lang| ="en"] {color: red;}
Hello!
Greetings!
G'day!
Bonjour!
Jrooana!

选择 lang 属性等于 en 或以 en- 开头的所有元素

4.CSS后代选择器

ul em {color:red; font-weight:bold;}
<ul>
<li>List item 1
<ol>
<li>List item 1-1</li>
<li>List item 1-2</li>
<li>List item 1-3
<ol>
<li>List item 1-3-1</li>
<li>List item 1-3-2
</li>
<li>List item 1-3-3</li>
</ol>
</li>
<li>List item 1-4</li>
</ol>
</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

5.CSS子元素选择器

不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，自己的第一代

h1 > strong {color:red;}
<h1>This is veryvery2 important.</h1>
<h1>This is really very important.</h1>

6.CSS相邻兄弟元素

h1 + p {margin-top:50px;}
<h1>This is a heading.</h1>
This is paragraph. 
This is paragraph.

7.CSS伪类

1）锚伪类

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

2）first-child伪类

first-child 伪类来选择元素的第一个子元素

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
<div>
These are the necessary steps:
<ul>
<li>Intert Key</li>
<li>Turn key clockwise</li>
<li>Push accelerator</li>
</ul>
Do not push the brake at the same time as the accelerator.
</div>

在上面的例子中，作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。

最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。

练习时间到啦

eg1：

table.company td > p

下面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性

eg2:

html > body table + ul {margin-top:20px;}

选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

eg3:匹配第一个 元素

<html>
<head>
<style type="text/css">
p:first-child {
color: red;
}
</style>
</head>
<body>
some text
some text
</body>
</html>

eg4:匹配所有 元素中的第一个 元素

<html>
<head>
<style type="text/css">
p > i:first-child {
color:red;
}
</style>
</head>
<body>
some text . some text.
some text . some text.
some test
</body>
</html>

选择器匹配所有 元素中的子类为的第一个 元素

eg5:匹配所有作为第一个子元素的 元素中的所有 元素

<html>
<head>
<style type="text/css">
p:first-child i {
color:blue;
}
</style>
</head>
<body>
some text . some text .
some text. some text.
</body>
</html>