结构伪类总结

用题目的形式，来了解常见伪类结构。

结构伪类

1.表示修改前4个元素的样式为字体大小为20px

/* 前几个 */div > div:nth-child(-n + 4) {font-size: 20px;}

2.表示修改第三个li的样式为红色

ul li:nth-child(3) {color: red;}

3.表示修改第2n+1个li的样式为蓝色

ul li:nth-child(2n + 1) {color: blue;}

4.表示修改倒数第二个元素为红色

/* 倒数的某一个时 */ul > li:nth-last-child(2) {color: red;}

5.表示修改倒数3个li元素的字体大小为20px

/* 倒数的后几个时 */ul > li:nth-last-child(-n + 3) {font-size: 20px;}

6.选择box中的div元素, 并且是第三个子元素

 /* 需求: 选择box中的div元素, 并且是第三个子元素 */.box > div:nth-child(3) {color: red;}

7.需求: 选择box中的第三个div元素(排除所有的干扰项)

.box > div:nth-of-type(3) {color: blue;}

否定伪类

1.否定伪类

:not(x)表示除x以外的元素
代码如下：

.box :not(.zyj) {color: red;}

这段代码的意思就是在class属性为box中的并且class部位zyj的所有元素。

【结构伪类和否定伪类】相关推荐

CSS3否定伪类选择器
否定伪类选择器用来选择不满足某些条件的元素. 表 2-6 结构伪类选择器选择器功能描述版本 E:not(selector) 选择未被选择器selector所选中,且类型为E的元素 3 如果想对某 ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
HTML与CSS基础之否定伪类(四)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>否定伪 ...
css :not(否定伪类)用法
:not 否定伪类在优先级计算中不会被看作是伪类. 事实上, 在计算选择器数量时还是会把其中的选择器当做普通选择器进行计数. 这是一块CSS代码: div.outer p {color:orange; ...
伪类、伪元素、锚伪类
伪类 CSS2中对伪类的定义是:CSS 伪类用于向某些选择器添加特殊的效果. 截止css2,伪类有以下几种: CSS3中对伪类的定义如下: 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信 ...
css中什么是伪类选择器？伪类选择器的简要介绍
本章给大家带来css中什么是伪类选择器?伪类选择器的简要介绍.让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. ...
CSS 伪类: 什么是 CSS 伪类？CSS 伪类怎么分类？ CSS 伪类有哪些？以及分类对应的伪类
本章讲解的内容为 CSS 伪类 . 废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) . 一: 什么是 CSS 伪类? 1. CSS 伪类是用来添加一些 ...
css中什么是伪类选择器？伪类选择器的简介
一.伪类选择器介绍伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式. 伪类的功能和一般的DOM中的元素样式相似,但和一般的DOM中 ...
CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...

【结构伪类和否定伪类】

结构伪类总结

结构伪类

否定伪类

【结构伪类和否定伪类】相关推荐

最新文章

热门文章