HTML, CSS

(73)CSS_css우선순위

빠스무 2023. 4. 5. 16:12
728x90
 

(66)CSS_기본문법

trangsfrom 2차원 좌표에서 요소를 변형시키는 속성 tramslate : 이동 rotate : 회원 scale : 확대, 축소 skew : 경사, 비틀기 ✔ 벤터 프리픽스(vender prefix) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을

jm-rograming.tistory.com

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css 우선순위</title>
    <style>
        #id-style{
            background-color: deeppink;
        }
        #id-style2{
            background-color: deepskyblue;
        }
        div{
            display: block;
            padding: 30px;
            margin: 30px;
            background-color: gold;
        }
        .class-stlye3{
            background-color: beige !important;
        }
        .class-stlye2{
            background-color: pink;
            font-size: 25px;
        }
        .class-style{
            background-color: greenyellow;
           
        }
        ul > li.li-class{
            background-color: orange;
        }
        ul > li{
            background-color: violet;
        }
    </style>
    <link rel="stylesheet" href="./CSS/css2.css">
</head>
<body>
    <h2>css 우선순위</h2>
    <div style="background-color: aqua;">div 1번(인라인 스타일 우선: aqua)</div>
    <div id="id-style" class="class-stlye">div 2번(id 점수 우선: deeppink)</div>
    <div class="class-style">div 3번(class 점수 우선: greenyellow)</div>
    <div class="class-stlye2 class-style">div 4번(같은 속성의 경우 나중에 적용한 속성이 우선: greenyellow)</div>
    <div>div 5(같은 요소일 경우 나중에 적용한 속성이 우선:purple)</div>
    <ul>
        <li class="li-class">li 1번(점수가 높은 속성이 적용: orange)</li>
    </ul>
    <div id="id-style2" class="class-stlye3">div 6번(!important 우선)</div>
</body>
</html>