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>标签中的文本进行样式设置,具体要求是:

  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 ******* */
        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样式。具体要求是:

  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-前缀后缀选择器

相关知识

属性值前缀选择器

属性值前缀选择器匹配属性值以指定值开头的每一个元素。

语法格式如下: 选择器[属性名^=指定的开头]{属性:属性取值;}

属性值的子串选择器

属性值的子串选择器匹配属性值中包含指定值的每一个元素。

语法格式如下: 选择器[属性名*=指定值]{属性:属性取值;}

属性值后缀选择器

属性值后缀选择器匹配属性值以指定值结尾的每一个元素。

语法格式如下: 选择器[属性名$=指定的结尾]{属性:属性取值;}

编程要求

请在右侧编辑器的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> 


这篇关于Educoder CSS3选择器-属性选择器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程