2018-10-10 22:03:03 +00:00
---
id: 58c383d33e2e3259241f3076
2020-12-16 07:37:30 +00:00
title: 使用属性选择器来设置元素的样式
2018-10-10 22:03:03 +00:00
challengeType: 0
2019-12-13 05:47:57 +00:00
videoUrl: 'https://scrimba.com/c/cnpymfJ'
forumTopicId: 301092
2021-01-13 02:31:00 +00:00
dashedName: use-attribute-selectors-to-style-elements
2018-10-10 22:03:03 +00:00
---
2020-12-16 07:37:30 +00:00
# --description--
2021-02-06 04:42:36 +00:00
我们已经通过设置元素的 `id` 和 `class` 来显示想要的样式。 这就是 ID 选择器和 Class 选择器。 另外,也还有其他的 CSS 选择器可以让我们给特定的元素设置样式。
2020-12-16 07:37:30 +00:00
2019-12-13 05:47:57 +00:00
让我们再次通过猫咪图片项目来练习 CSS 选择器。
2020-12-16 07:37:30 +00:00
2021-02-06 04:42:36 +00:00
在这个挑战里,我们需要使用 `[attr=value]` 属性选择器来修改 CatPhotoApp 中复选框的样式。 这个选择器使用特定的属性值来匹配和设置元素样式。 例如,下面的代码会改变所有 `type` 为 `radio` 的元素的外边距。
2019-12-13 05:47:57 +00:00
```css
[type='radio'] {
margin: 20px 0px 20px 0px;
}
```
2020-12-16 07:37:30 +00:00
# --instructions--
2018-10-10 22:03:03 +00:00
2021-01-08 19:20:48 +00:00
请使用 `type` 属性选择器,设置复选框的上外边距为 10px, 下外边距为 15px。
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
# --hints--
2018-10-10 22:03:03 +00:00
2021-01-08 19:20:48 +00:00
应使用 `type` 属性选择器来匹配复选框。
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
```js
assert(
code.match(
2021-02-06 04:42:36 +00:00
/< style > [ \s\S]*? \[\s*?type \s*?= \s*?("|')checkbox \1\s*? \]\s*?{[ \s\S]*?}[ \s\S]*?< \/style>/gi
2020-12-16 07:37:30 +00:00
)
);
2018-10-10 22:03:03 +00:00
```
2020-12-16 07:37:30 +00:00
复选框的上外边距应为 10px。
```js
assert(
(function () {
var count = 0;
$("[type='checkbox']").each(function () {
if ($(this).css('marginTop') === '10px') {
count++;
}
});
return count === 3;
})()
);
2018-10-10 22:03:03 +00:00
```
2020-12-16 07:37:30 +00:00
复选框的下外边距应为 15px。
```js
assert(
(function () {
var count = 0;
$("[type='checkbox']").each(function () {
if ($(this).css('marginBottom') === '15px') {
count++;
}
});
return count === 3;
})()
);
2018-10-10 22:03:03 +00:00
```
2019-12-13 05:47:57 +00:00
2021-01-13 02:31:00 +00:00
# --seed--
## --seed-contents--
```html
< link href = "https://fonts.googleapis.com/css?family=Lobster" rel = "stylesheet" type = "text/css" >
< style >
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
.silver-background {
background-color: silver;
}
< / style >
< h2 class = "red-text" > CatPhotoApp< / h2 >
< main >
< p class = "red-text" > Click here to view more < a href = "#" > cat photos< / a > .< / p >
2021-09-22 15:34:59 +00:00
< a href = "#" > < img class = "smaller-image thick-green-border" src = "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt = "A cute orange cat lying on its back." > < / a >
2021-01-13 02:31:00 +00:00
< div class = "silver-background" >
< p > Things cats love:< / p >
< ul >
< li > cat nip< / li >
< li > laser pointers< / li >
< li > lasagna< / li >
< / ul >
< p > Top 3 things cats hate:< / p >
< ol >
< li > flea treatment< / li >
< li > thunder< / li >
< li > other cats< / li >
< / ol >
< / div >
< form action = "https://freecatphotoapp.com/submit-cat-photo" id = "cat-photo-form" >
< label > < input type = "radio" name = "indoor-outdoor" checked > Indoor< / label >
< label > < input type = "radio" name = "indoor-outdoor" > Outdoor< / label > < br >
< label > < input type = "checkbox" name = "personality" checked > Loving< / label >
< label > < input type = "checkbox" name = "personality" > Lazy< / label >
< label > < input type = "checkbox" name = "personality" > Energetic< / label > < br >
< input type = "text" placeholder = "cat photo URL" required >
< button type = "submit" > Submit< / button >
< / form >
< / main >
```
2020-12-16 07:37:30 +00:00
# --solutions--
2021-01-13 02:31:00 +00:00
```html
< link href = "https://fonts.googleapis.com/css?family=Lobster" rel = "stylesheet" type = "text/css" >
< style >
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
.silver-background {
background-color: silver;
}
[type='checkbox'] {
margin-top: 10px;
margin-bottom: 15px;
}
< / style >
< h2 class = "red-text" > CatPhotoApp< / h2 >
< main >
< p class = "red-text" > Click here to view more < a href = "#" > cat photos< / a > .< / p >
2021-02-06 04:42:36 +00:00
2021-09-22 15:34:59 +00:00
< a href = "#" > < img class = "smaller-image thick-green-border" src = "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt = "A cute orange cat lying on its back." > < / a >
2021-02-06 04:42:36 +00:00
2021-01-13 02:31:00 +00:00
< div class = "silver-background" >
< p > Things cats love:< / p >
< ul >
< li > cat nip< / li >
< li > laser pointers< / li >
< li > lasagna< / li >
< / ul >
< p > Top 3 things cats hate:< / p >
< ol >
< li > flea treatment< / li >
< li > thunder< / li >
< li > other cats< / li >
< / ol >
< / div >
2021-02-06 04:42:36 +00:00
2021-01-13 02:31:00 +00:00
< form action = "https://freecatphotoapp.com/submit-cat-photo" id = "cat-photo-form" >
< label > < input type = "radio" name = "indoor-outdoor" checked > Indoor< / label >
< label > < input type = "radio" name = "indoor-outdoor" > Outdoor< / label > < br >
< label > < input type = "checkbox" name = "personality" checked > Loving< / label >
< label > < input type = "checkbox" name = "personality" > Lazy< / label >
< label > < input type = "checkbox" name = "personality" > Energetic< / label > < br >
< input type = "text" placeholder = "cat photo URL" required >
< button type = "submit" > Submit< / button >
< / form >
< / main >
```