CSS3选择器-属性选择器
第1关：CSS3-属性选择器相关概念
1、以下选项中，属于属性选择器的是（ ） C.span[id]{color:red;}
2、样式规则如下： p[class $= en]{font-weight:bold;} 该样式规则将对选项（ ）产生效果。
B.<p class="ten">...</p>
3、样式规则如下： div[name ~= ten]{border:1px solid blue;} 该样式规则将对选项（ ）产生效果。 A.<div name="ten a1">...</div>
4、样式规则如下： p[class |= en]{font-size:20px;} 该样式规则将对选项（ ）产生效果。
D.<p class = "en-able">...</p>
第2关：CSS3-属性选择器
任务描述
本关任务：使用属性选择器设置文字样式。
相关知识
为了完成本关任务，你需要掌握：1.属性选择器用法，2.文本对齐方式设置，3.文本字号大小的设置。
属性选择器
属性选择器用于选取带指定属性的元素。语法格式如下： 选择器[属性名]{属性:属性取值;} 例如： h1[id]{color:red;}
文本对齐属性
text-align属性是将块级标签以及单元格里面的文本内容进行相应的对齐。属性取值可以是：left、right、center、justify。 vertical-align属性是将行内元素一级单元格里面的文本内容进行相应的对齐。属性取值可以是：bottom、top、middle、baseline。 如果希望将块级元素内的文本设置为垂直居中，这里介绍一个巧妙的方法就是将文本行高line-height与块级元素的height值设置一样。如果设置不一样，会有怎样的结果呢？聪明的您，一定能试出规律的！
编程要求
请在右侧编辑器的Begin - End区域内使用属性选择器对含有title属性的<div>标签中的文本进行样式设置，具体要求是： 1.先将文本字号大小值设置为25px 2.再将文本的水平对齐方式设置为居中。
<!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 ******* */*{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-包含及连字符选择器
任务描述
本关任务：使用属性值的包含及前缀选择器设置文字样式。
相关知识
为了完成本关任务，你需要掌握：1.属性值选择器用法，2.属性值包含与连字符选择器，3.文本粗细的设置，4.背景色的设置。
属性值选择器
属性值选择器选取带有指定属性及取值的元素。语法格式如下： 选择器[属性名=属性取值]{属性:属性取值;} 例如： h1[id=yyy]{color:red;}
属性值的包含与连字符选择器
属性值的包含选择器选取属性值中包含指定词汇的元素。语法格式如下： 选择器[属性名~=指定词汇]{属性:属性取值;}
属性值的连字符选择器选取带有以指定值开头的属性值的元素，该值必须是整个单词。语法格式如下： 选择器[属性名~=前缀]{属性:属性取值;}
文本加粗的属性
font-weight设置字体的粗细，取值可以是bolder（特粗体）、bold（粗体）、normal（正常）、lighter（细体）或100~900之间的9个等级。
元素背景色的设置
background-color属性用于设置元素背景颜色。属性取值为颜色单词或颜色代码。
编程要求
请在右侧编辑器的Begin - End区域内使用属性选择器补全CSS样式。具体要求是： 1.将class属性取值为b的<div>标签中的文本加粗效果设置为bold 2.将name属性取值中含有词汇a的<div>标签添加背景色，颜色值设为pink。 3.将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-前缀后缀选择器
任务描述
本关任务：使用属性值的前缀及后缀选择器设置文字样式。
相关知识
为了完成本关任务，你需要掌握：1.属性值前缀选择器，2.属性值的子串选择器，3.属性值的后缀选择器，4.文本颜色的设置。
属性值前缀选择器
属性值前缀选择器匹配属性值以指定值开头的每一个元素。语法格式如下： 选择器[属性名^=指定的开头]{属性:属性取值;}
属性值的子串选择器
属性值的子串选择器匹配属性值中包含指定值的每一个元素。语法格式如下： 选择器[属性名*=指定值]{属性:属性取值;}
属性值后缀选择器
属性值后缀选择器匹配属性值以指定值结尾的每一个元素。语法格式如下： 选择器[属性名$=指定的结尾]{属性:属性取值;}
编程要求
请在右侧编辑器的Begin - End区域内使用属性选择器补全CSS样式。具体要求是： 1.将title属性取值中以n开头的<div>标签中的文本颜色设置为blue 2.将title属性取值中含有o的<div>标签添中的文本颜色设置为red。 3.将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> CSS3选择器-属性选择器相关推荐
- CSS3 选择器——属性选择器
上一节在<CSS3选择器--基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分--属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
- HTML5属性选择器以什么开头,CSS3 选择器 属性选择器介绍
属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式.使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值. 从上 ...
- css3中的属性选择器有哪些,CSS3中属性选择器使用方法详解
css中属性选择器我感觉与css2有比较大的区别了,下面我整理了一些关于css3选择器的使用例子,希望对各位会带来帮助. 注释: 一.属性选择器除了IE6不支持外,其他的浏览器都能支持. 二.E[at ...
- 03-高级选择器,属性选择器,伪类选择器
高级选择器分为: 后代选择器 子代选择器 并集选择器 交集选择器 后代选择器 使用空格表示后代选择器.顾名思义,父元素的后代(包括儿子,孙子,重孙子) .container p{color: red; ...
- jq选择器||基本选择器 层级选择器 属性选择器 过滤选择器 表单过滤选择器
基本选择器 层级选择器 属性选择器 过滤选择器 表单过滤选择器 1. 基本选择器 1. 标签选择器(元素选择器) * 语法: $("html标签 ...
- web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
- CSS基础(part19)--CSS3属性选择器
学习笔记,仅供参考,有错必究 参考自:pink老师教案 CSS3属性选择器 属性选择器列表: 选择符 简介 E[att] 选择具有att属性的E元素 E[att="val"] 选择 ...
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)...
使用CSS3 选择器--笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
- 图解css3：核心技术与案例实战. 2.11 属性选择器
2.11 属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息.例如,通过id属性可以将不同DIV元素进行区分.CSS2中引入了一些属性选择器,这些选择器可基于元素的属性来匹配元素 ...
最新文章
- 当客户说“你们的价格太高了”
- sigterm sigint sigkill 区别
- 【风险管理】风控决策系统
- Google 击败苹果！| 极客头条
- .Net 读取xml
- 脉歌蓝牙耳机线评测_感受震撼，更贴耳的蓝牙耳机，脉歌MT70让你感受超值音效...
- Apache ShenYu源码阅读系列-Dubbo插件
- 打乱mysql数据顺序_打乱数据库表内的数据顺序
- java编程找出吸血鬼数字,找出四位數的所有吸血鬼數字（JAVA）
- .NET 针对465加密端口 加密协议SSL（Implicit SSL）进行的邮件发送
- COLA的扩展性使用和源码研究
- Cache的地址结构，tag到底与Cache什么关系，Cache容量与总容量，Cache行长，Cache字地址？
- 读论文：SELFEXPLAIN: A Self-Explaining Architecture for Neural Text Classifiers
- C语言:【换钱问题】人民币问题
- CSDN做测试的老师教你Jmeter生成压力测试报告
- 如何将swf格式转换为MP4格式
- Android Camera（九）Output and Cropping
- 在WSL中启动Ubuntu 20.04时出现错误[出现错误 2147942402 (0x80070002) (启动“ubuntu2004.exe”时)]
- 微信公众平台开发教程Java版(三) 消息接收和发送
- (原創) 07/21/1984 愛・おぼえていますか? (中森明菜)