>  기사  >  웹 프론트엔드  >  의사 클래스와 의사 요소의 가중치

의사 클래스와 의사 요소의 가중치

php中世界最好的语言
php中世界最好的语言원래의
2018-03-12 16:32:551698검색

이번에는 의사 클래스와 의사 요소의 가중치에 대해 알려드리겠습니다. 의사 클래스와 의사 요소의 가중치를 사용할 때 주의 사항은 무엇인가요?

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{            margin: 0;            padding: 0;
        }        #a .b a{ 
            color: yellow;
        }        .b a{   
            color: pink;
        }        a:hover{ 
            color: red;
        }        /*
            分析:
            规则1:伪类(像:hover,:visited,:active,:link)的权重和类选择器是一样的
            规则2:伪元素,像before,after优先级和标签选择器是一样的(这一条了解一下,和这道题无关)
            
            #a .b a 的权重为:(0,1,1,1)
            .b a的权重为:(0,0,1,1)
            a:hover的权重为:(0,0,1,1)

            结论:
            #a .b a 的权重最高,所以,如果有这个样式的设置,页面上的a链接是黄色的,鼠标hover上去也是黄色的
            如果把#a .b a去掉,.b a的权重和a:hover的权重一致,那他们就看谁在最后面,在最后面写的会层叠掉前面的

         */
    </style></head><body>
    <div class="a" id="a">
        <div class="b"><a href="#">我是链接</a></div>
    </div></body></html>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 자료:

Rxjs 사용에 대한 자세한 설명

Python으로 작성된 알림 표시줄 스크립트 시작 도구

flv.js 및 video.js를 사용하여 라이브 비디오 효과 만들기

위 내용은 의사 클래스와 의사 요소의 가중치의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.