CSS 속성 선택자

//주어진 태그 이름을 가진 모든 요소를 ​​선택합니다.

body {
    background-color:rosybrown;
}

//마우스가 h1 요소 위에 있을 때 모든 h1 요소에 영향을 줍니다.

h1.hover {
    color: purple;
}

//'nth'는 'first', 'last' 또는 'only'로 대체될 수 있습니다. 이 선택기는 첫 번째 목록에서 두 번째 li 요소를 가져옵니다.

li:nth-child(2) {
    color: steelblue
}

//ID로 요소를 가져오고 해당 속성을 클릭되지 않은 링크로 정의합니다.

#google-link:link {
    color: blue;
} 

//이를 통해 방문한 후 속성을 조정하여 방문한 링크를 식별할 수 있습니다. 이 경우 여전히 google-link ID가 있는 요소에만 적용됩니다.

#google-link:visited {
    color: darkblue;
} 

//이것은 제목을 따르는 모든 링크에 영향을 미칩니다.

h2 + a {
    color:aliceblue;
}

//위의 선택기와 약간 다르며 부모를 공유하는 텍스트 영역을 따르는 모든 버튼을 가져옵니다.

textarea ~ button {}

//>는 하위 선택자입니다. 이 경우 ul 내의 모든 li을 가져옵니다.

ul > li {
    color:skyblue;
}

//후손 선택자, 모든 자식과 그 자식

ul li {
    color:black;
}

//자막 클래스가 있는 모든 h2

h2[class=subtitle] {
    color: magenta
}

//상위 디렉토리에 링크된 소스가 있는 페이지의 모든 이미지*/

img[src^="../img/"] {
    border: 10px solid black;
}

/문자열의 아무 곳에나 구문을 포함하려면 ^를 *로 교체/

//공백으로 구분된 클래스 이름 목록 내에서 찾을 수 있는 클래스 자막이 있는 모든 h2

h2[class~=subtitle] {
    background: green
}

//클래스 이름 목록에서 찾을 수 있고 공백 대신 단어를 감싸는 대시(-)가 있을 수 있는 클래스 자막이 있는 모든 h2

h2[class|=subtitle] {
    font-size: 12px;
}