프런트엔드 개발에서 알아야 할 몇 가지 CSS 속성 선택기!

작성자: John
전지
출처: smashingmagazine
좋아요를 누르고 보는 것이 습관이 되다
본고GitHubhttps://github.com/qq44924588...에 수록되어 있고 예전의 고찬 문장의 분류도 많고 제 문서와 교과서 자료도 많이 정리했습니다.스타와 보완을 환영합니다. 여러분의 면접은 시험점을 참조하여 복습할 수 있습니다. 우리 함께 뭔가를 했으면 좋겠습니다.
가독성을 확보하기 위해 본고는 직역이 아닌 의역을 채택하였다.
속성 선택기가 신기해요.그것들은 까다로운 문제에서 벗어나 클래스를 추가하는 것을 피하고 코드의 문제점을 지적하는 데 도움을 줄 수 있다.하지만 걱정하지 마세요. 속성 선택기는 매우 복잡하고 강력하지만 쉽게 배우고 사용할 수 있습니다.본문에서, 우리는 그것들이 어떻게 운행되는지 토론하고, 그것들을 어떻게 사용하는지에 대한 생각을 제시할 것이다.
일반적으로 HTML 속성을 네모난 괄호 안에 두는데 이를 속성 선택기라고 합니다.

[href] {
   color: red;
}

이렇게 하면 href 속성이 있고 더 특정한 선택기가 없는 요소의 텍스트 색은 입니다.속성 선택기의 특성은 클래스와 같습니다.
주: 바구니가 일치하는 CSS의 특이성에 대해 더 많이 읽을 수 있습니다CSS 특성: 당신이 알아야 할 것. 또는 스타워즈를 좋아한다면:CSS 기능 전쟁.
하지만 속성 선택기를 이용해서 더 많이 할 수 있다.당신의 DNA와 마찬가지로, 그것들은 여러 가지 속성 조합과 값을 선택하는 데 도움을 줄 내재된 논리를 가지고 있다.탭, 클래스, id 선택기처럼 정확하게 일치하지 않는 속성, 심지어 문자열 값과 일치할 수 있습니다.
속성 선택기
속성 선택기는 독립적으로 존재할 수 있다. 더욱 구체적으로 말하면 title 속성이 있는div 라벨을 모두 선택해야 한다면 이렇게 할 수 있다.

div[title]

그러나 당신은 다음과 같은 조작을 통해 title 속성을 가진div의 하위 요소를 선택할 수 있습니다

div [title]

설명이 필요한 것은 이들 사이에 빈칸이 없다는 것은 속성이 같은 원소에 있다는 것을 의미하고(원소와 클래스 사이에 빈칸이 없는 것과 같다) 그들 사이의 빈칸은 후대 선택기, 즉 이 속성을 가진 원소의 하위 원소를 선택하는 것을 의미한다.
너는 구체적인 속성 값의 속성을 더욱 세밀하게 선택할 수 있다.

div[title="dna"]

위에서 정확한 이름dna을 가진div를 선택했습니다. 선택기 알고리즘이 모든 상황을 처리할 수 있지만'dna is awesome'나'dnamutation'의 제목을 선택하지 않습니다.
주의: 대부분의 경우 속성 선택기에는 인용부호가 필요하지 않지만, 고화질 코드의 가독성을 높이고 경계용례가 정상적으로 작동할 수 있을 것이라고 믿기 때문에 사용합니다.
"my beautiful dna"또는 "mutating dna is fun!"등 타이틀에 포함된 요소를 선택하려면물결 기호(~)를 사용할 수 있습니다.

div[title~="dna"]

dna로 끝나는 타이틀, 예를 들어'dontblamemeblamemydna'나'his-stupidity-is-from-upbring-not-dna'와 일치하려면 dna 로고를 사용할 수 있습니다.

[title$="dna"]

$로 시작하는 타이틀, 예를 들어'dnamutants'나'dna-splicing-for-all'과 일치하려면 dna 로고를 사용할 수 있습니다.

[title^="dna"]

정확하게 일치하는 것은 도움이 되지만, 너무 꽉 끼는 것을 선택할 수도 있고, ^ 기호가 너무 넓어서 당신의 요구를 충족시키지 못할 수도 있습니다.예를 들어'genealogy'의 제목을 선택하지 않으려고 할 수도 있지만'gene'과'gene-data'를 선택합니다.파이프 피쳐(|)는 속성에서 완전하고 고유한 단어여야 하거나 ^로 구분되어야 합니다.

[title|="gene"]

마지막으로 하위 문자열과 일치하는 모호한 검색 속성 조작부호가 하나 더 있습니다. 속성에서 문자열을 나누면 - 이 단어만 떼어내면 됩니다.

[title*="dna"]

이 속성 선택기를 더욱 강하게 하는 것은 여러 개의 일치하는 인자를 가진 요소를 선택할 수 있도록 쌓아 놓을 수 있다는 것이다.
만약 dna 라벨을 찾으려면, 라벨이 하나 a 있고, "genes"로 끝나는class가 있다면, 다음과 같은 방법을 사용할 수 있습니다.

