Educoder CSS3选择器-属性选择器

最新推荐文章于 2022-05-16 20:57:03 发布

是小鹿啊

最新推荐文章于 2022-05-16 20:57:03 发布

阅读量603

点赞数 2

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

来自是小鹿啊的博客

本文链接：https://blog.csdn.net/m0_51511286/article/details/122006390

版权

这篇博客详细介绍了CSS3的属性选择器，包括属性选择器的相关概念、包含及连字符选择器、前缀后缀选择器。内容涵盖了各种属性选择器的语法格式、实例应用和编程要求，旨在帮助读者掌握如何通过属性选择器实现对元素样式的精确控制。

摘要由CSDN通过智能技术生成

CSS3选择器-属性选择器

文章目录

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-属性选择器

编程要求

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