Educoder CSS3选择器-属性选择器

2023-12-30 11:32:16

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>
上一篇：前端JS实现对地址字符串的切割（字符串函数的简单应用）


下一篇：OSPF综合实验