a[title][class$="genes"]

HTML 요소의 속성을 선택할 수 있을 뿐만 아니라 텍스트 인쇄에 위조 유형 요소를 사용할 수도 있습니다.

    What’s the first thing a biotech journalist does after finishing the first draft of an article?

.joke:hover:after {
   content: "Answer:" attr(title);
   display: block;
}

위의 코드는 마우스를 멈추면 사용자 정의 문자열을 표시합니다.
마지막으로 알아야 할 것은 속성 검색이 대소문자를 구분하지 않도록 로고를 추가할 수 있다는 것이다.닫는 대괄호 앞에 추가title:

[title*="DNA" i]

따라서 i,dna,DNA 등과 일치한다.
현재 우리는 속성 선택기를 어떻게 사용해서 선택하는지 보았고, 몇 가지 용례를 보여 준다.나는 그것들을 두 종류로 나눈다. 일반적인 용도와 진단이다.
일반 용도
유형 스타일 설정 가져오기
전자 우편이나 전화 같은 입력 유형에 대해 다른 스타일을 사용할 수 있다.

input[type="email"] {
   color: papayawhip;
}
input[type="tel"] {
   color: thistle;
}

전화 연결 표시
휴대전화에서 쉽게 전화를 걸 수 있도록 특정 사이즈의 전화번호를 숨기고 전화 링크를 표시할 수 있다.

span.phone {
   display: none;
}
a[href^="tel"] {
   display: block;
}

내부 링크 vs 외부 링크, 안전 링크 vs 비안전 링크
내부 및 외부 링크를 구분하고 보안 링크를 비보안 링크와 다르게 설정할 수 있습니다.

a[href^="http"]{
   color: bisque;
}
a:not([href^="http"]) {
  color: darksalmon;
}

a[href^="http://"]:after {
   content: url(unlock-icon.svg);
}
a[href^="https://"]:after {
   content: url(lock-icon.svg);
}

다운로드 아이콘
HTML5가 우리에게 준 속성 중 하나는 '다운로드' 입니다. 브라우저에 이 파일을 열려고 하지 않고 다운로드하라고 알려 줍니다.이것은 사람들이 방문하기를 원하지만 바로 열기를 원하지 않는 dnA 와 PDF 에 매우 유용하다.그것 또한 대량의 파일을 연속적으로 다운로드하는 작업 절차를 더욱 쉽게 한다.다운로드 속성의 단점은 기본적인 시각적 효과가 없어서 전통적인 링크와 구분할 수 없다는 것이다.보통 이것은 당신이 원하는 것이지만, 그렇지 않으면 다음과 같은 일을 할 수 있다.

a[download]:after { 
   content: url(download-arrow.svg);
}

PDF 및 DOCX 및 ODF 등의 다른 아이콘을 사용하여 파일 유형을 나타낼 수도 있습니다.

a[href$="pdf"]:after {
   content: url(pdf-icon.svg);
}
a[href$="docx"]:after {
   content: url(docx-icon.svg);
}
a[href$="odf"]:after {
   content: url(open-office-icon.svg);
}

이 아이콘들이 다운로드 가능한 링크에만 나타날 수 있도록 속성 선택기를 중첩할 수도 있다.

a[download][href$="pdf"]:after {
   content: url(pdf-icon.svg);
}

폐기/폐기된 코드 덮어쓰기 또는 재사용
우리는 모두 유행이 지난 코드가 유행이 지난 오래된 사이트를 만났다. HTML5 이전에, 당신은 속성으로 이루어진 스타일을 덮어쓰고 다시 적용해야 할 수도 있다.

Old, holey genes

div[bgcolor="#000000"] { /*override*/
   background-color: #222222 !important;
}
div[color="#FFFFFF"] { /*reapply*/
   color: #FFFFFF;
}

특정한 내연 양식을 다시 쓰다
때때로 너는 일부 내연 스타일을 만날 수 있다. 이런 스타일은 레이아웃에 영향을 줄 수 있지만, 이런 내연 스타일은 우리가 수정하지 않았다.그럼 다음은 한 가지 방법입니다.
만약 덮어쓸 정확한 속성과 값을 말하고, 그 값이 나타나는 어느 곳에서든 덮어쓰기를 원한다면, 이 방법의 효과가 가장 좋다.
이 예제에서 요소의 여백은 픽셀 단위로 설정되지만 사용자가 기본 글꼴 크기를 변경할 때 요소를 올바르게 재조정할 수 있도록 DOC에서 확장하고 설정해야 합니다.

div[style*="margin: 8px"] {
   margin: 1em !important;
}
 
 
      
 
 
     ，                 。   ，            ：
 
 


[accept]:after {
   content: "Acceptable file types: " attr(accept);
}
  
html 아코디언 메뉴em와 details 라벨은 HTML로만 확장/아코디언 메뉴를 만드는 방법summary으로 라벨과 아코디언을 열 때 보여줄 내용을 포함한다.details를 클릭하면 summary 태그가 확장되고 summary 속성이 추가됩니다. details 속성으로 열린 open 태그의 스타일을 쉽게 설정할 수 있습니다.
details[open] {
   background-color: hotpink;
}
  
