educoder CSS3选择器-属性选择器

Elvin域文

于 2021-12-12 10:19:00 发布

阅读量846

点赞数

本文链接：https://blog.csdn.net/m0_51787573/article/details/121883812

版权

CSS3 属性选择器 ID选择器类选择器样式规则

关键词由CSDN通过智能技术生成

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

1C 2B 3A 4D

1、以下选项中，属于属性选择器的是（    ）

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;}
该样式规则将对选项（   ）产生效果。

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、
<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;}
该样式规则将对选项（   ）产生效果。

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

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

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

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

        [class=b]{font-weight:bold;}

        [name~=a]{background-color:pink;}

        [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 ******* */ 

        [title^=n]{color:blue;}

        [title*=o]{color:red;}

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