CSS之结构伪类选择器

CSS3 选择器进阶:属性选择器和结构伪类 本文的目的是帮助大家深入理解 CSS3 中的属性选择器和结构伪类。我们将详细讲解它们的概念、用法、原理,还会通过实际案例展示如何在项目中运用这些选择器,让网页的样式更加丰富多样。范围涵盖属性选择器和结构伪类的各种类型以及它们在不同场景下的应用。本文首先会介绍相关的术语和概念,接着通过有趣的故事引出核心概念,详细解释属性选择器和结构伪类,阐述它们之间的关系,给出原理和架构的示意图及流程图。 阅读详情
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类选择器</title>
    <style>
        li:first-child {
            background-color: greenyellow;
        }

        li:last-child {
            background-color: green;;
        }

        /* li:nth-child(2n) */
        li:nth-child(3) {
            background-color: purple;
        }
    </style>
</head>
<body>
    <ol>
        <li>This</li>
        <li>is</li>
        <li>ordered</li>
        <li>list</li>
    </ol>
</body>
</html>

css3之结构伪类选择器 结构伪类选择器主要有哪些 first-child last-child nth-child(2n) nth-of-type() first-of-type last-of-type only-child empty 首先我们先把今天要做的效果给大家展示下,今天要做的是在这个案例的基础上添加,话不多说,上代码跟截图 <!DOCTYPE html> <html> &lt... 阅读详情

相关推荐

TI C2000 , .cmd文件,.TI.ramfunc,将程序分配为在RAM中运行/Flash运行的配置方法和原理讲解,(如28375S ,280049,28335等等芯片)

1 基础知识讲解 1.1 在RAM中运行还是在flash中运行指的是什么? 1.1.1 背景:程序编译完之后生成的.bin文件,.bin文件中包含代码段,代码段中全是汇编指令,而汇编指令中包含多个函数,各函数头的地址不同,如存在A函数和B函数,假设RAM地址区间是0x0000-0x8000,flash的地址区间是0xA000-0xF000,A函数要调用B函数,则A函数调用B函数的那段汇编指令中包含的是B函数头的存储地址,A函数和B函数都在flash中有存储 1.1.2 情况1:B函数是配置为在RAM中运行,

weixin_43776284的博客 8068

CSS 结构伪类选择器详解

结构伪类选择器是用来选择元素的某些特定位置或关系。它们依据元素在文档中的位置、兄弟关系或类型来选择目标元素。通过这些伪类选择器,开发者可以在不增加额外类或 ID 的情况下,根据文档结构选择元素。CSS 结构伪类选择器为开发者提供了强大的选择功能,能够基于元素的位置、类型或结构关系选择元素,并应用样式。通过掌握这些选择器,我们能够更加灵活高效地管理页面元素的样式,而无需依赖过多的类名或 ID。:选择第一个子元素。:选择最后一个子元素。:选择某位置的子元素。:选择特定类型元素的位置。

m0_62599305的博客 1533

华硕天选3 win11+ubuntu20.04双硬盘双系统配置(包括ubuntu重启后无法成功进入、没有wifi图标的设置)

1、制作系统盘 2、分区 3、重启电脑按F2

baidu_38431960的博客 1万+

CSS结构伪类选择器

CSS结构伪类选择器 结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类class的依赖,有助于保持代码干净整洁。 表 — 结构伪类选择器 选择器 功能描述 版本 E:last-child 选择父元素的倒数第一个子元素E,相当于E:nth-last-child(1) E:nth-child(n) 选择父元素的第n个子元素,n从1开始计算 E:nth-last-child(n) 选择父元素的倒数第n个子元素,n从1开始计算 E:fi

qq_47897078的博客 1070

QT实现HTTP文件(夹)下载的完整流程与实战技巧

