CSS题目1

最新推荐文章于 2022-07-13 19:26:14 发布

shelleyHLX

最新推荐文章于 2022-07-13 19:26:14 发布

阅读量438

点赞数

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

本文链接：https://blog.csdn.net/qq_27009517/article/details/110498421

版权

前端专栏收录该内容

70 篇文章 4 订阅

订阅专栏

题1

同一个ID选择器在CSS样式设置时，可以被多次使用。A说法正确，B说法错误。

示例：在css样式中，可以多次使用同一个ID选择器。

//img.mukewang.com/climg/5f584a1b2977866e05001000.jpg

同一个网页文档中ID是唯一。C说法错误，D说法正确。

示例：元素的ID值是唯一的，不可以多次使用同一个ID。

//img.mukewang.com/climg/5f584a4d294f981a05001000.jpg

//img.mukewang.com/climg/5f584a6429fc566b05001000.jpg

题2

根据下面的代码，只让“JS基础”这几个字颜色为绿色，样式表中的代码要怎么写？（选择一项）

//climg.mukewang.com/58bfc6410001bf6d05000544.jpg

后代选择器中，选择器与选择器之间要使用空格隔开。A中#ul1 .li3只会选中包裹"JS基础"的li元素，所以A符合要求；

#ul1 是选中了第一个ul，所以B不符合要求;

代码中有两个类名为li3的li元素，所以选择器.li3会选中两个li，“JS基础”和“java框架都会变成绿色”，C不符合要求;

#ul1.li3注意两个选择器之间没有空格，表示选择既有id名ul1，又有类名li3的元素。代码中没有符合要求的元素，即没有选中任何元素。D不符合要求。

所以本题答案为A。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #ul1 .li3{
            color: green;
        }
    </style>
<body>
    <ul id="ul1">
        <li class="li1">html</li>
        <li class="li2">css</li>
        <li class="li3">js</li>
    </ul>
    <ul id="ul2">
        <li class="li1">java1</li>
        <li class="li2">java2</li>
        <li class="li3">java3</li>
    </ul>
</body>
</html>

题目3

分析下面的代码，选择下列选项中正确的选项？（选择一项）

//climg.mukewang.com/58bfbceb000129f605000321.jpg

本题代码中，div、p、h3类名都为“red”，选择器.red会把它们都选中，即为div、p、h3设置红色字体颜色。而选择器p.red表示选择类名为“red”的p元素，所以p单独设置字体颜色为红色，字体大小为30px。

h3和div没有设置30px的字体，所以A和C说法错误；

标签p文字的颜色是红色，字体大小是30px，B说法正确，D说法错误。

本题答案为B。

链接伪类的顺序，a:hover必须置于a:link和a:visited之后，才有效，a:active必须在a：hover之后，才有效。而link、visited两个伪类之间顺序无所谓，谁在前都可以。

所以：link>：visited>：hover>：active和：visited>：link>：hover>：active是正确的，本题答案为AC。

关于下面的代码，下列说法正确的是？（选择两项）

//climg.mukewang.com/58bfd6dc0001c09c05000325.jpg

题3

观察下面的代码，下列选项中正确的是？(选择二项)

//img.mukewang.com/climg/5f5360bf29873b3405001000.jpg

本题考查:first-child选择器。

:first-child是选取属于其父元素的首个子元素的指定选择器。本题代码中，父元素的首个li子元素是“家用电器“里的列表项和“清洁用品”里的“洗衣液”项，所以A和D说法正确，本题答案为AD。

题4

想要文本内容“JS”和“C++”的字体颜色变为红色，样式表中该怎样写？（选择两项）

//climg.mukewang.com/582aba9a0001f46604390494.jpg

如果我们只要文本内容 “C++”的字体颜色变为红色，其他的字体不变色，样式表中该怎样写？（选择两项）

//climg.mukewang.com/582abb850001ab5e04920489.jpg

关于html代码中列表和列表项的样式，下列说法正确的是？（选择二项）

关于下面代码的样式，下列说法正确的是？（选择一项）

//climg.mukewang.com/582abeac0001055c06510534.jpg

使用nth-of-type（）选择将段落3的字体颜色设置为红色，下列选项哪个可以实现？（选择一项）

//climg.mukewang.com/582abfb9000184ef04970441.jpg

下列哪个样式可以让“段落5”的字体颜色是红色？（选择二项）

//climg.mukewang.com/582ac170000158e304990420.jpg

:nth-last-of-type(n)是选择属于父元素的特定类型的倒数第n个子元素；

:last-of-type匹配属于其父元素的特定类型的最后一个子元素；

:nth-last-child(n)匹配属于其父元素的第n个子元素，不论元素的类型，从最后一个子元素开始计数；

本题代码中，“段落5”是body里面的倒数第一个子元素p中的文字。A中p:nth-last-of-type(1)和C中p:last-of-type都可以选中body的最后一个p元素。B中写法不对，没有:last-of-type(1)这种写法，D中p:nth-last-child没有设置元素的下标，应该写成p:nth-last-child(1){color: red;}。

所以本题答案为AC。

下列选项中哪个选择器可以设置input框的不可编辑状态（选择一项）

A： :hover 选择器用于选择鼠标指针浮动在上面的元素。

B： :enabled 选择器匹配每个已启用的元素（大多用在表单元素上）。

C： :disabled 选择器匹配每个被禁用的元素（大多用在表单元素上）。

D： :checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。

题目要求设置不可编辑状态，即禁用元素，所以本题答案为C。

下列关于:checked选择器说法正确的是？（选择二项）

本题考查:checked选择器的用法以及兼容性。

:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框，A说法正确。

:checked 选择器匹配每个已被选中的 input 元素、只用于单选按钮和复选框，不适用于所有表单元素，B说法错误。

目前主流的浏览器都能兼容，C说法正确，D说法错误。

所以本题答案为AC。

根据上面的代码，判断p标签里的字体颜色是什么？（选择一项）

//climg.mukewang.com/58bfe0e5000167f105000270.jpg

本题考查的是CSS中不同方式书写样式的优先级。

行内样式的优先级>内部样式的优先级。本题代码中，行内元素中是设置红色字体样式，所以本题答案为D。

根据代码，判断html代码中span标签里的字体颜色是什么？（选择一项）

//climg.mukewang.com/58bfe15e0001cce205000410.jpg

本题考查的是CSS中选择器的权值。

在样式表中，选择器的权值（权重）不同，哪个越高，样式表就用哪个。

一个ID选择器权值为100，一个类名选择器权值为10，一个标签选择器权值为1。那么计算一个完整的选择器时，可以通过（百位，十位，个位）这样的方式计算更简便。有几个ID选择器，就把数量填在百位上；有几个类名选择器，就把数量填在十位上；有几个元素选择器，就把数量填在个位数上。如#box #inner div 这个选择器中，包含2个ID选择器、0个类名选择器、1个标签选择器。那么就是（2,0,1），最终的权值就是201。

本题代码中，#div .p span权值是（1，1，1），span权值是（0，0，1），div p span权值是（0，0，3），#div p span权值是（1，0，2）。权值最大的是#div .p span，所以span字体颜色为蓝色，本题答案为A。