CSS3新特性及核心知识（新增选择器）

仙鹤__

于 2023-04-04 19:09:23 发布

阅读量336

点赞数

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/weixin_52629158/article/details/129959854

版权

1.1 什么是CSS3?

CSS3是最新的CSS标准，增加了新的特性。

1.1.1 什么是CSS?

CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个

1.1.2 CSS语法

CSS 实例CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

p
{
   color:red;
   text-align:center;
}

CSS声明总是以分号(;)结束，声明总以大括号({})括起来,为了让CSS可读性更强，你可以每行只描述一个属性。

1.2 css3新增选择器

1.2.1 CSS3 :root 选择器

:root选择器用匹配文档的根元素。

在HTML中根元素始终是HTML元素(HTML标签)。

    <style>
        :root{
            /* 因为css2.1中的继承性---给自身设置样式，其后代元素会继承使用 */
            font-size: 30px;
            color: blue;
            background-color: pink;
        }
    </style>

因为我们给根元素HTML标签，设置了css样式，其后代元素会继承使用。

浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。

1.2.2 CSS3 :empty 选择器

:empty选择器选择每个没有任何子级的元素（包括文本节点）。

没有任何子级指的是有空标签都不行！！！

   <style>
        .con p:empty{
            background-color: blue;
            height: 3px;
        }
    </style>
<div class="con">
        <p>段落</p>
        <p></p>
        <p>段落</p>
        <p></p>
        <p>段落</p>
        <p><span></span></p>
        <p>段落</p>
    </div>

预览：

1.2.3 CSS3 :not 选择器

:not(selector) 选择器匹配每个元素是不是指定的元素/选择器。

为每个并非<p>元素的元素设置背景颜色：

 .con :not(p){
            background-color:green;
        }
        
    </style>
<div class="con">
        <p>段落</p>
        <p></p>
        <p>段落</p>
        <p></p>
        <p>段落</p>
        <p><span></span></p>
        <p>段落</p>
        <div>你好</div>
        <br>
        <div>hello</div>
    </div>

预览：

注意：使用这个选择器的时候，要把范围缩小一些。不要直接写 :not(p) 。这样写容易产生歧义---body标签会用这个样式，整个页面都会被铺成绿色。p段落标签又是body里的子元素，整个p段落的背景就是绿色。容易让人产生歧义。所以，我们要把范围缩小一些，使用这个选择器。

1.2.4 CSS3 :checked 选择器

:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。

<style>
            .login input:checked{
                width: 50px;
                height: 50px;
            }
    </style>
	<div class="login">
        <div>
            <label for="">性别：</label>
            <input type="radio" name="sex" id="" checked="checked">男
            <input type="radio" name="sex" id="" >女
        </div>
        <div>
            <label for="">爱好：</label>
            <input type="checkbox" name="" id="">登山
            <input type="checkbox" name="" id="">旅游
            <input type="checkbox" name="" id="">看书
        </div>
    </div>

预览：

注意：

给单选按钮和复选框直接设置边框和背景色，是设置不上去的。

我们可以选择间接设置，间接设置的方法有2个。要么是通过before或after伪类绘制小图形。要么是通过设计师绘制的一个小图，你拿过来，当背景图去使用。

1.2.5 CSS3 :target 选择器

＃锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素。

