css样式优先级示例

1.一个DIV中既有class又有id

复制代码
DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            #box1{color:red;}
            .box1{color:blue;}
            .box2{color:blue;}
            #box2{color:red;}
        style>
    head>
    <body>
        <div  class="box1" id="box1">
            Hello
        div>
        
        <div  class="box2" id="box2">
            Word
        div>
        
    body>
html>
复制代码

css样式优先级示例_第1张图片

 

 

2.一个div中有多个class

复制代码
DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            .red {color:red;}
            .blue{color:blue;}
        style>
    head>
    <body>
        <div  class="red blue" >
            Hello
        div>
    body>
html>
复制代码

 

复制代码
DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            .blue{color:blue;}
            .red {color:red;}
        style>
    head>
    <body>
        <div  class="red blue" >
            Hello
        div>
    body>
    
html>
复制代码

 

 3.伪类选择器与class

复制代码
DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            /*下边执行顺序不影响结果*/
            .red {color:red;}
            .red>div:first-child{color:pink;}/*作用域第1*/
            .red>div{color:blue;}/*作用域第2*/
            .green {color:green;}/*作用域第3*/
        style>
    head>
    <body>
        <div  class="red" >
            <div class="green">
                Hello
            div>
        div>
    body>
html>

你可能感兴趣的:(前端面试)