<!DOCTYPE html> <html> <head> <title>CSS选择器练习题</title> <link rel="stylesheet" href="./外部样式表.css"> </head> <body> <div class="container"> <h1>主标题</h1> <ul class="list"> <li>项目1</li> <li>项目2</li> <li>项目3</li> </ul> <p class="text">这是一个段落。</p> <div class="box">盒子1</div> <div class="box">盒子2</div> </div> <p class="text">另一个在容器外的段落。</p> </body> </html> <!-- 用外部样式 --> <!-- 选取主标题(<h1>)将颜色改成粉色。 选取所有列表项(<li>)。 选取第一个列表项。背景颜色改为红 选取最后一个列表项。背景颜色改为绿 选取容器内带有"class"为"text"的段落。 选取容器内的第一个盒子。 选取所有带有"class"为"text"的元素(无论其在容器内还是容器外)。 -->
时间: 2023-11-16 22:50:13 浏览: 91
您好!根据您提供的 HTML 代码,以下是对应的 CSS 选择器练习题的答案:
1. 选取主标题(<h1>)将颜色改成粉色:
```css
h1 {
color: pink;
}
```
2. 选取所有列表项(<li>):
```css
li {
/* 样式 */
}
```
3. 选取第一个列表项。背景颜色改为红:
```css
li:first-child {
background-color: red;
}
```
4. 选取最后一个列表项。背景颜色改为绿:
```css
li:last-child {
background-color: green;
}
```
5. 选取容器内带有"class"为"text"的段落:
```css
.container .text {
/* 样式 */
}
```
6. 选取容器内的第一个盒子:
```css
.container .box:first-child {
/* 样式 */
}
```
7. 选取所有带有"class"为"text"的元素(无论其在容器内还是容器外):
```css
.text {
/* 样式 */
}
```
请注意,上述 CSS 选择器的样式部分需要根据具体要求进行填写。
相关问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/static/nlogo.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite App</title> <link rel="stylesheet" href="/static/css/index-2e70103c.css"> </head> <body> <div id="app"></div> <script crossorigin src="/static/js/index-2d27bd93.js"></script> </body> </html>
从你的代码片段来看,你的 `index.html` 文件中引用了两个静态资源文件,一个是 `index-2e70103c.css`,另一个是 `index-2d27bd93.js`。这两个文件都位于 `/static` 目录下,因此你需要确保在服务器上能够正确地映射到这个目录,并且这些文件的实际路径与 `index.html` 文件中引用的路径一致。如果你使用的是相对路径,那么你需要确保这些文件相对于 `index.html` 文件的位置是正确的。同时,你也需要检查一下这些文件是否被正确地打包,并且是否存在于你的服务器上。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel=icon href=/static/dist/favicon.ico> <title>Document</title> <link href=/static/dist/css/chunk-13070ec1.ccda3c25.css rel=prefetch> <link href=/static/dist/css/chunk-1f6eb24a.5552800c.css rel=prefetch> <link href=/static/dist/css/chunk-2450c4ac.37f7ca9b.css rel=prefetch> <link href=/static/dist/css/chunk-24a27c0c.d809b953.css rel=prefetch> <link href=/static/dist/css/chunk-25dec777.b68c08db.css rel=prefetch> <link href=/static/dist/css/chunk-3a7e7ac7.61f67a30.css rel=prefetch> <link href=/static/dist/css/chunk-3ac3afd8.98bc23e9.css rel=prefetch> <link href=/static/dist/css/chunk-3b4a96bb.a0ee3bc1.css rel=prefetch> <link href=/static/dist/css/chunk-42b28a6b.64434a61.css rel=prefetch> <link href=/static/dist/css/chunk-517ab105.39040074.css rel=prefetch> <link href=/static/dist/css/chunk-56490945.643cad5c.css rel=prefetch> <link href=/static/dist/css/chunk-63b82705.d2b7ad58.css rel=prefetch> <link href=/static/dist/css/chunk-716622da.8a497f1a.css rel=prefetch> <link href=/static/dist/js/chunk-13070ec1.cc5aaa8f.js rel=prefetch> <link href=/static/dist/js/chunk-1f6eb24a.bca948d6.js rel=prefetch> <link href=/static/dist/js/chunk-2450c4ac.58e1bc6a.js rel=prefetch> <link href=/static/dist/js/chunk-24a27c0c.0ab7f6d8.js rel=prefetch> <link href=/static/dist/js/chunk-25dec777.2148f1f7.js rel=prefetch> <link href=/static/dist/js/chunk-3a7e7ac7.513dffb8.js rel=prefetch> <link href=/static/dist/js/chunk-3ac3afd8.6c148bd8.js rel=prefetch> <link href=/static/dist/js/chunk-3b4a96bb.73517657.js rel=prefetch> <link href=/static/dist/js/chunk-42b28a6b.1e8780b2.js rel=prefetch> <link href=/static/dist/js/chunk-517ab105.1e512cbc.js rel=prefetch> <link href=/static/dist/js/chunk-56490945.c3e3cef6.js rel=prefetch> <link href=/static/dist/js/chunk-63b82705.f1066fe6.js rel=prefetch> <link href=/static/dist/js/chunk-716622da.244a901e.js rel=prefetch> <link href=/static/dist/css/app.a627b381.css rel=preload as=style> <link href=/static/dist/css/chunk-vendors.3fe6fb1a.css rel=preload as=style> <link href=/static/dist/js/app.a15d8424.js rel=preload as=script> <link href=/static/dist/js/chunk-vendors.eac65f44.js rel=preload as=script> <link href=/static/dist/css/chunk-vendors.3fe6fb1a.css rel=stylesheet> <link href=/static/dist/css/app.a627b381.css rel=stylesheet> </head> <body><noscript><strong>We're sorry but iview-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript> <div id=app></div> <script src=/static/dist/js/chunk-vendors.eac65f44.js></script> <script src=/static/dist/js/app.a15d8424.js></script> </body> </html> 帮我整理一下代码
这是一个 HTML 页面的代码。以下是格式整理后的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel=icon href=/static/dist/favicon.ico>
<title>Document</title>
<link href=/static/dist/css/chunk-13070ec1.ccda3c25.css rel=prefetch>
<link href=/static/dist/css/chunk-1f6eb24a.5552800c.css rel=prefetch>
<link href=/static/dist/css/chunk-2450c4ac.37f7ca9b.css rel=prefetch>
<link href=/static/dist/css/chunk-24a27c0c.d809b953.css rel=prefetch>
<link href=/static/dist/css/chunk-25dec777.b68c08db.css rel=prefetch>
<link href=/static/dist/css/chunk-3a7e7ac7.61f67a30.css rel=prefetch>
<link href=/static/dist/css/chunk-3ac3afd8.98bc23e9.css rel=prefetch>
<link href=/static/dist/css/chunk-3b4a96bb.a0ee3bc1.css rel=prefetch>
<link href=/static/dist/css/chunk-42b28a6b.64434a61.css rel=prefetch>
<link href=/static/dist/css/chunk-517ab105.39040074.css rel=prefetch>
<link href=/static/dist/css/chunk-56490945.643cad5c.css rel=prefetch>
<link href=/static/dist/css/chunk-63b82705.d2b7ad58.css rel=prefetch>
<link href=/static/dist/css/chunk-716622da.8a497f1a.css rel=prefetch>
<link href=/static/dist/js/chunk-13070ec1.cc5aaa8f.js rel=prefetch>
<link href=/static/dist/js/chunk-1f6eb24a.bca948d6.js rel=prefetch>
<link href=/static/dist/js/chunk-2450c4ac.58e1bc6a.js rel=prefetch>
<link href=/static/dist/js/chunk-24a27c0c.0ab7f6d8.js rel=prefetch>
<link href=/static/dist/js/chunk-25dec777.2148f1f7.js rel=prefetch>
<link href=/static/dist/js/chunk-3a7e7ac7.513dffb8.js rel=prefetch>
<link href=/static/dist/js/chunk-3ac3afd8.6c148bd8.js rel=prefetch>
<link href=/static/dist/js/chunk-3b4a96bb.73517657.js rel=prefetch>
<link href=/static/dist/js/chunk-42b28a6b.1e8780b2.js rel=prefetch>
<link href=/static/dist/js/chunk-517ab105.1e512cbc.js rel=prefetch>
<link href=/static/dist/js/chunk-56490945.c3e3cef6.js rel=prefetch>
<link href=/static/dist/js/chunk-63b82705.f1066fe6.js rel=prefetch>
<link href=/static/dist/js/chunk-716622da.244a901e.js rel=prefetch>
<link href=/static/dist/css/app.a627b381.css rel=preload as=style>
<link href=/static/dist/css/chunk-vendors.3fe6fb1a.css rel=preload as=style>
<link href=/static/dist/js/app.a15d8424.js rel=preload as=script>
<link href=/static/dist/js/chunk-vendors.eac65f44.js rel=preload as=script>
<link href=/static/dist/css/chunk-vendors.3fe6fb1a.css rel=stylesheet>
<link href=/static/dist/css/app.a627b381.css rel=stylesheet>
</head>
<body>
<noscript>
<strong>We're sorry but iview-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id=app></div>
<script src=/static/dist/js/chunk-vendors.eac65f44.js></script>
<script src=/static/dist/js/app.a15d8424.js></script>
</body>
</html>
阅读全文