本文详细介绍了使用QT框架实现HTTP文件和文件夹下载的完整流程与实战技巧。通过QNetworkAccessManager等核心类,讲解了从单文件下载、大文件处理、进度显示、暂停/取消功能,到复杂的文件夹下载策略。文章重点剖析了断点续传、错误处理与网络健壮性等关键问题,为C++桌面应用集成稳定高效的下载功能提供了专业指导。

weixin_29239279的博客 279

AMDGPU驱动中Doorbell与Event机制简要对比

摘要:AMDGpu驱动中,Doorbell和Event是两种异步通知机制。Doorbell是CPU→GPU的单向硬件通知,通过写MMIO寄存器触发GPU拉取任务,延迟低且无需内核介入,适用于队列任务提交。Event是GPU→CPU的双向同步通知,基于中断和内核事件对象,支持阻塞等待,用于任务完成或异常上报。核心区别在于方向、用途和实现方式:Doorbell侧重任务触发,Event侧重状态反馈。两者配合实现高效的任务下发与完成通知流程。

图形/计算GPU的驱动与虚拟化技术分享园地 1856

CSS 结构伪类选择器

本文系统介绍了CSS结构伪类选择器及其应用场景,包括基础伪类(:root、:empty、:not)、子元素定位伪类(:first-child、:nth-child等)和同类型元素定位伪类(:first-of-type、:nth-of-type等)。通过表格优化、列表处理和卡片布局等实际案例,展示了伪类选择器的强大功能。文章还提供了高级技巧、浏览器兼容性分析和性能优化建议,强调合理使用结构伪类可以减少对额外类名的依赖,使CSS更具语义性。这些选择器为创建动态样式提供了灵活方案,是CSS开发的重要工具。

qq_46032105的博客 1258

AI大模型探索之路-实战篇4:深入DB-GPT数据应用开发框架调研

在当今的人工智能时代,大模型技术的迅猛发展为各行各业带来了前所未有的变革。这些大模型,以其强大的语言理解和生成能力,正在逐步成为智能化应用的核心。然而,如何高效地利用这些大模型,构建出满足各种需求的应用,仍然是一个具有挑战性的问题。DB-GPT,作为一个开源的AI原生数据应用开发框架,应运而生,旨在简化大模型应用的开发过程,让构建智能化应用变得触手可及。本文将深入介绍DB-GPT的核心功能、关键特性,并通过实战操作,展示如何利用DB-GPT进行数据应用开发。DB-GPT是一个开源的AI原生数据应用开发框架。

寻道AI,探索AI无限可能! 1万+

CSS——介绍结构伪类选择器

CSS——结构伪类选择器 结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁。 结构伪类选择器的测试 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul li:first-ch

万里顾一程的博客 503

QT+QGIS跨平台编译(基于Qt,采用一套代码、一套框架,完成QGIS第三方库、核心库、应用程序的跨平台编译)

QT+QGIS跨平台编译。 基于Qt,采用一套代码、一套框架,完成QGIS第三方库、核心库、应用程序的跨平台编译。

LuckyHanMo的博客 4377

【Flutter 面试题】 怎么减少Widget的重新构建?

关于 const 关键字的使用:在 Flutter 开发中,任何时候当你确定一个 Widget 在其整个生命周期内都不会发生变化时,使用 const 关键字声明这个 Widget。这样的声明告诉 Flutter 框架这个 Widget 可以在编译时生成,后续的构建周期中可以重用已经创建的 Widget,从而避免了重复的构建开销。这适用于静态文本、图标或整个不变的 Widget 树。

Code Metaverse 1577

CSS3 结构伪类选择器

CSS3 结构伪类选择器

PinkCoder 1259

12027.linux flash驱动之IS25LP01G/IS25WWP01G

一页:512字节 --> 扇区 4096字节 --> 块 32k,64k, 层层递进关系。

写给自己的笔记 2289

CSS3学习笔记 之 结构伪类选择器

