개발자 도구의 Manipulate :: selection 의사 요소

Question

개발자 도구에서 : selection 의사 요소의 속성을 조정할 수 있습니까?

원본 CSS 파일을 수정하지 않고 배경 및 글꼴 색을 선택하여 테스트 할 수 있지만 페이지를 검사 할 때 의사 요소를 찾을 수 없습니다.

Answer 1

당신은 스타일 패널과 새 규칙을 선택 내에서 마우스 오른쪽 버튼으로 클릭 인터넷 익스플로러와 파이어 폭스에서이 작업을 수행 할 수 있습니다.

1. 

   크롬이있다

2. 이 속성

새로운 ::selection 규칙을 작성하고 추가 상황에 맞는 메뉴에서 새 규칙 추가 스타일 패널

선택 을 마우스 오른쪽 버튼으로 클릭 의 작은 아이콘 스타일 패널을 클릭하여 새 규칙을 만들 수 있습니다.

1. 클릭 스타일 패널에서 새 스타일 규칙 버튼을
2. 새로운 ::selection 규칙을 작성하고 추가 특성

Answer 2

::selection 의사 요소로 크롬의 개발 도구에서 사용할 수 있습니다 스타일 패널의 마지막 스타일 - 거의 가장 구체적인 스타일 인 것처럼 말입니다. 그것을 보려면 스타일 시트에 스타일 시트가 정의되어 있는지 확인한 다음 텍스트를 선택하고 선택한 단어/영역 중 하나를 검사하십시오.

으로는 @Sampson에 의해 언급, 당신은 또한 p::selection 또는 span::selection 같은 ::selection 단지 ::selection를 사용하여 스타일 또는 더 구체적인 선택기를 추가 할 수 있습니다. 사양에 따라, 당신은 단지 ::selection 의사 요소와 color, background-color, cursor, outline, text-decoration, text-emphasis-color 및 text-shadow에 영향을 미칠 수 있다는 사실을 명심하라.

::selection 의사를 사용할 때 또 다른 고려 사항은 대조가 부족한 선택 항목을 만들어 내게 될 가능성에 영향을 줄 수 있다는 것입니다. 또한 링크의 가시성에 영향을 줄 수도 있습니다. 이러한 경우에, 당신은 대조 시험관 도구를 사용하여 대비를 테스트 할 수 있습니다 당신은 링크에 대한보다 구체적인 ::selection 스타일을 만들 수 있습니다 - 같은 :

span::selection { 
 
    background-color: #b3d8fd; 
 
} 
 

 
a.footnote span::selection { 
 
    color: #920000; 
 
}