CSS에 "세부 사항 추가하기"(예제 상자 그림자)

Question

나는 네비게이션 바를 만들고 있는데, 본질적으로 밑바닥, 왼쪽 (첫 번째 자식) 및 오른쪽 (마지막 자식)에 상자 그림자가 있습니다.

내 구조는 <ul><li><a><span>

내가 ul li a { 0 1px 0 0 green }의 하단에있는 박스 그림자를 가지고 있고, 처음과 마지막 요소 ul li:first-child a { -1px 0 0 0 red }에 대한 측면에 상자 그림자를 추가 할 수 있습니다. 그러나 box-shadow 속성은 :first-child 선택자로 덮어 쓰여지고 있습니다 ... "이전 상자 그림자 스타일에 -1px 0 0 0 빨간색을 추가 할 수 있습니다."라고 말할 수있는 방법이 있습니까?

희망을 말하고 있습니다. 데모가 있습니다 : http://jsfiddle.net/LJj2p/

고마워요!

Answer 1

아니요. box-shadow을 덮어 쓰거나 더 높은 특이성을 가진 것으로 무언가에 추가 할 수 없습니다. :first-child/:last-child 경우에 한 번에 두 그림자를 모두 정의해야합니다.

그러나 의사 요소 you can effectively "add" a shadow을 사용하여 실제로는 추가하지는 않습니다.