我是一个段落
我是一个段落
CSS3 선택기(1부)
- WBOY원래의
- 2016-08-30 09:21:071068검색
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代码:
css代码
a[클래스^=아이콘]{
배경: 녹색;
색상:#fff;//정义以아이콘开头的任何字符串
}
a[href$=pdf]{
배경: 주황색;
색상: #fff;define href pdf로 끝나는 문자열
}
a[제목*=더 보기]{
배경: 파란색;
색상: #fff; 제목으로 정의된 모든 문자열
}
예:
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
Brand
Brand
css 코드:
#브랜드:타겟 {
배경: 주황색;
색상: #fff;
}
#제이크:대상 {
배경: 파란색;
색상: #fff;
}
#아론:대상{
배경: 빨간색;
색상: #fff;
}
7, 구조적 의사 클래스 선택자—첫 번째 자식
“:first-child” 선택자는 상위 요소 E의 첫 번째 하위 요소를 선택하는 요소를 나타냅니다. 간단한 이해는 요소의 첫 번째 하위 요소를 선택하는 것입니다. 이는 하위 요소가 아니라 하위 요소라는 점을 기억하십시오.
HTML코드:
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
- 항목2
- 항목3
- 항목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 {
배경: 주황색;
}
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Sass 고급 구문다음 기사：Sass 고급 구문