educoder实训平台----CSS3选择器-属性选择器

最新推荐文章于 2021-12-17 09:52:01 发布

白夜的月亮

最新推荐文章于 2021-12-17 09:52:01 发布

阅读量1.2k

点赞数

分类专栏： educoder平台实训html-web实训文章标签： css3 css html

本文链接：https://blog.csdn.net/m0_59076472/article/details/121885711

版权

educoder平台实训html-web实训专栏收录该内容

30 篇文章 14 订阅

订阅专栏

educoder实训平台----CSS3选择器-属性选择器

第1关：CSS3-属性选择器相关概念：

CBAD

第2关：CSS3-属性选择器

<!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;
           vertical-align:middle;
         }

        /* ********* 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-包含及连字符选择器

<!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 ******* */ 
        .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-前缀后缀选择器

<!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>

白夜的月亮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
educoder实训平台----CSS3选择器-属性选择器

educoder实训平台----CSS3选择器-属性选择器第1关：CSS3-属性选择器相关概念：CBAD第2关：CSS3-属性选择器<!DOCTYPE html><html> <head> <title>属性选择器</title> <style type="text/css"> div{ width:70px; height:40px;
复制链接

扫一扫