zoukankan      html  css  js  c++  java
  • CSS(二):选择器

    一、基本选择器

    1、标签选择器

    HTML标签作为标签选择器的名称,例如<h1>~<h6>、<p>等。

    语法:

    p{font-size: 16px;}

    p:标签选择器。

    font-size: 16px; 声明。

    font-size:属性。

    16px 属性值。

    示例:

     1 <!DOCTYPE>
     2 <html>
     3 <head>
     4   <meta charset="utf-8" />
     5   <title>基本选择器</title>
     6   <style type="text/css">
     7      /*多行注释:标签选择器*/
     8      p{
     9           color: red;
    10      }
    11      h1{
    12           font-weight: normal;
    13           font-size: 12px;
    14      }
    15   </style>
    16 </head>
    17 <body>
    18     <p>我是p标签</p>
    19     <h1>我是h1标签</h1>
    20 </body>
    21 </html>

    效果:

    2、类选择器

    语法:

    .class {font-size:16px;}

    .class:类选择器。

    class:类名称。

    font-size:16px;声明。

    font-size:属性。

    16px:属性值。

    注意:

    类选择器一定以"."开头,后面跟类名。

    使用类选择器:
    <标签名 class="类名称">标签内容</标签名称>
    注意:

    网页中可给不同标签使用相同的class。

    示例:

    <!DOCTYPE>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>类选择器</title>
      <style type="text/css">
         /*类选择器:.class*/
         .box{
          font-weight: bold;
          font-size: 16px;
          color: blue;
         }
      </style>
    </head>
    <body>
        <div class="box">我是DIV</div>
    </body>
    </html>

    效果:

    3、ID选择器

    id选择器可以为标有特定id的HTML元素指定特定的样式。

    语法:
    #id名称{声明}
    注意:
    ID选择器以“#”开头,后面跟选择器名称.

    #id {font-size:16px;}

    #id:ID选择器。

    id:id名称。

    font-size:16px;声明。

    font-size:属性。

    16px:属性值。

    使用ID选择器:
    <标签名 id="ID选择器名称">标签内容</标签名>
    注意:

    网页中标签的ID不能重复,唯一存在。

    <!DOCTYPE>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>类选择器</title>
      <style type="text/css">
         /*ID选择器:.#ID名称*/
         #small{
             background: red;
             font-size: 20px;
         }
      </style>
    </head>
    <body>
        <span id="small">我是span标签</span>
    </body>
    </html>

    效果:

    在现代布局中,id选择器常常用于建立派生选择器

    例如:

    #sidebar p{
        font-style: italic;
        text-align: right;
        margin-top: 1em;
    }

    上面的样式只会应用于出现在id是sidebar的元素内的段落。

    即使被标注为sidebar的元素只能在文档中出现一次,这个id选择器作为派生选择器也可以被使用很多次。

    例如:

    #sidebar p{
        font-style: italic;
        text-align: right;
        margin-top: 1em;
    }
    
    #sidebar h2{
        font-size: 1em;
        font-weight: normal;
        font-style: italic;
        margin: 0;
        line-height: 1.5;
        text-align: center;
    }

    在这里,与页面中的其他 p 元素明显不同的是,sidebar 内的 p 元素得到了特殊的处理,同时,与页面中其他所有 h2 元素明显不同的是,sidebar 中的 h2 元素也得到了不同的特殊处理。

    二、复合选择器

    1、并集选择器(又称群组选择器)

    示例
    p,#id,.class{
                 font-weight: normal;
                 font-size: 12px;
    }

    经验:
    1、多个选择器之间可以是多个不同或相同的类型。
    2、多个选择器之间必须使用英文半角输入法逗号","隔开。

    示例:

    <!DOCTYPE>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>类选择器</title>
      <style type="text/css">
      /* 实现效果:文字都是红色*/
      /* 实现方式1:使用各自的选择器实现*/
         /* h3{
              color: red;
          }
          .two{
              color: red;
          }
          p{
              color: red;
          }
          #four{
              color: red;
          }*/
         /*实现方式2:使用并集选择器,可以减少代码的书写*/      
         h3,.two,p,#four{
             color: red;
         }
         /*使用了并集选择器之后,还可以在单独设置p标签*/ 
         p{
             font-size: 50px;
         }   
      </style>
    </head>
    <body>
        <h3>第一个标题</h3>
        <h2 class="two">第二个标题</h2>
        <p>第二段文字内容</p>
        <h1 id="four">第三个标题</h1>
    </body>
    </html>

    效果:

    2、交集选择器(指定标签选择器)

    语法:
    h3.second{
              font-size:14px;
              color:green;
    }
    经验:
    1、格式为:标签+类选择器 或 标签+ID选择器。
    2、选择器之间不能有空格。

    示例:

    <!DOCTYPE>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>交集选择器(指定标签选择器)</title>
    </head>
    <body>
        <h3>第一个标题</h3>
        <h3 class="two">第二个标题</h3>
        <p class="two">第二段文字内容</p>
        <h1 id="four">第三个标题</h1>
    </body>
    </html>

    a、先定义一个h3选择器,字体颜色为blue:

    h3{
         color: blue;
    }

    这是查看效果:

    这是所有的h3标签的字体颜色都会变成蓝色,这并不是我们想要的效果。

    b、定义类选择器:

    .two{
            color: blue;
    }

    这是在查看网页效果:

    这是所有class为two的标签的字体颜色都变为了蓝色。

    c、定义交集选择器

    h3.two{
            color: blue;
    }

    这是在查看网页的效果:

    这时会发现,只有第二个h3标签的字体颜色变成了蓝色,其他标签的字体颜色不会变。

    完整示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>交集选择器(指定标签选择器)</title>
        <style type="text/css">
        /*所有h3标签的文字都会变成蓝色*/
        /*  h3{
            color: blue;
        } */
        /*所有class为two的标签的字体颜色都变成了蓝色*/
        /*   .two{
            color: blue;
        } */
        /*读法:名字为two的h3标签
          只有第二个h3标签的字体颜色才会变成蓝色,p标签的颜色不会变
          写法:标签+类选择器
        */
        h3.two{
            color: blue;
        }
        /*
        读法:名字为two的p标签
        只有p标签的字体颜色才会变成黄色,h3标签的颜色不会变
        */
        p.two{
            color: yellow;
        }
        /*
        写法:标签+ID选择器
        */
        h1#four{
            color: green;
        }
        </style>
    </head>
    <body>
        <h3>第一个标题</h3>
        <h3 class="two">第二个标题</h3>
        <p class="two">第二段文字内容</p>
        <h1 id="four">第三个标题</h1>
    </body>
    </html>

    效果:

    3、后代选择器
    语法:
    p a{
         font-size:14px;
         color:green;
    }
    经验
    1、选择器之间可以是多个不同或相同类型并有层级关系的;
    2、选择器之间用空格隔开;

    3、格式:标签 标签选择器或标签 类选择器或标签 ID选择器。

    示例:

    先定义如下的HTML结构:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>后代选择器</title>
    </head>
    <body>
        <div class="box">
            <h3>hello</h3>
            <p>欢迎大家</p>
            <p>一起学习进步!</p>
        </div>
        <h3>Hello World</h3>
    </body>
    </html>

    效果:

    要实现的效果:Div里面的h3标签的字体变为红色,和DIV平级的h3标签的字体颜色不变。

    如果定义h3标签字体样式为红色:

    h3{
         color: red;
    }

    效果:

    这时会发现所有的h3标签的字体颜色都变为了红色。

    这时可以使用下面的样式:

     

    div h3{
           color: red;
    }

     

    效果:

    这样就只有DIV里面的h3标签的字体颜色变成红色。

    如果在DIV的p标签里面又添加了一个h3标签会是什么效果呢?HTML结构如下:

     

    <div class="box">
            <h3>hello</h3>
            <p>欢迎大家</p>
            <p>一起学习进步!
                <h3>我的p标签下面的h3</h3>
            </p>
    </div>
    <h3>Hello World</h3>

     

    效果:

    说明:

    只要h3在DIV里面,无论是直属的子级,或者是子级的子级,都会应用该样式。

    在看下面的例子:

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>后代选择器</title>
        <style type="text/css">
            /* 所有的h3标签的字体都会变成红色 */
           /*  h3{
                color: red;
            } */
            div h3{
                color: red;
            }
            div .first{
                font-weight: bold;
                color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <h3>hello</h3>
            <p class="first">欢迎大家</p>
            <p>一起学习进步!
                <h3>我的p标签下面的h3</h3>
            </p>
        </div>
        <h3>Hello World</h3>
    </body>
    </html>

     

    效果:

    .

     三、通配选择器

    使用*表示通配选择器,表示所有标签都应用该样式。

    例如:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>通配选择器</title>
        <style type="text/css">
           *{
               color: red;
           }
        </style>
    </head>
    <body>
        <div class="box">
            <h3>hello</h3>
            <p class="first">欢迎大家</p>
            <p>一起学习进步!
                <h3>我的p标签下面的h3</h3>
            </p>
        </div>
        <h3>Hello World</h3>
    </body>
    </html>

     效果:

     练习:

    实现如下的网页样式:

    HTML代码结构如下:

    “如梦令”为h3标签且class为title。

    “译文”为h3标签且id为translation。

    诗词和翻译段落都为p标签,但翻译段落的class为second。

    要去:

    1、“如梦令”和“译文”字体大小为20px;

    2、“译文”字体颜色为蓝色。

    3、翻译段落的字体颜色为绿色。

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>CSS练习</title>
        <style type="text/css">
            h3{
                font-size: 20px;
            }
            /*交集选择器(指定标签选择器)*/
            /*id为translation的h3标签的字体颜色为蓝色*/
            h3#translation{
                color: blue;
            }
            /*class为second的p标签的字体颜色为绿色*/
            p.second{
                color: green;
            }
        </style>
    </head>
    <body>
        <h3 class="title">如梦令</h3>
        <hr />
        <p>
            昨夜雨疏风骤,浓睡不消残酒。<br />
            试问卷帘人,却道"海棠依旧"。<br />
            "知否?知否?应为绿肥红瘦"
        </p>
        <h3 id="translation">译文</h3>
        <p class="second">
            昨夜雨点稀疏,晚风急猛,我虽然睡了一夜,<br />
            扔有余罪未消。试问卷帘的侍女:海棠花怎么<br/>
            样?她说海棠花依然如旧。知道吗?知道吗?<br />
            应是绿叶繁茂,红花凋零。
        </p>
    </body>
    </html>

    效果:

     三、选择器优先级

    1、标签选择器和类选择器比较

    看下面的示例代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>标签选择器和类选择器优先级比较</title>
        <style type="text/css">  
           /*标签选择器*/
           h2{
               color: red;
           }
           /*类选择器*/
           .first{
               color: blue;
           }
          
        </style>
    </head>
    <body>
        <h2>标签选择器</h2>
        <h2 class="first">类选择器</h2>
    </body>
    </html>

     效果:

    从截图中可以看出:类选择器的优先级高于标签选择器。

    注意:

    更换<style>标签中标签选择器和类选择器的先后顺序得到的结果也是一样的。

    2、标签选择器和ID选择器的比较

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>标签选择器和ID选择器的比较</title>
        <style type="text/css">  
            /*标签选择器*/
            h2{
                color: red;
            }
            /*id选择器*/
            #first{
                color: blue;
            }      
         </style>
    </head>
    <body>
            <h2>标签选择器</h2>
            <h2 id="first">id选择器</h2>
    </body>
    </html>

     效果:

    从图中可以看出:id选择器的优先级高于标签选择器。

    3、类选择器和id选择器的比较

    看下面的代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>类选择器和ID选择器的比较</title>
        <style type="text/css">  
            /*类选择器*/
            .first{
                color: red;
            }
            /*id选择器*/
            #second{
                color: blue;
            }      
         </style>
    </head>
    <body>
            <h2 class="first" id="second">类选择器和id选择器优先级比较</h2>
    </body>
    </html>

     效果:

    从截图中可以看出:id选择器的优先级高于类选择器。

    总结:

    基本选择器的优先级:ID选择器>类选择器>标签选择器。

  • 相关阅读:
    Java实现 蓝桥杯VIP 算法提高 高精度乘法
    Java实现 蓝桥杯VIP 算法提高 高精度乘法
    Java实现 蓝桥杯VIP 算法提高 高精度乘法
    Java实现 蓝桥杯VIP 算法提高 高精度乘法
    Java实现 蓝桥杯VIP 算法提高 高精度乘法
    Java实现 蓝桥杯VIP 算法提高 现代诗如蚯蚓
    Java实现 蓝桥杯VIP 算法提高 现代诗如蚯蚓
    Java实现 蓝桥杯VIP 算法提高 现代诗如蚯蚓
    Java实现 蓝桥杯VIP 算法提高 现代诗如蚯蚓
    ddd
  • 原文地址:https://www.cnblogs.com/dotnet261010/p/7194378.html
Copyright © 2011-2022 走看看