링크 인쇄
URL을 플롯 스타일에 표시하여 속성 선택기를 이해할 수 있습니다.이제는 그것을 구축하는 방법을 알아야 한다. open 이 달린 모든 탭을 선택하고 위조 요소를 추가한 다음 details 과 href 로 인쇄하면 된다.
a[href]:after {
   content: " (" attr(href) ") ";
}
  
사용자 정의 프롬프트
속성 선택기를 사용하여 사용자 정의 툴팁을 만들면 재미있고 간단합니다.
[title] {
  position: relative;
  display: block;
}
[title]:hover:after {
  content: attr(title);
  color: hotpink;
  background-color: slateblue;
  display: block;
  padding: .225em .35em;
  position: absolute;
  right: -5px;
  bottom: -5px;
}

  
간편한 키
웹의 가장 큰 장점은 다양한 정보 접근 옵션을 제공하는 것이다.아주 드물게 사용되는 속성은 설정attr()의 능력이다. 그러면 키 조합과 content 설정의 알파벳을 통해 이 항목에 직접 접근할 수 있다(정확한 키 조합은 브라우저에 달려 있다).그런데 사이트에 어떤 버튼이 설치되어 있는지 알고 싶은 건 쉬운 일이 아니에요.
다음 코드는 이 키accesskey를 보여 줍니다.나는 마우스를 사용하지 않는다. 왜냐하면 대부분의 사람들이 accesskey 마우스를 사용하기 어려운 사람들이기 때문이다.두 번째 옵션으로 추가할 수 있지만, 유일한 옵션이 아니라는 것을 확인하십시오.
a[accesskey]:focus:after {
   content: " AccessKey: " attr(accesskey);
}
  
진단하다
이 옵션들은 구축 과정이나 복구를 시도할 때 로컬에서 문제를 식별할 수 있도록 도와줍니다.이러한 내용을 우리의 생산 사이트에 놓으면 사용자에게 오류가 발생할 수 있다.
controls 속성이 없는 audio
나는 :focus 라벨을 자주 사용하지 않지만, 라벨을 사용할 때 accesskey 속성을 포함하는 것을 자주 잊어버린다.결과: 아무 것도 표시되지 않았습니다.Firefox에서 오디오 요소를 숨기거나 문법이나 다른 문제가 나타나지 않도록 막는다면 이 코드는 문제를 해결하는 데 도움을 줄 수 있습니다.
audio:not([controls]) {
  width: 100px;
  height: 20px;
  background-color: chartreuse;
  display: block;
}

  
없음audio 텍스트controls 텍스트가 없는 그림은 접근성 악몽입니다.페이지를 보기만 하면 찾기가 어렵지만, 추가하면 튀어나옵니다. (페이지 그림을 불러오는 데 실패할 때alt문자는 그림의 역할을 더 잘 설명할 수 있습니다.)
img:not([alt]) { /* no alt attribute */ 
  outline: 2em solid chartreuse; 
}
img[alt=""] { /* alt attribute is blank */ 
  outline: 2em solid cadetblue; 
}

  
비동기식 Javascript 파일
웹 페이지는 내용 관리 시스템과 플러그인, 프레임워크와 코드의 집합으로 어떤 자바스크립트가 비동기적으로 불러오는지, 어떤 로드가 웹 페이지 성능 향상에 전념할 수 있는지 확인할 수 있습니다.
script[src]:not([async]) {
  display: block;
  width: 100%;
  height: 1em;
  background-color: red;
}
script:after {
  content: attr(src);
}
  
JavaScript 이벤트 요소
이벤트 속성이 있는 요소를 강조 표시하여 JavaScript 파일로 재구성할 수 있습니다.여기서 나는 주로 alt 속성을 주목하지만, 이것은 모든 자바스크립트 이벤트 속성에 적용된다.
[OnMouseOver] {
   color: burlywood;
}
[OnMouseOver]:after {
   content: "JS: " attr(OnMouseOver);
}
  
숨겨진 항목
숨겨진 요소를 보거나 입력한 위치를 숨기려면 그것들을 사용해서 표시할 수 있습니다
[hidden], [type="hidden"] {
  display: block;
}
  
원문: https://www.smashingmagazine....
코드 배치 후 존재할 수 있는 BUG는 실시간으로 알 수 없습니다. 이후에 이 BUG를 해결하기 위해 로그 디버깅을 하는 데 많은 시간을 들였습니다. 여기에 유용한 BUG 모니터링 도구Fundebug를 추천합니다.
커뮤니케이션
건품 시리즈의 글은 다음과 같습니다. 괜찮은 것 같습니다. 스타를 뽑아서 서로 공부하는 것을 환영합니다.
https://github.com/qq44924588...  
편폭의 제한 때문에 오늘의 공유는 여기까지입니다.더 많은 내용을 알고 싶으시다면 모든 글의 맨 밑에 있는 QR코드를 훑어보시고 저희 위챗 공식계정에 관심을 가져 더 많은 정보와 가치 있는 내용을 알아보세요.