:target选择器可用于当前活动的target元素的样式。（给跳转到的指定锚点设置css样式）

 <style>
        :target{
            background-color: lightgreen;
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <p>
        <a href="#sg">三国</a>
    </p>
    <p>
        <a href="#sh">水浒</a>
    </p>
    <div>一下内容是：</div>
    <!-- 给“锚”所在的标签，添加css样式 -->
    <p id="sg">
        <!-- <a name="sg"></a> -->
        三国的详细内容
    </p>
    <p id="sh">
        <!-- <a name="sh"></a> -->
        水浒的详细内容
    </p>

预览：

注意：

这里写锚点不这样写：<a name="sg"></a>，因为这样写，css样式，作用在a标签上。p段落里的文字，修饰不上。

这里说的当前活动的target元素，是指 id名叫sg 和 id名叫sh的这两个段落标签。

1.2.6 CSS3 :disabled 选择器

:disabled 选择器匹配每个禁用的的元素（主要用于表单元素）。

设置所有type="text"的禁用的输入元素的背景颜色

<style>
            /* 设置所有type="text"的禁用的输入元素的背景颜色 */
            .login input[type="text"]:disabled{
                color:red;
                background-color: #ddd;
            }
        </style>
        <div class="login">
            <div>
                <label for="">昵称：</label>
                <input type="text" name="" id="" value="香奈儿" disabled="disabled">
            </div>
            <div>
                <label for="">姓名：</label>
                <input type="text" name="" id="" value="夏天" disabled>
                <div>
                        <label for="">密码：</label>
                        <input type="password" name="" id="" value="" disabled>
                </div>
               

            </div>
        </div>

预览：

1.2.7 CSS3 :enabled 选择器

:enabled 选择器匹配每个启用的的元素（主要用于表单元素）。

<style>
        /* :enabled 选择器匹配每个启用的的元素（主要用于表单元素）。 */
        .login input[type="text"]:enabled{
            background-color: yellow;
        }
        .login input[type="password"]:enabled{
            background-color: lightgreen;
        }
    </style>
    <div class="login">
        <div>
            <label for="">别名：</label>
            <input type="text" name="" id="" value="小满">
        </div>
       <div>
            <label for="">密码：</label>
            <input type="password" name="" id="" value="123456">
        </div>
    </div>

预览：

1.2.8 CSS3 ::selection 选择器

::selection选择器匹配元素中被用户选中或处于高亮状态的部分。

::selection只可以应用于少数的CSS属性：color, background, cursor,和outline。

<style>
        ::selection{
            color: yellow;
            background-color: red;
        }
        ::-moz-selection{
            color: yellow;
            background-color: red;

        }
    </style>
</head>
<body>
    <h1>尝试选择本页的一些文本</h1>
    <p>这是一个段落</p>
    <h2>这是一个标题2标签</h2>
    <a href="">这是一个超链接标签</a>

注意：

cursor,和outline ，鼠标的样式和轮廓线的样式，实际预览无效果。所以，我们用这个选择器的时候，要么设置 color，要么设置background。

预览：

1.2.9 CSS3 ::before 选择器和::after 选择器

css2.1 :before选择器，绘制图形，并且给其设置定位，才会有作用。

:before 选择器向选定的元素前插入内容

css2.1 :after选择器，绘制图形，并且给其设置定位，才会有作用。

:after 选择器向选定元素的最后子元素后面插入内容。

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        width: 300px;
        height: 300px;
        background-color: blue;
        margin:20px auto 0;
        /* 相对定位 */
        position:relative;
    }
    .box::before{
        content:'';
        width: 100px;
        height: 100px;
        background-color: red;
        /* 绝对定位 */
        position:absolute;
        left:0;
        top:0;
    }
    .box::after{
        content:'';
        width: 100px;
        height: 100px;
        background-color: green;
        /* 绝对定位 */
        position:absolute;
        right:0;
        top:0;
    }
    </style>
</head>
<body>
    <div class="box">

    </div>

预览：

1.2.10 CSS3 :only-child 选择器

:only-child 选择器匹配属于父元素中唯一子元素的元素。

<style>
        /* :only-child 选择器 匹配属于父元素中 唯一子元素的 元素。 */
            .con p:only-child{
                 background-color: red;
             }
         </style>
     </head>
     <body>
         <div class="con">
             <div><p>小汤</p><p>小马</p></div>
             <div><p>小余</p></div>
             <div><span>小汤</span><p>小汤</p><span>小汤</span></div>
             <p><b>小汤</b></p>
             <div><p>小马过河</p></div>
         </div>

预览：

注意：

在你写 :only-child 的冒号的前面的这个元素，一定要有一个父元素对其进行包裹。

1.2.12 CSS3 :last-child 选择器

:last-child 选择器用来匹配父元素中最后一个子元素。

提示: p:last-child 等同于 p:nth-last-child(1)。

<style>
    /* .box p:last-child{
        background-color: orange;
    } */
    .box p:nth-last-child(1){
        background-color: orange;

    }
    </style>
</head>
<body>
        <div class="box">
                <p>段落</p>
                <p>段落</p>
                <p>段落</p>
            </div>

预览：

1.2.13 CSS3 element1~element2 选择器

element1~element2 选择器匹配出现在 element1 后面的 element2。

element1 和 element2 这两种元素 必须具有相同的父元素，但 element2 不必紧跟在 element1 的后面。

<style>
        /*注意： 段落标签后面的所有的ul，都可以被修饰到 */
    .con p~ul{
        background-color: red;
    }
    </style>
