CSS의 의사 요소 소개 및 의사 클래스와의 차이점

의사 요소

CSS 사양이 더욱 개선되면서 점점 더 많은 새로운 CSS 의사 요소가 추가되었다는 것을 알고 있지만 일상적인 개발에서는 일반적으로 사용하고 더 낙관적인 브라우저 지원 상황은 전후입니다. 그러나 우리가 일상적인 개발에서 사용하는 것은 다음과 같습니다: 부동 소수점을 지우고 요소를 추가하기 위해(IE8 브라우저에서 단일 콜론 사용을 고려) 그러나 콘텐츠의 가능한 값은 무엇입니까? ?
1. 문자열: 내용: “문자열” - 참고: 특수 문자는 유니코드로 인코딩되어야 합니다.
2. 이미지: 내용: url(/path/to/benjamin.png) - 이미지가 삽입됩니다. 원래 크기에서는 크기를 조정할 수 없습니다. 이미지가 그라디언트를 지원하므로 의사 요소에 그라디언트 효과를 사용할 수 있습니다.
3. 문자 없음: content: "" - 부동 소수점을 지우고 배경 이미지를 설정하는 데 더 유용합니다. 배경 이미지의 너비와 너비를 설정할 수 있으며, 배경 크기 속성을 사용하여 배경 이미지의 크기를 조정할 수도 있습니다.
4. Counter: content: counter(li)- :marker가 나타나기 전, 목록 일련 번호 스타일을 설정하는 데 더 유용합니다. 자세한 내용은 다음 코드를 참조하세요.

ol {   
    countercounter-reset: li;   
}   
ol>li {   
    position: relative;   
    padding-left: 2em;   
    line-height: 30px;   
    list-style: none;   
}   
ol>li:before {   
    position: absolute;   
    top: 8px;   
    left: 0;   
    height: 16px;   
    width: 16px;   
    line-height: 16px;   
    text-align: center;   
    content: counter(li);   
    countercounter-increment: li;   
    border-radius: 50%;   
    background-color: #ccc;   
    font-size: 12px;   
    color: #efefee;   
}

PS: 콘텐츠를 설정할 수 없습니다: "

Benjamin

" , HTML 코드 조각으로 구문 분석되지 않지만 문자열로 구문 분석됩니다.
5. content: attr(attrName)
content는 attr 함수를 사용하여 특히 편리합니다. 다음 코드를 참조하세요:

<style type="text/css">   
    .list li {   
        list-style: none;   
        margin-bottom: 20px;   
    }   
    .list li span {   
        vertical-align: middle;   
    }   
    .list li:before {   
        content: attr(data-index);   
        display: inline-block;   
        width: 20px;   
        height: 20px;   
        text-align: center;   
        color: #fff;   
        vertical-align: middle;           
        background-color: #f00;   
        border-radius: 50%;   
    }   
</style>   
<ul class="list">   
    <li data-index="1"><span>专注前端开发和用户体验</span></li>   
    <li data-index="2"><span>专注前端开发和用户体验</span></li>   
    <li data-index="3"><span>专注前端开发和用户体验</span></li>   
    <li data-index="4"><span>专注前端开发和用户体验</span></li>   
    <li data-index="5"><span>专注前端开发和用户体验</span></li>   
</ul>

앞서 말한 내용을 마치고 IE에서 발생하는 버그에 대해 이야기해 보겠습니다.
버그 설명: 언제 의사 클래스를 사용하여 "+"/"-" 이미지 전환을 구현하면 열린 클래스를 추가하고 제거하여 달성되지만 IE8에서는 효과가 이상하고 올바르게 렌더링될 수 없지만 다른 브라우저에서는 정상입니다.

