CSS에서 홀수를 사용할 수 있나요?

odd는 CSS에서 사용할 수 있습니다. CSS에서 홀수는 지정된 요소를 선택하기 위해 의사 클래스 선택기의 키워드로 사용될 수 있습니다. 홀수 행의 지정된 하위 요소를 선택하기 위해 ":nth-child()" 선택기의 매개변수로 자주 사용됩니다. 상위 요소에서 "지정" 하위 요소:nth-child(odd){//css 스타일}" 구문.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

odd는 CSS에서 사용할 수 있습니다.

odd는 "홀수"를 의미합니다. CSS에서는 지정된 요소를 선택하기 위해 의사 클래스 선택기에서 키워드로 사용할 수 있습니다.

odd는 ":nth-child(n)" 선택기와 함께 사용되는 경우가 많습니다. 이 선택기의 매개변수로 상위 요소에서 홀수 행의 지정된 하위 요소를 선택하는 데 사용됩니다. : 홀수와 비교하면 또 다른 것이 있습니다. ":nth-child(n)" 선택기와 함께 사용되는 키워드 짝수(짝수)는 상위 요소에서 짝수 행의 지정된 하위 요소를 선택할 수 있습니다

예: 테이블에서 대체 행의 색상 변경 실현

즉, 홀수 행은 단일 색상, 짝수 행은 단일 색상

指定子元素:nth-child(odd){//css样式}

확장 지식:

:nth-child(n)선택기는 상위 요소의 n번째 하위 요소와 일치합니다. 매개변수는 요소의 인덱스입니다. 인덱스는 1부터 시작합니다.

• n은 숫자, 키워드 또는 수식일 수 있습니다. :nth-child(n)选择器匹配父元素中的第n个子元素。参数是元素的索引。索引从1开始。

  • n 可以是一个数字，一个关键字，或者一个公式。

  :nth-child 是 CSS3 提供的一个好用的选择器，因为在项目中经常用到，所以简单总结了它的常用方法，下面示例代码截图用的是同一个例子，p元素的父元素都是body

  p:nth-child(2)

  表示给第2个p元素添加背景色，p:nth-child(3)是第3个p元素，以此类推

  

  p:nth-child(2)

  承接上面的示例，如果这里的p元素前面还有其它元素，结果如下图，段落1被添加背景色，而不是上面示例的段落2被添加背景色，

  因为这里的p:nth-child(1)为h1元素,，所以p:nth-child(2)才为p元素

  

  p:nth-child(3n)

  表示给3的倍数的p元素添加背景色，2n就是2的倍数，4n就是4的倍数，以此类推

  

  p:nth-child(odd)

  表示给所有奇数p元素添加背景色

  

  p:nth-child(even)

  表示给所有偶数p元素添加背景色

  

  使用公式 (an + b)，描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值

  另外需要特别注意的是，an 必须写在 b 的前面，不能写成 b+an 的形式

  注：公式里的n，不区分大小写

  

  p:nth-child(2n+1)

  可以简单理解为等同于 p:nth-child(odd)

  

  p:nth-child(2n+0)

  可以简单理解为等同于 p:nth-child(even)

  

  p:nth-child(n+2)

  表示正向范围，从第2个p元素开始（包括第2个p元素）到最后一个p元素都添加背景色（这里范围指2-5）

  

  p:nth-child(-n+5)

:nth-child는 CSS3에서 제공하는 유용한 선택기입니다. 프로젝트에서 자주 사용되기 때문에 아래 샘플 코드 스크린샷에서는 동일한 선택기를 사용합니다. p 요소의 상위 요소는 모두 body입니다

p:nth-child(2)

는 두 번째 p 요소에 배경색을 추가한다는 의미입니다. p:nth-child(3)은 세 번째 p 요소 등

p:nth-child(2) 위의 예에 따라 여기서 p 요소 앞에 다른 요소가 있는 경우 결과는 아래와 같습니다. 1에는 위의 예에서 단락 2에 배경색이 추가되는 대신 배경색이 추가됩니다.

🎜여기 p:nth-child(1)는 h1 요소이므로 p:nth-child(2)는 p 요소🎜🎜🎜 🎜p:nth -child(3n)🎜🎜은 3의 배수인 p 요소에 배경색을 추가하는 것을 의미합니다. 2n은 2의 배수이고, 4n은 4의 배수이므로 on🎜🎜🎜🎜 p:nth-child(odd) code>🎜🎜는 모든 홀수 p 요소에 배경색을 추가하는 것을 의미합니다🎜🎜<img src="https://img.php.cn/upload/image/914/%20548/708/165287025056756CSS%EC%97%90%EC%84%9C%20%ED%99%80%EC%88%98%EB%A5%BC%20%EC%82%AC%EC%9A%A9%ED%95%A0%20%EC%88%98%20%EC%9E%88%EB%82%98%EC%9A%94??x-oss-process=image/resize,p_40" title="165287025056756CSS에서 홀수를 사용할 수 있나요? " alt="CSS에서 홀수를 사용할 수 있나요?">🎜🎜<code>p:nth-child(even)🎜🎜는 모든 항목에 배경색을 추가하는 것을 의미합니다. 심지어 p 요소🎜🎜 🎜🎜공식(an + b)을 사용하세요. 설명: 기간 길이를 나타내고, n은 카운터(0부터 시작), b는 오프셋 값입니다.🎜🎜또한, an은 반드시 이어야 한다는 사실에 특별한 주의를 기울여야 합니다. b 앞에 쓰며 b+an🎜🎜 형식으로는 쓸 수 없습니다. 참고: 수식의 n은 대소문자를 구분하지 않습니다🎜🎜 🎜🎜p:nth-child(2n+1)🎜🎜 간단하게 이해하면 됩니다 p:nth-child(odd)🎜🎜🎜🎜p:nth-child(2n+0)🎜🎜는 단순히 p:nth-child(even)🎜🎜🎜🎜p:nth- child(n+2)🎜🎜는 두 번째 p 요소(두 번째 p 요소 포함) 2p 요소)부터 마지막 ​​p 요소까지 순방향 범위를 나타냅니다. 배경색을 추가합니다(여기서 범위는 2를 나타냅니다). -5)🎜🎜 🎜🎜p:nth-child(-n+5)🎜🎜는 마지막 p부터 시작하여 음수 범위를 나타냅니다. (마지막 요소 포함) 요소에 배경색을 첫 번째 p 요소에 추가합니다( 여기서 범위는 5-1)🎜🎜🎜🎜🎜 (학습 영상 공유: 🎜css 영상 튜토리얼🎜, 🎜웹 프론트엔드🎜)🎜

위 내용은 CSS에서 홀수를 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!