CSS3 선택기(1부)

1、给导航加分割线，左右

 .nav li::이전,.nav li::이후{

            콘텐츠:"";

            위치:절대;

            상단:14px;

            높이:25px;

            너비:1px; 

        }

     

        .nav li::이전{

            왼쪽:0;

            배경:-webkit-linear-gradient(아래로,#f06254,#ffffff,#f06254);

            배경:-moz-linear-gradient(아래로,#f06254,#ffffff,#f06254);

            배경:-o-linear-gradient(아래로,#f06254,#ffffff,#f06254);

            배경:-ms-linear-gradient(아래로,#f06254,#ffffff,#f06254);

            배경:선형 그라데이션(아래로,#f06254,#ffffff,#f06254);

        }

        .nav li::after{

            오른쪽:0;

            배경:-webkit-linear-gradient(아래로,#f06254,#bf554c,#f06254);

            배경:-moz-linear-gradient(아래로,#f06254,#bf554c,#f06254);

            배경:-o-linear-gradient(아래로,#f06254,#bf554c,#f06254);

            배경:-ms-linear-gradient(아래로,#f06254,#bf554c,#f06254);

            배경:선형 그라데이션(아래로,#f06254,#bf554c,#f06254);

        }

        

        

         .nav li:첫 번째-자식::이전{ 배경:없음;}

         .nav li:last-child::after{ 배경:없음;}

 

2、

 

html代码:

 

我链接的是PDF文件

我类name是icon

내가 좋아하는제목是더보기">내가 적제목是더보기

 

css代码  

 

a[클래스^=아이콘]{

  배경: 녹색;

  색상:#fff;//정义以아이콘开头的任何字符串

}

a[href$=pdf]{

배경: 주황색;

색상: #fff;define href pdf로 끝나는 문자열

}

a[제목*=더 보기]{

배경: 파란색;

색상: #fff; 제목으로 정의된 모든 문자열

}

예:

a[클래스^=열]{

배경:#fc0001;

}

a[href$=doc]{

배경:#007d02;

}

[제목*=상자]{

배경:#0000fe;

}

배경을 빨간색으로 하고 싶어요

배경을 빨간색으로 만들고 싶어요

배경을 빨간색으로 하고 싶어요

배경을 녹색으로 하고 싶어요

배경을 녹색으로 하고 싶어요

배경을 파란색으로 하고 싶어요

배경을 파란색으로 하고 싶어요

배경을 파란색으로 하고 싶어요

3,

구조적 의사 클래스 선택자루트

:root 선택자, 문자 그대로 루트 선택자

로 명확하게 이해할 수 있습니다.

E 요소가 위치한 문서의 루트 요소를 일치시키겠다는 의미입니다. HTML 문서에서 루트 요소는 항상

입니다.

(“:root” 선택기는 요소와 동일하며 간단히 말하면

입니다.

:루트{배경:주황색}

html {배경:주황색;}

얻는 효과는 동일합니다.

:root 방법을 사용하는 것이 좋습니다.

또한 IE９ 이하에서는 “:root”를 사용하여 를 구현할 수도 있습니다. hack 기능. )

4,

구조적 의사 클래스 선택자—

아님

:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：form {

input:not([type="submit"]){

  border:1px solid red;

}//意思是除了type=submit意外的input边框为红色

 

 

 

5、结构性伪类选择器—empty

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。

HTML代码：

我是一个段落

 

​

CSS代码：

p{

 background: orange;

 min-height: 30px;

}

p:empty {

  display: none;

}​

6、结构性伪类选择器—target

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

例:

Brand

  content for Brand

Brand

 content for jake

Brand

    content for aron

css 코드:

#브랜드:타겟 {

배경: 주황색;

색상: #fff;

}

#제이크:대상 {

배경: 파란색;

색상: #fff;

}

#아론:대상{

배경: 빨간색;

색상: #fff;

}

7, 구조적 의사 클래스 선택자—첫 번째 자식

“:first-child” 선택자는 상위 요소 E의 첫 번째 하위 요소를 선택하는 요소를 나타냅니다. 간단한 이해는 요소의 첫 번째 하위 요소를 선택하는 것입니다. 이는 하위 요소가 아니라 하위 요소라는 점을 기억하십시오.

HTML코드:

1. Link1
2. Link2
3. link3

CSS 코드:

ol > li:first-child{

색상: 빨간색;

}//html의 첫 번째 일련번호가 빨간색으로 변합니다. 순서가 지정되지 않은 목록인 경우 프런트 엔드의 시퀀스 아이콘 색상이 변경됩니다.

장자는 막내

와 정반대입니다.

8, 구조적 의사 클래스 선택자—nth-child(n)

“:nth-child(n)” 선택기는 상위 요소의 하나 이상의 특정 하위 요소를 찾는 데 사용됩니다. 여기서 "n"은 해당 매개변수이고 정수 값 (1,2,3,4) 또는 표현식(2n+1, -n+5) 및 키워드 (odd , even)이지만 매개변수 n의 시작 값은 항상 1입니다. 0. 즉, 매개변수 n의 값이 0인 경우 선택자는 일치하는 요소를 선택하지 않습니다.

HTML

코드:

1. 항목1
2. 항목2
3. 항목3
4. 항목4

​

CSS

코드:

ol > li:nth-child(2n){

배경: 주황색;

}//

":nth-child(n)" 선택기를 전달하고 매개변수는 "2n" 표현식을 사용합니다. 짝수 행 목록의 배경색은 주황색으로 설정됩니다.

9, 구조적 의사 클래스 선택자—nth-last-child(n)

“:nth-last-child(n)” 선택기는 이전 “:nth-child(n)” 선택기와 매우 유사합니다. "last"는 추가 ":nth-child(n)" 선택기와 동일한 역할을 합니다. 차이점 상위 요소의 마지막 하위 요소부터 계산하여 특정 요소를 선택하는 것입니다

ol > li:n번째-마지막-자식(5){

배경: 주황색;

}//목록에서 마지막에서 다섯 번째 항목을 선택하고 배경색을 주황색으로 설정합니다.

10, 최초 유형 선택기

“:first-of-type” 선택기는 “:first-child” 선택기와 유사하지만, 차이점은 가 요소를 지정한다는 것입니다. 유형, 주로 상위 요소 아래에서 특정 유형의 첫 번째 하위 요소를 찾는 데 사용됩니다.

":first-of-type" 선택기를 통해 컨테이너에서 div 를 첫 번째 로 배치합니다. p 요소(p가 반드시 컨테이너의 첫 번째 하위 요소일 필요는 없음) 배경색을 주황색으로 설정합니다.

.wrapper > p:최초 유형 {

배경: 주황색;

//마지막 유형선택기

“:last-of-type” 선택기는 “:first-of-type” 선택기와 기능이 동일합니다. 상위 요소 아래에 있는 유형의 마지막 하위 요소입니다.

11, n번째 유형(n)선택기

":nth-of-type(n)" 선택기는 ":nth-child(n)" 선택기와 매우 유사합니다. 상위 요소에 지정된 특정 유형의 하위 요소 수를 계산합니다. 요소의 하위 요소가 동일한 유형의 하위 요소일 뿐만 아니라 ":nth-of-type(n)" 선택기를 사용하여 상위 요소를 찾습니다. 자식 요소는 매우 편리하고 유용합니다. ":nth-of-type(n)" 선택기의 "n" 및 동일 선택기의 ":nth-child(n)""n" 매개변수로 이동합니다. 이는 특정 정수 또는 표현식일 수 있습니다. 키워드가 될 수도 있습니다.

예:.wrapper > p:nth-of-type(2n){

배경: 주황색;

} ":nth-of-type(2n)" 선택기를 사용하여 컨테이너 "div.wrapper" 배경이 주황색으로 설정되었습니다.

18

, n번째 마지막 유형(n)선택기

“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

通过“:nth-last-of-type(n)”选择器将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。

.wrapper > p:nth-last-of-type(3){

  background: orange;

}

 

12、only-child选择器

“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

示例演示

通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。

HTML代码：

  

我是一个段落

  

我是一个段落

  

我是一个段落

CSS코드:

.포스트 p {

배경: 녹색;

색상: #fff;

패딩: 10px;

}

.post p:only-child {

배경: 주황색;

}

13, 단일 유형 선택기

“:only-of-type”선택기는 상위 요소와 동일한 유형의 유일한 하위 요소인 요소를 선택하는 데 사용됩니다. 이해하기 쉽지 않을 수도 있습니다. 다른 방식으로 설명하겠습니다. “:only-of-type”은 요소에 여러 하위 요소가 있고 한 가지 유형의 하위 요소만 고유하다는 의미입니다. " :only-of-type" 선택기는 이 요소의 유일한 유형 하위 요소를 선택할 수 있습니다.

샘플 시연

":only-of-type" 선택기를 사용하여 컨테이너에 있는 단 하나의 div 요소의 배경색을 주황색으로 수정합니다. .

HTML코드:

나는 문단이다

나는 문단이다

나는 문단이다

저는 Div 요소입니다

저는 Div

입니다

• 나는 목록 항목입니다

나는 문단이다

CSS코드:

.wrapper > div:only-of-type {

배경: 주황색;

}