Css의 순서는 일반적으로 뒤에 나온 애들이 적용된다.
하지만 구체적으로 입력된 selector가 있다면 그 selector가 적용된다.
.post button:hover {
background-color: red;
color: #f1faee;
}
button:hover {
background-color: olive;
font-size: 10px;
}
보통이라면 button에 hover를 했을때 뒤에 입력된 olive 색으로 background color가 변해야겠지만
위에 적힌 button이 .post button으로 좀 더 구체적이기 때문에 위에 있는 button의 color인 red로 색이 적용된다.
만약 .post button이 아닌 그냥 button이였다면 olive로 적용된다.
하지만 반드시 위처럼 2개의 elemental이 아닌 순서도 있는데,
#id > .class > elemental 순서로 적용된다.
#one {
background-color: #e5989b;
border-width: 5px;
border-color: black;
border-style: solid;
box-sizing: border-box;
}
one id에 background color를 주고 border의 width, color, style을 주는데, border를 설정할때 저 3가지 요소가 없으면
보이지 않는다. box-sizing: border-box 를 넣으면 상자의 요소가 좌우에 맞춰 조정되는데, 기본적으로 border에 width로
값을 주면 굵어지기 때문에 좌우가 움직인다. 하지만 sizing 요소를 주면 움직이지 않고 맞춰진다.
추가로
border-style: soild none; 이런 값을 주면 상하는 선이 보이고 좌우는 선이 안보인다. 요소를 더 작성해서 상하좌우도 가능
#three {
background-color: #6d68;
border: 3px solid black;
border-left-width: 5px;
border-radius: 5px;
}
속기법으로 border: 굵기 스타일 색상 으로 값을 입력해도 가능
border-left-width 처럼 왼쪽만 굵게도 가능 border-right-color등 쓰임이 많다. border-radiou로 박스를 둥글게도 가능