</head>
<body>
        <div class="con">
                <div>我是一个div标签</div>
                <ul>
                    <li>列表项</li>
                    <li>列表项</li>
                    <li>列表项</li>
                </ul>
        
                <p>我是一个p标签</p>
                <ul>
                    <li>列表项</li>
                    <li>列表项</li>
                    <li>列表项</li>
                </ul>
        
                <h2>我是一个h2标签</h2>
                <ul>
                    <li>列表项</li>
                    <li>列表项</li>
                    <li>列表项</li>
                </ul>
            </div>

预览：

1.2.14 CSS3 :first-of-type 选择器

:first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。（找一个集合中的第一个元素）

提示: :first-of-type 等同于 :nth-of-type(1) 。

 <style>
        .news p:first-of-type{
            background-color: orange;
        }
    </style>
	<div class="news">
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
    </div>

:nth-of-type(1) 写法：

<style>
        /* 
        :nth-of-type(1) 其中 数字1，表示序号，表示一个集合中的第1个元素
        */
        .news p:nth-of-type(1){
            background-color: orange;
        }
    </style>
	<div class="news">
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
    </div>

首行首字文字变大，效果实现：

<style>
        .box{
            width: 500px;
            height: auto;
            margin: 50px auto 0;
            padding: 10px;
            outline: 1px dashed red;
            text-align: justify;
            font-size: 14px;
        }
        .box p{
            line-height: 26px;
            text-indent: 28px;
        }
        .box p:first-of-type::first-letter{/*首行首字*/
            font-size: 52px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>各地法院适用民法典判决的各类“首例”案件广受关注，“八五”普法规划将“突出宣传民法典”明确为普法重点内容，一些地方建起了民法典主题公园……民法典正式施行一年来，对经济社会正产生越来越深刻的影响。</p>
        <p>法院适用民法典判决的各类“首例”案件广受关注</p>
    </div>

预览：

1.2.15 CSS3 :only-of-type 选择器

:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。

注意：为什么说是任意个元素，也就是说在这个选择器的前面 :only-of-type 你修饰谁，谁当前就要具有唯一性。

这个元素没有其他相同类型的兄弟元素，这句话：理解它可以有兄弟，但是兄弟不能是和它类型相同的元素。

<div>
 <p></p>
 <h3></h3>
 <span></span>
 </div>

 <style>       
	.reg p:only-of-type{
            background-color: green;
        }
    </style>
	<div class="reg">
        <div>
            <p>段落</p>
        </div>
        <div>
            <p>段落</p>
            <p>段落</p>
        </div>
        <div>
            <p>段落</p>
            <h3>标题3</h3>
            <span>span标签</span>
        </div>
    </div>

预览：

1.2.16 CSS3 :last-of-type 选择器

:last-of-type选择器匹配元素其父级是特定类型的最后一个子元素。

提示: 和:nth-last-of-type(1)是一个意思。

 <style>       
        .menu li:last-of-type{
            background-color: blue;
        }
    </style>
	<ul class="menu">
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>

:nth-last-of-type(1) 写法：

<style>   
        /* 
        :nth-last-of-type(1)  其中 数字1，表示序号，表示一个集合中 倒着数 第一个元素
        */
        .menu li:nth-last-of-type(1){
            background-color: blue;
        }
    </style>
	<ul class="menu">
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>

预览：

1.2.17 CSS3 :nth-child() 选择器

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。

n 可以是一个数字，一个关键字，或者一个公式。

 <style>
        .con p:nth-child(2){
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="con">
        <h1>标题1</h1>
        <!-- p*5{段落} -->
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
    </div>

注意：

:nth-child(2) 冒号前面的元素，可以不写。

  <style>
        .con :nth-child(2){
            background-color: red;
        }
    </style>

如果:nth-child(2) 冒号前面的元素，写出来。你写的元素第一要存在。第二要和后面的序号相匹配。

几个新手长见的错误的写法：

错误写法第一种情况：

 <style>
        .con p:nth-child(1){
            background-color: red;
        }
    </style>

你这样写 .con p:nth-child(1) ，你要表达的是这个集合中第一个元素是p，但是实际上你这个集合中第一个元素是h1,所有你找的对象就不对。你写的css样式，自然也就修饰不上去。

错误写法第二中情况：

<style>
        .con h1:nth-child(2){
            background-color: red;
        }
    </style>

你这样写 .con h1:nth-child(2)，你要表达的是你要找这个集合中第二个h1，但是实际上这个集合中只有一个h1，你要的第二个h1根本不存在。你写的css样式，自然也就修饰不上去。

1.2.18 CSS3 [attribute^=value] 选择器

The [attribute^=value] 选择器匹配元素属性值带指定的值开始的元素。

设置class属性值以"test"开头的所有div元素的背景颜色：

（1）找属性是class

（2）class属性值以"test"开头

（3）class属性，修饰的是什么标签，也要指定清楚

  /* 以指定的值开头的元素 */
<style>
        div[class^="test"]{
            background-color: #ffff00;
        }
    </style>
</head>
<body>
    <div class="first-test" id="" >你好</div>
    <div class="second">你好</div>
    <div class="test">你好</div>
    <div class="test123">你好</div>
    <p class="test">你好</p>

1.2.19 CSS3 [attribute*=value] 选择器

[attribute**=value*] 选择器匹配元素属性值包含指定值的元素。

设置class属性值包含"test"的所有div元素的背景颜色：

/* 包含指定值的元素 */
<style>
        div[class*="test"]{
            background-color: #ffff00;
        }
    </style>
</head>
<body>
    <div class="first-test" id="" >你好</div>
    <div class="second">你好</div>
    <div class="test">你好</div>
    <p class="test">你好</p>

1.2.20 CSS3 [attribute$=value] 选择器

[attribute$=value] 选择器匹配元素属性值带指定的值结尾的元素。

设置class属性值以"test"结尾的所有div元素的背景颜色：

/* 以指定值结尾的元素 */   
<style>
        div[class$="test"]{
            background-color: #ffff00;
        }
    </style>
</head>
<body>
    <div class="first-test-sub" id="" >你好</div>
    <div class="test-con" id="" >你好</div>
    <div class="second">你好</div>
    <div class="test">你好</div>
    <p class="test">你好</p>

1.2.21 CSS3 :nth-last-child() 选择器

:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

n可以是一个数字，一个关键字，或者一个公式。

指定每个 p 元素匹配同类型中的倒数第 2 个同级兄弟元素背景色：

注意：这里一定要能理解 同级兄弟这个词。

<style>
        .con p:nth-last-child(2){
            background-color: #ffff00;
        }
    </style>
</head>
<body>
    <div class="con">
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
    </div>
    <div class="news">
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
    </div>

n可以是一个公式。

2n表n的倍数，其中n取值范围是1开始 1 2 3....

 <style>
        /* 2n 表示n的倍数， */
        .con p:nth-last-child(2n){
            background-color: #ffff00;
        }
    </style>
</head>
<body>
    <div class="con">
        <p>1段落</p>
        <p>2段落</p>
        <p>3段落</p>
        <p>4段落</p>
        <p>5段落</p>
        <p>6段落</p>
    </div>

1.2.22 CSS3 :nth-of-type() 选择器

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。

n可以是一个数字，一个关键字，或者一个公式。

注意：

这里要满足2个条件：（1）同类型的（2）同级兄弟

指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色：

  <style>
         /* >大于号 是儿子选择器 */
        .con>p:nth-of-type(2){
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="con">
        <h1>标题1</h1>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
        <p>段落5</p>
        <p>段落6</p>
        <div class="sub">
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
        </div>
    </div>

1.2.23 CSS3 :nth-last-of-type() 选择器

:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。

n 可以是一个数字，一个关键字，或者一个公式。

指定每个p元素匹配同类型中的倒数第2个同级兄弟元素背景色：

 <style>
        /* 同类型中的同级兄弟 倒着数第2个元素 */
        .con p:nth-last-of-type(2){
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="con">
        <h1>标题1</h1>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
        <p>段落5</p>
        <p>段落6</p>
    </div>

补充：

css2.1中的选择器（不经常用，要了解一下）

CSS :invalid 选择器

 <style>
        .log input[type="email"]:invalid{
            border: 2px solid red;
        }
    </style> 
	<div class="log">
        邮箱：<input type="email" name="" id="">
    </div>

注意：写正确的邮箱，不会有红色边框，当你的邮箱格式写错误的时候，这个选择器里面的样式，就起作用了。

仙鹤__

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3新特性及核心知识（新增选择器）

CSS3是最新的CSS标准，增加了新的特性。1.1.1 什么是CSS?CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个1.1.2 CSS语法CSS 实例CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:选择器通常是您需要改变样式的 HTML 元素。
复制链接

扫一扫