이 비디오에서는 CSSA 선택기 문제 세트에 대한 솔루션을 살펴 보겠습니다.
그리고 나는 모든 문제를 위에서 아래로 갈 것입니다.
따라서 문제가 생긴 사람이 한 두 사람이라면 빨리 감을 수 있습니다.
그래서 우리는 첫 번째 비디오에서 첫 번째 비디오를 함께 만들어 본문 요소에이 색의 배경을 제공합니다.
그래서 우리는 몸의 배경이 우리를 위해서 절약 된 색이라고 말합니다.
브라우저 새로 고침에서로드하고 회색 배경을 볼 수 있습니다.
그래서 다음 요소는 H 요소를이 색으로 만듭니다.
그래서 배경을 제외하고는 같은 것을 제외하고는 우리는 단지 착색했다.
우리는 inheres를 저장하거나 H-1 그것은 보라색으로 변합니다.
페이지에 하나 이상의 H-1이 있다면 모두 보라색이 될 것입니다.
그래서 다음은 모든 H-2 요소를 주황색으로 만듭니다.
위의 두 가지와 똑같은 선택기.
오렌지색으로 만들려면 오렌지색으로 만들어야하지만 다른 색상 시스템을 사용할 수 있습니다. 그러면 네 색상의 모든 색상을 볼 수 있습니다.
그들은 오렌지색으로 변합니다.
다음 단계로 넘어 가서이 부분을 옆으로 옮겨 모든 동맹 요소를 파란색으로 만듭니다.
자신의 16 진수 파란색을 선택하십시오.
그렇게하기 위해 우리는 모든 동맹국을 선택하고 그들에게 색깔을 부여하고 16 진수의 파란색을 할 것입니다.
그래서 다른 어떤 것보다 더 파랗다면 여기에 무엇이든 넣을 수 있습니다.
첫 번째 채널은 빨간색이고 다음 두 개는 초록색임을 기억하십시오.
그래서 우리는 약간의 초록색을하고 나서 푸른 색을 잔뜩합니다.
그것을 저장하고 동맹국을 살펴보고 우리가 푸른 빛을 볼 수 있습니다.
이제 모든 단락의 배경을 노란색으로 변경하십시오.
우리가 유형의 모든 요소를 ​​선택하는 곳은 단지 하나뿐입니다.
그래서 모든 단락은 노란색 배경으로 저장됩니다. 그리고 우리는 많은 단락을 얻습니다.
다음으로 모든 입력을 선택하고 3 픽셀 적색 테두리를줍니다.
그래서 경계를 입력하고 이것을 수행하는 몇 가지 방법이 있습니다. 우리는 한꺼번에 그것을 할 수 있습니다.
3 픽셀 고체 빨간색 주문 및 우리 두 개의 입력 접두사 또는 단색 빨간색 테두리가 또는 우리가 별도로 할 수있는 테두리를 볼 수 있습니다 붉은 색 테두리가 3 픽셀이며 마지막으로 테두리 스타일 꽤 단단한 이유입니다.
이것을하는 것이 훨씬 쉽습니다.
그러나 가끔은 자바 스크립트를 할 때 이것을하고 싶을 것입니다.
우리는 단지 한 부분 만 업데이트하려고합니다.
따라서 사용자가 뭔가를 가리키면 빨간색 테두리에서 녹색 테두리로 변경하려고합니다.
우리는 단지 색을 바꾸기를 원할 것입니다. 우리는 스타일을 그대로 유지할 수 있습니다.
그래서 나는 이것을 이렇게 남겨 둘 것입니다.
다음으로 이제 클래스 선택기로 이동합니다.
그래서 Hello 클래스로 모든 것을 제공하십시오.
흰색 배경입니다.
그리고 실제로 우리가 한 가지만 보았습니다.
클래스와 함께 div 안에있는 첫 번째 단락.
안녕하세요.
그래서 우리는 그 클래스 점을 선택합니다.
안녕하세요 배경 흰색.
그리고이 단락을 여기서 볼 수 있습니다.
그것은 흰색으로 변합니다.
다음으로 ID가 2 픽셀의 단색 파란색 테두리 특수 요소를 제공합니다.
나만의 R.G. 파랗다.
그래서 이번에는 도트 대신에 해시 부호 나 호를 소프에게 사용하고 ID가 다시 볼 수있는 ID의 이름은 바로 이드입니다.
그리고 나서 우리는 두 개의 픽셀 솔리드 경계선을 픽셀 솔리드에 그리고 나서 R.G. 파랗다.
그리하여 0 빨간색 100 녹색 200 파란색을 갖게 될 것입니다. 우리가 신선하다면 ID가있는이 단락 주위에 2 픽셀의 파란색 경계선이 생기는 것을 볼 수 있습니다.
다음으로는 divs 25 픽셀 글꼴 안에 중첩 된 모든 단락을 만들고 힌트는이 속성 글꼴 Dasch 크기 25 픽셀을 사용합니다.
그래서 여기서해야 할 일은 모든 단락을 선택하는 것이 아니라 div 안에있는 단락을 원한다는 것입니다. 따라서 div 안에 있지 않은 단락이 있음을 알 수 있습니다.
글꼴 크기가 25 픽셀 인 것은 원하지 않습니다.
그래서 우리는이 자손 선택자를 div라고 쓰고 그 div의 모든 단락을 사용하여 모든 div에있는 단락이 어떤 div 이건 상관하지 않습니다. div의 단락 만 선택하고 글꼴 크기를 25 픽셀로 지정하여 새로 고침을 저장합니다. 그리고 이들 모두가 커지는 것을 볼 수 있지만, div 안에없는 문단은 div가 아닌 더 커지지 않습니다. 다음으로 입력 텍스트 만 입력하면 회색 배경이됩니다.
따라서 이것은 선택자의 또 다른 유형이며 특성을 기반으로합니다.
그래서 당신이하고 싶은 속성은 타입이 텍스트와 같은 곳을 찾는 것입니다.
그래서 기본적으로이 바로 입력은 텍스트와 동일합니다.
그래서 우리가하는 방식으로 입력을 입력 한 다음 대괄호를 대괄호로 묶고 대괄호를 사용합니다.
그리고 거기에 유형의 속성이 있고 텍스트와 동일한 부분을 찾고 있습니다. 그런 다음 배경 회색을 말합니다.
그리고 여기로 내려 가서 눈을 똑똑히 들여다 보면 회색 배경을 볼 수 있습니다.
다시 말하지만 Google에 연결된 모든 링크를 선택하려는 경우 유용합니다.
우리는 H.F를 기반으로 선택하거나 다른 속성을 선택할 수 있습니다.
다음은 세 번째 div 안에있는 두 단락에 분홍색 배경을 둡니다.
그래서이 사람은 조금 미쳤습니다.
HMO를 살펴 보겠습니다.
여기에 우리의 세 번째 div입니다 ..
첫 번째는 여기에 있습니다.
두 번째 단락은 여기에 있으며 세 번째 단락은 두 단락으로되어 있고 두 단락을 선택하고 분홍색 배경을주고 싶습니다.
그래서 우리가 전에했던 것은 여기에서 작동하지 않을 모든 div들의 모든 단락을 선택하는 것입니다.
우리가하고 싶은 일은 페이지의 세 번째 div 안에있는 모든 단락을 선택하는 것입니다.
그리고 세 번째 div를 지정할 수있는 방법은 형식의 끝을 사용하는 것입니다.
그래서 우리는 div와 type 3을 말할 것입니다.
그래서 우리에게 세 번째 div를주고 그 대신에 모든 단락을 주면 배경이 핑크색이고 새로 고침을하고 두 번 확인해 보도록하겠습니다.
여기에 첫 번째 div가 있습니다.
두 번째 div가 있습니다.
그리고 여기에 세 번째 div가 있습니다.
카디건으로 단락 시작하고 두 번째 단락이야.
우리 가디건에 간다.
나는 두 번째 단락이다.
다음으로 세 번째 div 안에이 두 번째 단락에 5 픽셀 테두리의 흰색 경계를 지정하십시오.
그래서 이것은 세 번째 div 안에 두 번째 단락 만 원한다는 것을 제외하고는 매우 유사합니다.
그럼 이건 그냥.
그래서 세 번째 div와 유형 3을 선택한 다음 모든 단락보다 단락과 유형을 선택하는 것과 동일한 작업을 수행합니다.
그리고 우리는 두 번째 것을 결합하여 결합 할 수 있습니다.
이것은 세 번째 div 대신 두 번째 단락을 선택하게 될 것이고 5 픽셀의 흰색 경계선 테두리를 5 픽셀 흰색으로 지정하려고합니다.
우리는 거기에 갈.
div의 두 번째 단락에 5 개의 흰색 단색 테두리가 있습니다.
첫 번째가 아닙니다.
다음으로 세 번째 div 엘리먼트의 흰색과 20 픽셀 폰트의 E-M을 만듭니다.
여기 E-M은 크로 너트 스케이트 보드입니다.
Krown을 모른다면 매우 맛있습니다.
어쩌면 과대 평가 된 것일 수도 있습니다.
뉴욕시에서 확실히 비싼 생과자.
도넛과 크루아상이 있습니다.
그래서 집에서 엉덩이 ipsum 어휘 대신 분명히 여기에.
그리고 우리는 그 E-M을 가져다가 화이트와 20 픽셀의 백조로 만들 것입니다.
그래서 우리가 세 번째 div 3을 선택한 다음 E-M 내부 만 선택해야했습니다.
그러면 모든 IEM을 선택하게되며 단지 하나만 존재하게됩니다.
그러나 둘 이상이 있다면 우리는 E-M의 첫 번째 형식이나 E-M을 단락 대신에 말하고 싶을 것입니다. 그러나 저는 지금 당장이 형식으로 남겨 둘 것입니다.
그리고 우리는 흰색과 컬러의 20 픽셀, 흰색과 글꼴의 크기를 20 픽셀로하고 싶습니다.
그리고 우리는 앞으로의 비디오에서 폰트와 글꼴 크기와 다른 것들을 이야기하는 데 시간을 할애 할 것임을 상기시킵니다.
우리는 거기에 갈.
흰색이고 글꼴 크기가 바뀝니다.
이제 우리는 제가 좋아하는 보너스 연습 중 일부에 참여하게되었습니다.
물건을 선택하고 조작하는보다 흥미로운 방법이 있습니다.
그래서 시작합니다.
체크 된 모든 체크 박스의 왼쪽 여백이 50 픽셀임을 보도록하겠습니다.
50 픽셀의 여백을 남겨 두어야합니다.
체크 된 요소를 선택하는 선택자가 있습니다.
그리고 그것은 단지 이것처럼 보입니다.
이것은 n 번째 유형과 같은 의사 선택기입니다.
그래서 우리가 찾고있는 것을 말하면됩니다.
그래서 나는 체크 된 모든 input을 체크 할 것입니다. 왜냐하면 체크 박스는 input type equals 체크 박스가 있다는 것을 기억하기 때문입니다. 주로 라디오 버튼만으로도 체크 할 수있는 다른 엘리먼트가 있습니다.
그래서 이것은 체크 된 라디오 버튼을 선택해도 괜찮습니다.
그래서이 콜론이 입력 된 것처럼 보입니다.
그리고 우리가하고 싶은 것은 왼쪽 여백 50 픽셀을 사용하는 것입니다.
그래서 이것은 우리가 미래의 비디오에서 추가 할 때 우리가 앞으로 올 것의 약간의 미리보기이며 체크 박스의 왼쪽에 약간의 공간을 추가 할 것입니다. 그래서 당신은 체크 된 것들을 볼 수 있습니다.
지금 내가 이것을 체크하면 이것은 체크되어 오른쪽 50 픽셀로 이동합니다.
선택을 취소하고 왼쪽으로 다시 이동하면
그래서 확인되었습니다.
다음 것.
이것은 아마도 내가 가장 좋아하는 것입니다.
HMO를 변경하지 않고 레이블 요소를 모두 대문자로 만듭니다.
그래서 저는 분명히 당신이 그걸 보길 원한다고 말했고 우리가 확실히 이것을 지나치지 않았기 때문입니다.
먼저 모든 레이블 요소를 선택하고 HMO를 변경하지 않고 대문자로 만드는 방법을 모른다고 가정 해 보겠습니다.
그럼 구글을 들고 검색을 해봅시다. 제가 전에 확실히 해왔 던 것입니다.
그래서 위로 올라가서 검색을 해 봅시다. 대문자를 평가하는 것이 가장 먼저 나타나는 것은 텍스트 변형과 텍스트 변형이며, 요소 텍스트에서 대문자 사용 방법을 지정한다는 것입니다.
텍스트를 모두 대문자 또는 소문자로 표시하거나 각 단어를 대문자로 표시하는 데 사용할 수 있습니다.
그러면 아래로 스크롤하여 구문을 살펴보고 자본화 한 것처럼 보입니다.
자본가의 첫 번째 대문자와 소문자.
그래서 우리는 대문자를 원합니다.
따라서 텍스트는 대문자를 변환합니다.
그리고 내가 방금 한 일은 실제로 당신에게 뭔가를 보여주기위한 것이 아니라, 내가 항상하고있는 것을보고있는 Google의 일에 기대하는 것입니다. 그렇다면 CSS를 대문자 C S 투명하게 처리하고 싶습니다.
그리고 리콜 할 속성이 너무 많기 때문에 검색 결과를 살펴 봅니다.
모두 기억할 수는 없습니다.
그래서 이것은 더 모호한 것들 중 하나입니다.
명확히.
그리고 우리가 이것을 새로 고치면 여기에있는 레이블을위한 것입니다.
그러니 그냥 우리 시간을 보여주기 위해 그걸 없애자.
이것들이 라벨입니다.
그리고 나서 우리가 이것을 더하고 대문자를 새로 고칩니다.
다음으로 ID 특수 녹색 및 100 픽셀 글꼴 크기의 요소 첫 문자를 만듭니다.
그래서 우리가 찾는 첫 번째 문자를 목표로하는 것은 우리에게 첫 문자를 보여주고 우리가 얻는 것을보아야 할 것입니다.
다른 의사 선택기가있는 것처럼 보입니다.
첫 번째 문자 C Ss 요소는 블록의 첫 번째 줄의 첫 번째 문자를 선택합니다.
예를 들어 첫 번째 편지를 보시면됩니다.
계속해 보도록하겠습니다.
우리는 우선 특별 ID와 그 편지를 먼저 선택하기를 원합니다.
그리고 우리는 그것을 녹색과 100 픽셀의 폰트 크기로 만들어서 녹색과 글꼴 크기를 100 픽셀로 저장하고 그 요소를 바로 여기에두고 싶습니다.
따라서 우리가 새로 고침 한 첫 번째 편지를 주시하고이 거대한 녹색 눈을 갖게됩니다.
다음 하나는 H-1 요소의 색을 파란색으로 바꾼 것입니다.
그래서 이것은 실제로 일종의 효과가있는 것이 일반적입니다.
보통 무언가에 마우스를 올리면 단추가 아주 미묘하고 그 위에 마우스를 올려 놓으면 작은 그림자가 생겨 약간 색이 조금씩 바뀌는 것처럼 보입니다. 방해 산만하지 않고 상호 작용 비트.
그래서 우리는 H-1을 선택할 것입니다. 그리고 이것은 실제로 모두 하나입니다.
그러나이 경우에는 단 하나 뿐이며 의사 선택 도구는 마우스를 올려 놓고 여기에 입력 한 내용은 사용자가 요소 위로 마우스를 가져갈 때만 적용됩니다.
그래서 우리는 색을 푸른 색으로 저장합니다.
여기에 우리 H-1이 있습니다.
호버링을 중지 할 때 마우스를 올려 놓으면 파란색으로 바뀌고 이전에 있던 모든 것으로 돌아갑니다.
그래서 마침내 방문한 요소를 회색으로 만들어 두 요소를 볼 수 있습니다.이 두 링크는 ​​실제로 내가 방문한 링크 인 Facebook에 대한 링크입니다.
그래서 기본적으로 보라색 크롬이 방문한 모든 사람들을 보라색으로 생각합니다.
그럼 내가 전에 없었던 링크를 놓자. 그러면 뭔가를 시작하게 만들고 페이지를 새로 고침한다는 것을 보여줄 것이다.
지금은 파란색이야.
왜냐하면 나는 거기에 없었기 때문이다.
그러니 이제는 그것을 떠나겠습니다. 나는 그것을 클릭하지 않을 것입니다.
우리는 방문한 사람들을 보라색이 아닌 보라색으로 보이기를 원합니다.
죄송합니다. 한번 방문한 사용자가 자주색이 아닌 회색이되기를 바랍니다.
그래서 우리는 pseudo 선택자가 visited라고 부르는 태그를 선택한 다음 회색으로 저장하려고합니다.
그리고 우리가 새로 고침하면.
여기 이걸 잘 보아라.
나는 글꼴을 조금 더 크게 만들 것이다.
새로 고침하기 전에 거기에 있었기 때문에 현재 보라색입니다.
이제는 훌륭합니다.
OK. 당신이 그 운동을 즐겼기를 바랍니다.
거기에는 많은 것들이 있습니다.
다른 셀렉터가 많이 있습니다.
그리고 제가 추가 할 한가지는 모든 솔루션에 대해 거의 모든 단일 솔루션에 대해 동일한 결과를 달성하기위한 적어도 하나 또는 두 가지 방법이 있다는 것입니다.
그래서 당신이 저와 다른 것을 가지고 있지만 여전히 효과가 있다면 그것은 훌륭합니다.
의견에 자유롭게 추가하십시오.
다른 사람들과 공유하십시오.
그것은 완전히 유효합니다.
이것은 내가 그랬을 것입니다.
또 하나.
분명히 사이트는별로 매력적이지 않습니다.
이것은 실제 사이트가 아닙니다.
우리는 다음 운동 비디오에서 아주 곧 실제 프로젝트를 진행할 것입니다.
우리는 실제로 조금 더 잘 디자인 된 작은 블로그 사이트를 만들 예정입니다.
이것보다 훨씬 좋게 보입니다.
이것은 단지 연습 일뿐입니다.