【H5 前端开发笔记】第 20 期:CSS 选择器 (5) 子元素伪类选择器 详解

🚀 个人主页 极客小俊
✍🏻 作者简介:程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步!
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

子元素伪类选择器

概念: 前面说到了伪元素是表示选中元素里面的内容在元素内部的一个特殊位置 ! 就要使用到伪元素选择器来设置CSS样式!

那么CSS3中专门提供了一些选择子元素的伪类选择器!

这些子元素伪类选择器可以让我们精确的找到指定位置的子元素!

:first-child

含义: 表示查找指定元素的第一个子元素! 也就是寻找父元素中所有子元素(包含后代元素)的第一个子元素!

语法: 元素选择器:first-child [选择器]{ … css 样式…}

注意:

  1. 通常情况下, 这个被选中的元素一定是某一个元素下第一个子元素, 而且被选择的第一个子元素之前不能有任何元素! 否则无法选择中!
  2. 如果:first-child前面没有选择器,代表选择所有元素! 所以一般前面都会跟一个选择器!
  3. :first-child后面可以根据需求继续往后面添加选择器!
  4. 如果某一个元素只有一个子元素的情况下,那么这个子元素是最后一个子元素 也是第一个子元素!

案例:

<style>
    /*案例1: 选择整个页面所有元素(包含子元素、后代元素)下的第一个p元素 (这种是不考虑父级元素的)*/
    p:first-child{
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
    /*案例2 选择#connect元素下(包含子元素、后代元素)下的第一个p元素 (这种是限定在某元素下进行选择) */
    #connect p:first-child{
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
</style>

<div id="connect">
    <p title="str">CPU</p>
    <p title="str">内存</p>
    <p title="data-str">显卡</p>
    <p>主板</p>
    <p>电源</p>
    <div>
        <p class="test">水冷风扇1</p>
        <p>水冷风扇2</p>
        <p>水冷风扇3</p>
    </div>
</div>

<div>
    <p>电脑主机箱</p>
</div>

<hr>

<ul>
    <li>2080Super</li>
    <li>2080Ti</li>
    <li>3080Ti</li>
</ul>

<ul>
    <li>
        <p title="str">java</p>
        <p title="str">PHP</p>
        <p title="data-str">Python</p>
    </li>
    <li>javascript</li>
    <li>MySQL</li>
</ul>

<p>SQL Server 2000</p>

:last-child

含义: 表示查找指定元素的最后一个子元素! 也就是寻找父元素中所有子元素(包含后代元素)的最后一个子元素!

语法: 元素选择器:last-child [选择器]{ … css 样式…}

注意

  1. 通常情况下,这个被选中的元素一定是某一个元素下最后一个子元素,而且被选择的最后一个子元素后面不能有任何元素 否则无法选择中!
  2. 如果:last-child 前面没有选择器,代表选择所有元素! 所以一般前面都会跟一个选择器!
  3. :last-child 后面可以根据需求继续往后面添加选择器!
  4. 如果某一个元素只有一个子元素的情况下,那么这个子元素是最后一个子元素 也是第一个子元素!

案例:

<style>
    p:last-child{
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
</style>


<div id="connect">
    <p title="str">CPU</p>
    <p title="str">内存</p>
    <p title="data-str">显卡</p>
    <p>主板</p>
    <p>电源</p>
    <div>
        <p class="test">水冷风扇1</p>
        <p>水冷风扇2</p>
        <p>水冷风扇3</p> 
    </div>
</div>

<div>
    <p>电脑主机箱</p>
</div>

<hr>

<ul>
    <li>2080Super</li>
    <li>2080Ti</li>
    <li>3080Ti</li>
</ul>

<ul>
    <li>
        <p title="str">java</p>
        <p title="str">PHP</p>
        <p title="data-str">Python</p>
    </li>
    <li>javascript</li>
    <li>MySQL</li>
</ul>
:nth-child(n)

含义: 寻找父元素中的指定位置子元素!

语法:元素选择器:nth-child(n) [选择器]{ ..css样式..}

注意:

  1. 参数n可以是一个不小于0的整数,表示要选择的第几个元素,最小从1开始!
  2. 参数n可以使用 odd 和 even 关键词, 来匹配是奇数或偶数的子元素! odd 是奇数、even是偶数!
  3. 参数n也可以使用一个公式: (an + b) , a代表一个整数、n 是计数器(从 0 开始),b 是偏移值 , 提示: a和n是乘积关系, b也是一个整数,根据需求来决定是否偏移。

案例:

<style>
    /*案例1*/
    p:nth-child(2){
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
    
     /*案例2*/
    p:nth-child(odd){
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
    
    
    
</style>

<div id="connect">
    <p title="str">CPU</p>
    <p title="str">内存</p>
    <p title="data-str">显卡</p>
    <p>主板</p>
    <p>电源</p>
    <div>
        <p class="test">水冷风扇1</p>
        <p>水冷风扇2</p>
        <p>水冷风扇3</p>
    </div>
</div>

<div>
    <p>电脑主机箱</p>
</div>

<hr>

<ul>
    <li>2080Super</li>
    <li>2080Ti</li>
    <li>3080Ti</li>
</ul>

<ul>
    <li>
        <p title="str">java</p>
        <p title="str">PHP</p>
        <p title="data-str">Python</p>
    </li>
    <li>javascript</li>
    <li>MySQL</li>
</ul>

<p>SQL Server 2000</p>

案例2:

<style>
    p:nth-child(2n+0){
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
</style>

<div>
    <p title="str">CPU</p>
    <p title="str">内存</p>
    <p title="data-str">显卡</p>
    <p>主板</p>
    <p>电源</p>
    <p>水冷风扇1</p>
    <p>水冷风扇2</p>
    <p>水冷风扇3</p>
    <p>水冷风扇4</p>
    <p>水冷风扇5</p>
    <p>水冷风扇6</p>
</div>

:first-of-type

含义:表示查找指定元素的第一个子元素! 不管指定元素前面是否存在其他元素 都会被选中!

语法: 元素选择器:first-of-type [选择器] { … css样式…}

案例:

<style>
    #connect p:first-of-type{
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
</style>


<div id="connect">
    <div>重庆市</div>
    <p title="str">CPU</p>
    <p title="str">内存</p>
    <p title="data-str">显卡</p>
    <p>主板</p>
    <p>电源</p>
    <p>水冷风扇1</p>
    <p>水冷风扇2</p>
    <p>水冷风扇3</p>
    <p>水冷风扇4</p>
    <p>水冷风扇5</p>
    <p>水冷风扇6</p>
</div>
:last-of-type

含义:表示查找指定元素的最后一个子元素! 不管指定元素之后是否存在其他元素 都会被选中!

语法: 元素选择器:last-of-type [选择器] { … css样式…}

<style>
    #connect p:last-of-type{
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
</style>


<div id="connect">
    <div>重庆市</div>
    <p title="str">CPU</p>
    <p title="str">内存</p>
    <p title="data-str">显卡</p>
    <p>主板</p>
    <p>电源</p>
    <p>水冷风扇1</p>
    <p>水冷风扇2</p>
    <p>水冷风扇3</p>
    <p>水冷风扇4</p>
    <p>水冷风扇5</p>
    <p>水冷风扇6</p>
    <div>北京市</div>
</div>
:nth-of-type(n)

含义: 寻找父元素中指定类型并且指定位置子元素!

语法:元素选择器:nth-of-type(n) [选择器]{ …css样式…}

提示: :nth-of-type(n) 与 :nth-child(n)的区别就在于 :nth-of-type(n)它所指定的元素之前或之后,或者说中间夹杂着其他元素,都会被选择中! 主要就是因为:nth-of-type(n)指定了类型的子元素

参数n 可以使用even,来找到偶数的子元素, 也可以使用odd,来找到奇数的子元素!

<style>
    #connect p:nth-of-type(odd){
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
</style>

<div id="connect">
    <div>重庆市</div>
    <p title="str">CPU</p>
    <p title="str">内存</p>
    <p title="data-str">显卡</p>
    <p>主板</p>
    <p>电源</p>
    <p>水冷风扇1</p>
    <p>水冷风扇2</p>
    <p>水冷风扇3</p>
    <p>水冷风扇4</p>
    <p>水冷风扇5</p>
    <p>水冷风扇6</p>
    <div>北京市</div>
    <p>水冷风扇7</p>
    <p>水冷风扇8</p>
    <p>水冷风扇9</p>
</div>

更多子元素伪类选择器 [扩展]

:only-child

含义: 寻找指定父元素下唯一的一个子元素 , 注意:这个父元素下只有一个被指定的子元素! 才能被选择中!

语法: 元素选择器:only-child [选择器]{ …css样式…}

案例:

<style>
    ul li:only-child{
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
</style>


<ul>
    <li>电脑硬件</li>
    <li>电脑硬件</li>
</ul>
<ul>
    <li>显卡</li>
</ul>
:only-of-type

含义: 寻找指定父元素下指定类型的元素,并且该类型元素只能存在一个。 注意:这个父元素下可以存在多个元素,但指定类型的元素只能存在一个,才能被选择中!

语法: 元素选择器:only-of-type [选择器]{ …css样式…}

案例:

<style>
    div div:only-of-type{
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
</style>
<div>
    <p>只能存在一个p元素</p>
    <span>存在一个span元素</span>
    <div>存在一个div元素</div>
    <div>存在一个div元素</div>
</div>

<div>
    <p>只能存在一个p元素</p>
    <div>存在一个div元素</div>
</div>
:nth-last-child(n)

含义: 寻找父元素中的指定位置子元素! 从父元素中的最后一个子元素开始计数

语法:元素选择器:nth-last-child(n) [选择器]{ …css样式…}

注意:

  1. 参数n可以是一个不小于0的整数,表示要选择的第几个元素,最小从1开始!
  2. 参数n可以使用 odd 和 even 关键词, 来匹配是奇数或偶数的子元素! odd 是奇数、even是偶数!
  3. 参数n也可以使用一个公式: (an + b) , a代表一个整数、n 是计数器(从 0 开始),b 是偏移值 , 提示: a和n是乘积关系, b也是一个整数,根据需求来决定是否偏移。
  4. 以上参数的计数方式都是以从父元素中的最后一个子元素开始计数

案例:找到ul中倒数第五个li元素

<style>
    ul li:nth-last-child(5){
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
</style>
<ul>
    <li>倒数第六个子元素,第一个子元素</li>
    <li>倒数第五个子元素</li>
    <li>倒数第四个子元素</li>
    <li>倒数第三个子元素</li>
    <li>倒数第二个子元素</li>
    <li>最后一个子元素</li>
</ul>
:nth-last-of-type(n)

含义: 寻找父元素中指定类型并且指定位置子元素! 从父元素中的最后一个子元素开始计数

语法:元素选择器:nth-last-of-type(n) [选择器]{ …css样式…}

注意:nth-last-of-type(n)的注意事项与:nth-last-child(n)的注意事项一致。

案例:找到div中倒数第三个的span元素

<style>
    div span:nth-last-of-type(3){
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
</style>
<div>
    <p>倒数第五个p元素,第一个子元素</p>
    <span>倒数第五个span元素</span>
    <p>倒数第四个p元素</p>
    <span>倒数第四个span元素</span>
    <p>倒数第三个p元素</p>
    <span>倒数第三个span元素</span>
    <span>倒数第二个span元素</span>
    <p>倒数第二个p元素</p>
    <span>最后一个span元素</span>
    <p>最后一个p元素,最后一个子元素</p>
</div>

"👍点赞" "✍️评论" "收藏❤️"

大家的支持就是我坚持下去的动力!

如果以上内容有任何错误或者不准确的地方,🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法,
欢迎一起交流学习❤️❤️💛💛💚💚

更多好玩 好用 好看的干货教程可以点击下方关注❤️微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇

深度学习工具包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")
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

极客小俊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值