css3第四篇，选择器三(伪类选择器一）

最新推荐文章于 2024-10-02 23:10:13 发布
最新推荐文章于 2024-10-02 23:10:13 发布
阅读量1.4k 收藏 5
点赞数 2
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_25786399/article/details/82827930
版权

伪类选择器一

语法 ：。指定选择器特殊情况下的属性以及属性值

结构伪类选择器

1.:nth-child:根据定义的标签顺序,来给指定的标签添加样式。先找到符合顺序的标签，再匹配标签是否符合设定的类型。

选择器作用
:first-child所有标签中的第一个,并且要符合设定的标签类型
:last-child所有标签中的最后一个,并且要符合设定的标签类型
:nth-child()符合指定顺序的标签.()当中可写内容:一个数值,表示指定的顺序;英文单词odd奇数标签even偶数标签.公式:a*n +/- b,公式没有固定的写法,完全根据需求而定,a,b是根据需求自行设定的数字,n是css3系统规定的,从0开始的整数,将n赋值,是从0开始的整数,再根据公式计算出数值,按照数值给指定顺序的符合设定的标签添加样式效果
nth-last-child()与nth-child()的所有语法都相同,只是计算顺序,是从最后一位开始,例如:nth-last-child(3)

举例1： 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .ul1>li:first-child {
        color: blue;
    }

    .ul1>li:last-child {
        color: green;
    }

    .ul1>li:nth-child(4) {
        color: red;
    }
    </style>
</head>

<body>
    <ul class="ul1">
        <li>北京1</li>
        <li>北京2</li>
        <li>北京3</li>
        <li>北京4</li>
        <li>北京5</li>
        <li>北京6</li>
        <li>北京7</li>
        <li>北京8</li>
    </ul>
</body>

</html>

举例2：请看注释。 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /* 一个标签是a标签,与设定的类型符合,无法加载样式效果 */

    .div1>span:first-child {
        color: red;
    }
    /* 第一个标签是a标签,与设定类型一致,可以加载样式效果 */

    .div1>a:first-child {
        color: green;
    }
    /* 同理,最后一个标签是p标签,与设定类型不一致,没法加载样式效果 */

    .div1>h6:last-child {
        color: blue;
    }
    /* 最后一个标签是p标签,与设定类型一致,可以加载样式效果 */

    .div1>p:last-child {
        color: blue;
    }
    /* 第五个标签,是h1标签,与设定类型一直,可以加载样式效果 */

    .div1>h1:nth-child(5) {
        color: yellow;
    }
    </style>
</head>

<body>
    <div class="div1">
        <a href="#">百度1</a>
        <a href="#">百度2</a>
        <span>广州1</span>
        <span>广州2</span>
        <h1>重庆1</h1>
        <h2>重庆2</h2>
        <h3>重庆3</h3>
        <h4>重庆4</h4>
        <h5>重庆5</h5>
        <h6>重庆6</h6>
        <p>武汉</p>
    </div>
</body>

</html>

举例3： 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /* 按照设定的数字作为顺序,查找位置,再看该位置上的标签,是否符合类型设定 */
    /*  .ul1>li:nth-child(2) { color: red; } */
    /* 所有奇数标签,并且要符合类型设定,加载css样式 */
    /*  .ul1>li:nth-child(odd) { color: blue; } */
    /* 所有的偶数标签,并且要符合类型设定,可以加载css样式效果 */
    /*     .ul1>li:nth-child(even) {
        color: green;
    } */
    /* n是从0开始的数值,按照公式计算出相应的结果,结果就是写入的数值,就是标签的顺序,再看该顺序上的标签是否符合设定类型 */
    /* 需求:3,6,9,12...标签改变颜色 */
    /*  .ul1>li:nth-child(3n) { color: pink; } */
    /*     n是从0开始的数值,2n+1,的计算结果 1,3,5,7,9.... 最终效果为奇数标签添加效果 */
    /*  .ul1>li:nth-child(2n+1) { color: orange; } */
    /*     n是从0开始的数值,2n-1,的计算结果 -1,1,3,5,7,9.... 没有没有-1的标签顺序,没有标签会添加-1的样式效果,最终效果为奇数标签添加效果 */
    /*  .ul1>li:nth-child(2n-1) { color: orange; } */
    /* 设定奇数标签,并且是span的标签添加样式效果,第三个标签是a标签,符合类型设定,不会添加样式效果 */

    .div2>span:nth-child(odd) {
        color: yellow;
    }
    </style>
</head>

<body>
    <ul class="ul1">
        <li>北京1</li>
        <li>北京2</li>
        <li>北京3</li>
        <li>北京4</li>
        <li>北京5</li>
        <li>北京6</li>
        <li>北京7</li>
        <li>北京8</li>
        <li>北京9</li>
        <li>北京10</li>
        <li>北京11</li>
        <li>北京12</li>
        <li>北京13</li>
        <li>北京14</li>
        <li>北京15</li>
        <li>北京16</li>
    </ul>
    <div class="div2">
        <span>北京1</span>
        <span>北京2</span>
        <a href="#">上海</a>
        <span>北京3</span>
        <span>北京4</span>
        <span>北京5</span>
        <span>北京6</span>
        <span>北京7</span>
        <span>北京8</span>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>

</html>

 举例4：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /*     所有标签中正数第二个标签,并且要求标签类型为li标签 */

    .ul1>li:nth-child(2) {
        color: red;
    }
    /*     所有标签中倒数第二个标签,并且要求标签类型为li标签 */

    .ul1>li:nth-last-child(2) {
        color: blue;
    }
    </style>
</head>

<body>
    <ul class="ul1">
        <li>北京1</li>
        <li>北京2</li>
        <li>北京3</li>
        <li>北京4</li>
        <li>北京5</li>
        <li>北京6</li>
        <li>北京7</li>
        <li>北京8</li>
        <li>北京9</li>
        <li>北京10</li>
        <li>北京11</li>
        <li>北京12</li>
        <li>北京13</li>
    </ul>
</body>

</html>

举例5： 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /*  .div1>div:nth-child(1)
    .div1选择器标签中,子级第一个标签,该标签还必须是div */
    /*  .div1>div:nth-child(1)>span:nth-child(1) .div1选择器标签中,子级第一个标签,该标签还必须是div,再找子级标签,找第一个标签,标签还必须是span */

    .div1>div:nth-child(1)>span:nth-child(1) {
        color: green;
        font-size: 20px;
    }

    .div1>div:nth-child(1)>span:nth-child(2) {
        color: red;
        font-size: 20px;
    }

    .div1>div:nth-child(1)>span:nth-child(3) {
        color: gray;
        font-size: 10px;
    }
    /* 	.div1>div:nth-child(2)
	.div1选择器标签中,子级第二个标签,该标签还必须是div  */
    /*  .div1>div:nth-child(2)>ul>li:nth-child(even) .div1选择器标签中,子级第二个标签,该标签还必须是div,子级的ul,ul中所有偶数标签,并且类型必须是li */

    .div1>div:nth-child(2)>ul>li:nth-child(even) {
        background: green;
    }
    </style>
</head>

<body>
    <div class="div1">
        <div>
            <span>你所在的地区</span>
            <span>*</span>
            <span>(必填,单选)</span>
        </div>
    </div>
    <div class="div1">
        <div>
            <span>你的性别</span>
            <span>*</span>
            <span>(必填,单选)</span>
        </div>
    </div>
    <div class="div1">
        <div>
            <span>你的年龄</span>
            <span>*</span>
            <span>(必填,单选)</span>
        </div>
        <div>
            <ul>
                <li>
                    <input type="radio" name="age">18岁以下
                </li>
                <li>
                    <input type="radio" name="age">18岁~25岁
                </li>
                <li>
                    <input type="radio" name="age">26岁~34岁
                </li>
                <li>
                    <input type="radio" name="age">35岁~44岁
                </li>
                <li>
                    <input type="radio" name="age">44岁以上
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

 2:nth-of-type.先找到所有符合类型的标签,再按照顺序给指定位置的标签添加样式

选择器说明
:first-of-type所有符合设定类型的标签中的第一个
:last-of-type所有符合设定类型的标签中的最后一个
:nth-of-type()符合指定顺序的标签,()当中可写内容:一个数值表示指定的顺序,英文单词odd奇数标签、even偶数标签.公式a*n +/- b公式没有固定的写法,完全根据需求而定a,b是根据需求自行设定的数字n是css3系统规定的,从0开始的整数将n赋值,是从0开始的整数,再根据公式计算出数值,按照数值给指定顺序的符合设定的标签添加样式效果
nth-last-of-type()与nth-of-type()的所有语法都相同,只是计算顺序,是从最后一位开始,例如:nth-last-of-type(3),所有符合设定类型的标签中的倒数第三个标签
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /* child 先找第一个标签,再要求符合设定类型 */

    .div1>strong:first-child {
        color: red;
    }
    /* 先找到所有符合类型的标签,再按照设定的顺序给标签添加样式 */


    /* first-of-type,所有的strong中的第一个strong标签 */
    /*  .div1>strong:first-of-type { color: yellow; } */

    /*  last-of-type,所有的strong中的最后一个strong标签 */
    /*  .div1>strong:last-of-type {
        color: blue;
    } */


    /* nth-of-type(3)找到所有标签中符合设定顺序的标签,添加样式 */
    /*  .div1>strong:nth-of-type(3) {
        color: pink;
    } */
    /*  .div1>strong:nth-of-type(even) { color: orange; } */

    /*nth-last-of-type 找到符合顺序的的标签,是从所有符合类型的标签中倒数 */
    /* .div1>strong:nth-last-of-type(2) { color: green; } */
    </style>
</head>

<body>
    <div class="div1">
        <a href="#">新浪</a>
        <a href="#">搜狐</a>
        <strong>北京</strong>
        <a href="#">搜狐</a>
        <strong>上海</strong>
        <a href="#">搜狐</a>
        <strong>重庆</strong>
        <a href="#">搜狐</a>
        <strong>天津</strong>
        <strong>广州</strong>
        <em>武汉</em>
        <em>长沙</em>
    </div>
</body>

</html>

 总结:child先数数,先找顺序,再看当前位置标签是否符合设定标签类型;of-type先找到所有的符合类型的标签,不符合类型的标签不参与,再找顺序符合设定顺序的标签.  

 

 

yyyyfan
关注
专栏目录
CSS简介与选择器
wwh71430的博客
08-31 270
CSS简介与选择器 1.CSS简介 什么是CSS CSS (Cascading Style Sheets) 层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。 HTML和CSS之间的关系？ HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 HT
css3 伪元素和伪类选择器详解
01-19
伪类选择器：CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几种，`如a:link|a:...CSS中有如下四种伪元素选择器：· first-line:为某个元素的第一行文字使用样式；· first-letter:为某个元
css3系列之伪类选择器
weixin_30680385的博客
07-15 242
Pseudo-Classes Selectors(伪类选择器) 　　E:not(s)　　E:root　　E:target 　　E:first-child　　E:last-child　　E:only-child　　E:nth-child(n)　　E:nth-last-child(n) 这上面一行的选择器，都会考虑其他元素的的影响。 　　E:first-of-type　　E:last-...
CSS3选择器（18个案例+代码实现+效果图）
最新发布
2301_76862031的博客
10-02 1064
css中的选择器 案例：使前缀为my的class的样式变为圆形;案例：使后缀为my的class的样式变为圆形； 案例：使包含my的class的样式变为圆形；案例：使div下的p标签的字体颜色变为红色； 案例：使div下的后面的兄弟变为圆形；案例：使用指定选择器后面的兄弟元素变为圆形； 案例：选择器不是myClassStyle的标签变为圆形；案例：使only-child把类选择器为noChild并且没有兄弟元素为noChild的类变为圆形；案例：奇数div为方形，偶数div为圆形； 等18个案例
神通广大的CSS3选择器
weixin_30932215的博客
05-13 229
每个前端工程师可能每天都会写一些css，其中选择器是很主要的一部分。但是，大家可能每天写的大多是#id,.class这样的选择器，这并不稀奇，但是如果我们了解并且熟用css3为我们提供的强大并且优雅的选择器，就可以简化我们的代码。 我在学习和整理css3的选择器的时候都不会去考虑它的浏览器的支持程度，如果有需要，可以在这里查看它的浏览器支持情况：「caniuse.com」。 文章目录： ...
css伪类选择器
m0_62200674的博客
07-16 3059
链接伪类选择器、结构伪类选择器、目标伪类选择器
四种css 伪类选择器
09-25
CSS伪类选择器是CSS中一种特殊的选择器，它们用来定义元素的特殊状态，如元素被访问过的状态、鼠标悬停的状态、内容的特定部分等等。它们允许开发者在没有额外的类或ID的情况下，为元素的某个状态定义样式，从而增强...
CSS3 :default伪类选择器使用简介
09-24
**CSS3 :default 伪类选择器** 是一种在CSS3中定义的样式选择器，专门用于作用在表单元素上，尤其是那些具有默认状态的元素。它可以帮助开发者标识并控制那些在用户未进行任何操作时就已经处于激活或选中状态的元素...
两种CSS3伪类选择器详细介绍
09-25
其次，CSS3的:nth选择器提供了一组更加丰富和灵活的选择方式，涵盖了多种结构相关的伪类选择器。这些:nth选择器让开发者可以精确定位元素集合中的特定位置的元素，根据位置进行样式的定义。它们包括以下几种： 1. :...
CSS3结构性伪类选择器九种写法
09-25
### CSS3结构性伪类选择器详解 随着前端技术的发展，CSS3为我们提供了更多灵活的选择器，使得网页布局和样式设计变得更加高效与便捷。其中，结构性伪类选择器是一组非常实用的功能，它允许我们根据元素在文档树中的...
CSS3-伪类选择器
qq_34153210的博客
05-29 185
1.伪类选择器： 1.1静态伪类选择器 :link 选择一个未访问的超链接 :visited 选择一个已访问的超链接 例子： <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> a:link{color: red} ...
CSS3 伪类选择器
s_mitsuha的博客
09-17 1185
结构性伪类 demo <div class="parent"> <div class="line">aaa</div> <div class="line">bbb</div> <div class="line">ccc</div> <div class="line">ddd</div> </div> :first-child --选择第一个元素 code examp
CSS3伪类选择器
weixin_45062076的博客
02-15 349
a:link{color: blue;} /*点击链接之前*/ a:visited{color: blue;} /*点击链接之后*/ a:hover{color: blue;} /*鼠标移入*/ a:active{color: blue;} /*点击左键*/ input:focus{color: blue;} /*获得焦点*/
CSS伪类选择器
松一160
03-24 5720
一、链接伪类选择器 :link /* 未访问的链接 */ :visited /* 已访问的链接 */ :hover /* 鼠标移动到链接上 */ :active /* 选定的链接 */ 注意：写的时候他们的顺序尽量不要颠倒，按照 lvha 的顺序。 <!DOCTYPE html> <html lang="en"> <...
【CSS】3-css伪类选择器
JeffHan^_^的博客
07-27 256
css伪类用于添加一些选择器的特殊效果。
CSS选择器：伪类
wennianzhu的博客
02-23 369
伪类 同一个标签，根据其不同的状态，展现不同的样式。 有静态伪类和动态伪类之分 （1）静态伪类：只能用于超链接的样式 :link 超链接被点击之前 :visited 超链接被访问过之后 注：以上两种形式，只能用于超链接 （2）动态伪类：针对所有标签都适用 :hover “悬停”：鼠标放置于标签上时 :active “激活”：鼠标点击标签，但不松手时 :focus 获得焦点时 :first-child伪类 :first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素
CSS——选择器——伪类
GistTAT的博客
02-04 387
a:link {color:#red}     未访问的链接。  链接伪类，只能应用于锚元素      a:visited {color: #yellow}         已访问的链接。   链接伪类，只能应用于锚元素      a:hover {color: #green}     鼠标移动到链接上。   动态伪类，理论上可以用于任何元素，兼容到IE6。可用于设置链接按钮特效。  
深入理解CSS3选择器：伪类选择器详解
"本文将详细介绍CSS3的选择器中的伪类选择器，包括常见的伪类选择器用法以及CSS3新增的`:nth-child`选择器的使用。" 在CSS3中，伪类选择器是一个非常重要的概念，它们允许我们对元素在特定状态或位置时应用特定的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值