nth伪类选择器(nth家族)和其他一些选择器

原创 2016年08月30日 20:10:10

我们知道在css中有许多的选择器,譬如:我们最常见的class选择器、Id选择器、标签名选择器、群组选择器、后代选择器、子代选择器、同级元素通用选择器、相邻兄弟选择器、属性选择器以及nth家族选择器…
今天我们主要来说一下后面几种选择器

1、后代选择器和子代选择器

后代选择器会设置给它的子集,也会个它的“孙子”;
内部样式只会设置给它的子级,而不会继承给子级的子级

<style type="text/css">
        div p {
            background-color: pink;
        }
        /*div>p {
            background: red;
        }*/
    </style>
<body>
    <div>
        <p>
            但我必须像个完美的小孩儿1
            <h2>但我必须像个完美的小孩儿2
                <p>但我必须像个完美的小孩儿3</p>
            </h2>
        </p>
        <span>但我必须像个完美的小孩儿4</span>
        <span>但我必须像个完美的小孩儿5</span>
        <span>但我必须像个完美的小孩儿6</span>
        <span>但我必须像个完美的小孩儿7</span>
        <p>
            但我必须像个完美的小孩儿8
            <span>但我必须像个完美的小孩儿9</span>
        </p>
        <span>但我必须像个完美的小孩儿10</span>
        <span>但我必须像个完美的小孩儿11</span>
        <span>但我必须像个完美的小孩儿12</span>
        <span>但我必须像个完美的小孩儿13</span>
    </div>
</body>

(1)当是后代选择器时(效果图如下):

这里写图片描述

(2)当是子代和后代同时存在时:(效果图如下):

这里写图片描述

2、同级元素通用选择器、相邻兄弟选择器、属性选择器

同级元素通用选择器:是和它同级其他一系列标签
相邻兄弟选择器:只会选择和它相邻的一个

    /*同级元素通用选择器*/
    p ~ span{
            background: cyan;
        }
    /*相邻兄弟选择器*/
    p + span{
            background: yellow;
        }

(1)当只有同级元素通用选择器时,效果如下图:

这里写图片描述

(2)当只有同级元素通用选择器和相邻兄弟选择器同时存在时,效果如下图:

这里写图片描述
属性选择器:是我们自己可以给我们的标签一个名字,然后还可以给其一个属性值

/*属性选择器*/
        [alkjdal]{
            font-size: 12px;
        }
        [alkjdal=alkjdlakjsdlkaj]{
            font-size: 30px;
        }

效果如下图:

这里写图片描述

3、nth家族

nth家族包括:
(1):nth-child(){}、:nth-last-child(){}
此类比较“宽松”,表示其父级元素的第几个子标签(包括不同类的)
(2):nth-of-type(){}、nth-last-of-type(){}
此类比较“严格”,表示其父级元素的第几个子标签(必须是同类的)
小括号中写数字,表示第几个子节点。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul li{
            width: 50px;
            height: 50px;
            /*background: yellow;*/
            border: 2px solid red;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
            color: green;
            float: left;
            margin-right: 30px;
        }
        li:nth-child(3){
            background: pink;
        }
        li:nth-last-child(2){
            background: purple;
        }
        li:nth-of-type(6){
            background: cyan;
        }
        li:nth-last-of-type(6){
            background: cyan;
        }
        li:last-child{
            /*选择其父元素的最后一个子元素*/
            font-size: 100px;
        }
    </style>
</head>
<body>
    <ul>
        <!-- li{$}*10 -->
        <p>haha</p>
        <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>

    </ul>
</body>
</html>

运行结果如下图所示:

这里写图片描述

4、:nth-child(even)和:nth-child(odd)(常用于给表格跳行换颜色)

(1):nth-child(even)选中偶数行
(2):nth-child(odd)选中奇数行
(3):nth-child(an)选中a的倍数行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        table {
            border-collapse: collapse;
        }
        td,th {
            width: 50px;
            height: 20px;
            border: 1px solid black;
        }
        tr:nth-child(even){
            background-color: cyan;
        }
        tr:nth-child(odd) {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        <table>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</body>
</html>

运行结果如下图:
这里写图片描述
加上代码

tr:nth-child(2n) {
            background-color: red;
        }

结果如下所示:
这里写图片描述
好了,今天就到这吧!

版权声明:本文为博主原创文章,未经博主允许不得转载。

css3的nth-child选择器的详细探讨

css3的nth-child选择器的详细探讨css3的nth-child选择器的详细探讨 前言 有哪些 nth-child nth-child研究开始 构建DOM结构 开始实践CSS代码为方便研究我...
  • FungLeo
  • FungLeo
  • 2016年03月06日 16:16
  • 8644

微信小程序学习笔记(8)--------样式基础

小程序样式基础
  • zsp45212
  • zsp45212
  • 2016年12月13日 21:10
  • 4683

解决IE8下CSS3选择器 :nth-child() 不兼容的问题

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和...
  • FrontEnder_way
  • FrontEnder_way
  • 2016年05月09日 17:43
  • 16779

奇偶行显示不同样式操作,CSS3 :nth-child()伪类选择器

原文地址:http://blog.phpok.com/archives/202/ css3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支...
  • l863784757
  • l863784757
  • 2013年11月04日 16:22
  • 2596

关于nth-child()伪类选择器选取元素设置transform样式但是无法通过hover改变transform的问题

欢迎来到Altaba的博客  2017年5月27日22:56:46 不多说,直接上问题代码 HTML部分: 鸽子 王阳阳毕设 ...
  • Altaba
  • Altaba
  • 2017年05月27日 23:18
  • 399

CSS3:nth-child()伪类选择器,奇偶数行自定义样式first-child

Table表格奇偶数行定义样式: CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年,但是目...
  • jinkingliao
  • jinkingliao
  • 2015年11月20日 11:55
  • 552

CSS3:nth-child()伪类选择器,Table表格奇偶数行定义样式

css table tr
  • u012132129
  • u012132129
  • 2015年11月03日 13:56
  • 10082

CSS3伪类选择器:nth-child()

网页制作Webjx文章简介:CSS3标准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,今天我们就来“前瞻”一下CSS3的一个伪类选择...
  • zhaolong1990ok
  • zhaolong1990ok
  • 2012年02月29日 16:47
  • 1003

css3-属性、伪类、nth-child选择器

/* 伪类: :link :hover :active :visited 伪类的特点:以 :开头 */ .box{ ...
  • gyq04551
  • gyq04551
  • 2016年11月21日 20:32
  • 204

【CSS3】结构性伪类选择器—nth-child(n)

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even)...
  • happyhaojie
  • happyhaojie
  • 2016年02月23日 16:22
  • 318
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:nth伪类选择器(nth家族)和其他一些选择器
举报原因:
原因补充:

(最多只允许输入30个字)