Educoder CSS3选择器-属性选择器
2021/12/17 23:25:54
本文主要是介绍Educoder CSS3选择器-属性选择器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
CSS3选择器-属性选择器
文章目录
- CSS3选择器-属性选择器
- 第1关:CSS3-属性选择器相关概念
- 通关知识
- 第2关:CSS3-属性选择器
- 相关知识
- 属性选择器
- 文本对齐属性
- 编程要求
- 通关代码
- 第3关:CSS3-包含及连字符选择器
- 相关知识
- 属性值选择器
- 属性值的包含与连字符选择器
- 文本加粗的属性
- 元素背景色的设置
- 编程要求
- 通关代码
- 第4关:CSS3-前缀后缀选择器
- 相关知识
- 属性值前缀选择器
- 属性值的子串选择器
- 属性值后缀选择器
- 编程要求
- 通关代码
第1关:CSS3-属性选择器相关概念
通关知识
1、以下选项中,属于属性选择器的是(C) A、div>span{color:red;} B、#box{color:red;} C、span[id]{color:red;} D、span{color:red;} 2、样式规则如下: p[class $= en]{font-weight:bold;} 该样式规则将对选项(B)产生效果。 A、<p class="end">...</p> B、<p class="ten">...</p> C、<p class="pend">...</p> D、<p class="feand">...</p> 3、样式规则如下: div[name ~= ten]{border:1px solid blue;} 该样式规则将对选项(A)产生效果。 A、<div name="ten a1">...</div> B、<div name="ten-a1">...</div> C、<div name="tena1">...</div> D、<div name="div-ten">...</div> 4、样式规则如下: p[class |= en]{font-size:20px;} 该样式规则将对选项(D)产生效果。 A、<p class = "en able">...</p> B、<p class = "pen able">...</p> C、<p class = "enable">...</p> D、<p class = "en-able">...</p>
第2关:CSS3-属性选择器
相关知识
属性选择器
属性选择器用于选取带指定属性的元素。语法格式如下:
选择器[属性名]{属性:属性取值;}
例如: h1[id]{color:red;}
文本对齐属性
text-align属性是将块级标签以及单元格里面的文本内容进行相应的对齐。属性取值可以是:left、right、center、justify。
vertical-align属性是将行内元素一级单元格里面的文本内容进行相应的对齐。属性取值可以是:bottom、top、middle、baseline。
如果希望将块级元素内的文本设置为垂直居中,这里介绍一个巧妙的方法就是将文本行高line-height与块级元素的height值设置一样。如果设置不一样,会有怎样的结果呢?聪明的您,一定能试出规律的!
编程要求
请在右侧编辑器的Begin - End区域内使用属性选择器对含有title属性的<div>
标签中的文本进行样式设置,具体要求是:
- 先将文本字号大小值设置为25px
- 再将文本的水平对齐方式设置为居中。
通关代码
<!DOCTYPE html> <html> <head> <title>属性选择器</title> <style type="text/css"> div{ width:70px; height:40px; border:1px solid teal; float:left; } li{list-style:none;} /* ********* Begin ******* */ div[title]{ font-size: 25px; text-align: center; } /* ********* End ******* */ </style> </head> <body> <div name="a a1" class="a"></div> <div name="b-1" class="b" title="nice"><li>nice</li></div> <div name="b-2" class="b" title="to"><li>to</li></div> <div name="b-3" class="b" title="meet"><li>meet</li></div> <div name="b-4" class="b" title="you"><li>you</li></div> <div name="a a2" class="a"></div> </body> </html>
第3关:CSS3-包含及连字符选择器
相关知识
属性值选择器
属性值选择器选取带有指定属性及取值的元素。
语法格式如下: 选择器[属性名=属性取值]{属性:属性取值;}
例如: h1[id=yyy]{color:red;}
属性值的包含与连字符选择器
属性值的包含选择器选取属性值中包含指定词汇的元素。
语法格式如下: 选择器[属性名~=指定词汇]{属性:属性取值;}
属性值的连字符选择器选取带有以指定值开头的属性值的元素,该值必须是整个单词。
语法格式如下: 选择器[属性名~=前缀]{属性:属性取值;}
文本加粗的属性
font-weight设置字体的粗细,取值可以是bolder(特粗体)、bold(粗体)、normal(正常)、lighter(细体)或100~900之间的9个等级。
元素背景色的设置
background-color属性用于设置元素背景颜色。属性取值为颜色单词或颜色代码。
编程要求
请在右侧编辑器的Begin - End区域内使用属性选择器补全CSS样式。具体要求是:
- 将class属性取值为b的
<div>
标签中的文本加粗效果设置为bold - 将name属性取值中含有词汇a的
<div>
标签添加背景色,颜色值设为pink。 - 将name属性取值中前缀为b的
<div>
标签添加背景色,颜色值设为orange。
通关代码
<!DOCTYPE html> <html> <head> <title>属性选择器</title> <style type="text/css"> div{ width:70px; height:40px; border:1px solid teal; float:left; } li{list-style:none;} div[title]{ font-size:25px; text-align:center; } /* ********* Begin ******* */ div[class=b]{ font-weight: bold; } div[name~=a]{ background-color: pink; } div[name|=b]{ background-color:orange; } /* ********* End ******* */ </style> </head> <body> <div name="a a1" class="a"></div> <div name="b-1" class="b" title="nice"><li>nice</li></div> <div name="b-2" class="b" title="to"><li>to</li></div> <div name="b-3" class="b" title="meet"><li>meet</li></div> <div name="b-4" class="b" title="you"><li>you</li></div> <div name="a a2" class="a"></div> </body> </html>
第4关:CSS3-前缀后缀选择器
相关知识
属性值前缀选择器
属性值前缀选择器匹配属性值以指定值开头的每一个元素。
语法格式如下: 选择器[属性名^=指定的开头]{属性:属性取值;}
属性值的子串选择器
属性值的子串选择器匹配属性值中包含指定值的每一个元素。
语法格式如下: 选择器[属性名*=指定值]{属性:属性取值;}
属性值后缀选择器
属性值后缀选择器匹配属性值以指定值结尾的每一个元素。
语法格式如下: 选择器[属性名$=指定的结尾]{属性:属性取值;}
编程要求
请在右侧编辑器的Begin - End区域内使用属性选择器补全CSS样式。具体要求是:
- 将title属性取值中以n开头的
<div>
标签中的文本颜色设置为blue - 将title属性取值中含有o的
<div>
标签添中的文本颜色设置为red - 将title属性取值中结尾为t的
<div>
标签中的文本颜色设置为green
通关代码
<!DOCTYPE html> <html> <head> <title>属性选择器</title> <style type="text/css"> div{ width:70px; height:40px; border:1px solid teal; float:left; } li{list-style:none;} div[title]{ font-size:25px; text-align:center; } div[class="b"]{ font-weight:bold; } div[name~="a"]{ background-color:pink; } div[name|="b"]{ background-color:orange; } /* ********* Begin ******* */ div[title^="n"]{ color: blue; } div[title*="o"]{ color: red; } div[title$="t"]{ color: green; } /* ********* End ******* */ </style> </head> <body> <div name="a a1" class="a"></div> <div name="b-1" class="b" title="nice"><li>nice</li></div> <div name="b-2" class="b" title="to"><li>to</li></div> <div name="b-3" class="b" title="meet"><li>meet</li></div> <div name="b-4" class="b" title="you"><li>you</li></div> <div name="a a2" class="a"></div> </body> </html>
这篇关于Educoder CSS3选择器-属性选择器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-14CSS-Module学习:轻松入门指南
- 2024-11-12CSS9资料入门指南
- 2024-11-12CSS浮动资料详解:初学者指南
- 2024-11-12CSS选择器资料详解与实战教程
- 2024-11-12CSS样式资料:初学者必备指南
- 2024-11-11CSS项目实战:从入门到上手
- 2024-11-11CSS定位项目实战:新手指南
- 2024-11-11CSS浮动项目实战:初学者指南
- 2024-11-11CSS选择器项目实战:从入门到上手
- 2024-11-11CSS样式项目实战:新手入门指南