结构伪类选择器可以根据DOM树中元素的相对关系来匹配特定的元素,其语法如下: 选择器 功能描述 E:first-child 作为父元素的第一个子元素的元素E。与E:nth-child(1)等同 E:last-child 作为父元素的最后一个元素的元素E,与E:nth-lat-child(1)等同 E:root 匹配E元素所在文档的根元素。在H

@LeX 2670

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

07CSS笔记——CSS3、属性选择器、结构伪类选择器、伪元素选择器

过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。在实际工作中,字体图标基本上都是用伪元素来实现的,好处在于我们不需要在结构中额外去定义字体图标的标签,通过content属性来设置字体图标的 编码。n可以是公式︰常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)属性选择器,按照字面意思,都是根据标签中的属性来选择元素。

昭与云的博客 1028

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

css3结构伪类选择器使用

css3基础 1.结构伪类选择器 E[ ] 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客...

woxingli0的博客 1049

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

css3-结构伪类选择器

结构伪类选择器简介 结构伪类选择器- - -根据文档结构,使用伪类选择器选择元素。常用于根据父元素,使用伪类选择器选择子元素。 结构伪类选择器的使用方法 方法一:父元素名 子元素名:first-child/last-child/nth-child() first-child:第一个孩子 last-child:最后一个孩子 nth-child():括号里面可以写- - - 数字、关键字、公式 数字—直接指定第几个 关键字—even:偶数 odd:奇数 公式—n:代表选择所有子元素,n会从0开始,每次增加1,

qq_39111074的博客 942

css 伪类选择器(链接伪类选择器、结构伪类选择器、目标伪类选择器)

css 伪类选择器(链接伪类选择器、结构伪类选择器、目标伪类选择器 链接伪类选择器:顾名思义就是用于链接的伪类选择器。a的伪类标签有:a:link、a:visited、a:hover、a:active,a:link表示的是未访问的链接,a:visited表示已访问的链接 ,a:hover表示鼠标移动到链接上,a:active表示的是选定的链接(当我们点击别松开鼠标,显示的状态) 现在来演示一下,代...

weixin_44046450的博客 5771

CSS中的十二种结构伪类选择器

Hello 大家好,我是一碗周,不是你想的那个“一碗粥”,是一个不想被喝掉的前端????????‍????,如果我写的文章有幸可以得到你的青睐,万分有幸~ 这是【从头学前端】系列文章的第二十七篇-《CSS中的十二种结构伪类选择器》 编写不易转载请获得允许 写在前面 本篇文章我们将来学习CSS中的结构伪类选择器,该类选择器包含的内容如下表所示: 伪类选择器 作用 selector:first-child 用来定位一组兄弟元素中的第一个元素 selector:last-child 用来

一碗周 5715

CSS新增的属性、结构伪类选择器,帮你快速找到那个对的人

(匹配父元素中的第n个子元素E)(n可以是数字,关键字和公式)(n可以是关键字:even偶数,odd奇数)(可以是公式,n从0开始计算:2n:偶数;(匹配父元素中的第n个子元素E)(n可以是数字,关键字和公式)(n可以是关键字:even偶数,odd奇数)(可以是公式,n从0开始计算:2n:偶数;(指定类型E的第n个)6、E :nth-of-type(n);

2401_84091110的博客 650

Web前端,CSS中结构伪类选择器

结构伪类选择器的使用

星辰迷上大海的博客 1178

CSS3新增结构伪类选择器

CSS3新增结构伪类选择器CSS3新增结构伪类选择器CSS3新增结构伪类选择器-nth-childCSS3新增选择器nth-type-of CSS3新增结构伪类选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"

溯琳的博客 222

CSS的结构伪类选择器:child系列

前端学习经验(7) CSS 选择器 结构伪类选择器 child系列: 元素:first-child{ 样式表 }

weixin_44272970的博客 1257
上一篇: CSS显示模式
下一篇: CSS之伪元素选择器
栈不全
博客等级 码龄5年 173粉丝 152原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值