.plus {   
    position: relative;   
    display: inline-block;   
    vertical-align: top;   
    width: 20px;   
    height: 20px;   
    margin-right: 24px;   
    border: 1px solid #fdaa47;   
    border-radius: 3px;   
    overflow: hidden;   
}   
/* 横向 */
.plus:before {   
    content: '';   
    position: absolute;   
    top: 10px;   
    left: 3px;   
    width: 14px;   
    height: 1px;   
    background-color: #fdaa47;   
    display: block;   
}   
/* 纵向 */
.plus:after {   
    display: block;   
    content: '';   
    width: 1px;   
    height: 14px;   
    background-color: #fdaa47;   
    position: absolute;   
    left: 10px;   
    top: 3px;   
}   
.opened:after {   
    top: -30px;   
}

addClass('opened') 및 RemoveClass('opened')를 통해 덧셈과 뺄셈을 전환할 때 시간: IE8 브라우저의 효과가 기대에 미치지 못했으며 일부 스타일에서는 현재 해결 방법은 다음과 같습니다.

<p class="parent">   
    <i class="plus"></i>   
</p>   
<script type="text/javascript">   
$(&#39;.parent&#39;).on(&#39;click&#39;, function() {   
    var $i = $(this).find(&#39;i&#39;),   
        className = $i.attr(&#39;class&#39;);   
    className = /opened/.test(className) ? &#39;plus&#39; : className +&#39; opened&#39;;   
    $i.replaceWith(&#39;<i class="&#39;+ className +&#39;""></i>&#39;);   
});   
</script>

의사 클래스 및 의사 요소의 유사점과 차이점
1. W3C CSS 2.1 선택기
는 의사 클래스와 의사 요소를 구분하지 않습니다.
의사 클래스: 첫 번째 자식, 을 사용합니다. >의사 요소: 첫 번째 줄
PS: 사양에는 링크의 여러 의사 클래스 쓰기 순서가 명확하게 언급되어 있습니다.
A:hover는 A:link 및 A:visited 뒤에 위치해야 합니다. 그렇지 않으면 계단식 규칙이 A:hover 규칙의 'color' 속성을 숨기게 됩니다. 마찬가지로 A:active가 A:hover 뒤에 배치되므로 사용자가 활성화하고 그 위로 마우스를 가져갈 때 활성 색상(라임)이 적용됩니다. A 요소.

2. CSS 선택기 레벨 3
이 사양에서는 의사 클래스와 의사 클래스를 구분하여 단일 콜론을 사용합니다. 요소는 이중 콜론으로 시작합니다. 예를 들어,
pseudo-class: first-child
pseudo-element:: first-line, ::first-letter, ::before, ::after
CSS 3이 CSS2.1 기반에는 여러 가지 의사 클래스가 있습니다: target, UI 요소 상태에 대한 의사 클래스: check 등, 구조적 의사 클래스: nth-child() 등. 자세한 내용은 사양을 참조하세요.

3. CSS 선택자 레벨 4 초안
이 초안에는 입력 제어 상태, 값 상태 및 값 확인과 관련된 클래스와 같은 새로운 의사 클래스가 많이 추가되었습니다. -클래스, 트리 구조의 의사 클래스, 그리드 구조의 의사 클래스 등

4. CSS 의사 요소 모듈 레벨 4 ——W3C 최초 공개 작업 초안, 2015년 1월 15일
다음과 같은 일부 의사 요소가 추가되었습니다. 강조 표시된 콘텐츠 선택 : ::selection, ::spelling-error 및 ::grammar-error 의사 요소,
자리 표시자 입력: ::placeholder 의사 요소.

5. 일반 애플리케이션
의사 클래스: 1) 링크 스타일
2) 인터레이스 색상 변경
의사 요소:
1 ) 의사 요소 after의 가장 일반적인 용도는 부동 소수점을 지우는 것입니다.
.fix{*zoom:1;}
.fix:after,.fix::after{display: content: "clear"; 높이: 0 ; 지우기: 둘 다; 오버플로: 숨김; 가시성: 숨김;}
2) 버튼 텍스트를 숨기기 위한 글자 간격
3) 첫 번째 줄 및 첫 글자 스타일

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