Day04-HTML5 CSS3

已于 2023-12-02 15:17:21 修改
阅读量23 收藏
点赞数
文章标签： html5 css3 前端
于 2023-12-02 11:14:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Spirs/article/details/134749323
版权

一.相邻兄弟选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 相邻兄弟选择器  +  */
        span+div {
            color: red;
        }
    </style>
</head>

<body>

    <div class="content">
        <span>span1</span>
        <div>div1</div>
        <span>span2</span>
        <span>span3</span>
        <span>span4</span>
        <span>span5</span>
        <span>span6</span>
    </div>

</body>

</html>

二.匹配选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 匹配选择器  ~  */
        /* 位于div 后面的所有span元素都会被选中 */
       .content div ~ span{
            color: red;
        }
    </style>
</head>

<body>

    <div class="content">
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
        <span>span4</span>
        <div>div1</div>
        <span>span5</span>
        <span>span6</span>
    </div>
    <div class="content2">
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
        <span>span4</span>
        <div>div1</div>
        <span>span5</span>
        <span>span6</span>
    </div>

</body>

</html>

三.属性选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* [attribute]用于选取带有指定属性的元素。*/
        /* [title] {
            color: red;
        } */

        /* [attribute=value] 用于选取带有指定属性和值的元素。 */
        /* [data-index="1"]{
            color: red;
        } */

        /* [attribute^=value]匹配属性值以指定值开头的每个元素。 */
        /* [class^="box"]{
            color: red;
        } */

        /* [attribute$=value]匹配属性值以指定值开头的每个元素。 */
        /* [class$='x']{
            color: red;
        } */

        /* [attribute*=value]匹配属性值中包含指定值的每个元素。 */
        /* [class*='2'] {
            color: red;
        } */

        /* [attribute~=value]用于选取属性值中（包含）指定词汇的元素，还可以空格为分隔符。 */
        /* [class~="box2"] {
            color: red;
        } */

        /* [attribute|=value]用于选取带有以指定值（开头）的属性值的元素，还可以连字符为分隔符。 */
        /* [class|='box1']{
            font-family: "华文彩云";
        } */

        /* ::selection {
            background-color: pink;
            color: white;
        } */
    </style>
</head>

<body>

    <div class="box" data-index="1">box</div>
    <div class="box2" data-index="2">box2</div>
    <div class="box box3">box box3</div>
    <div class="box1-box2-box3" title="">box1 box2 box3</div>
    <div class="box-4box5box_4">box-4box5box_4</div>
    <div class="box6" title="">box6</div>
    <div class="box-1 box-2 box-3">box-1 box-2 box-3</div>

</body>

</html>

四.整体结构类型选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 整体结构性伪类选择器 */
        /* :last-child */
        /* :first-child */

        /* 选中当前 content里面的第一个h1 */
        .content h1:first-child {
            color: springgreen;
        }

        /* 选中当前 content里面的最后一个h1 */
        /* 当h1不再是整体结构中的最后一个元素 那么此句不会生效 */
        .content h1:last-child {
            color: orange;
        }

        /* 标签结构类型 */
        /* :last-of-type */
        /* :first-of-type */
        .content2 h1:first-of-type{
            color: red;
        }
        
        .content2 h1:last-of-type{
            font-family: "华文彩云";
        }
    </style>
</head>

<body>

    <div class="content">
        <h1>张学友演唱会上突然头晕跌倒1</h1>
        <h1>张学友演唱会上突然头晕跌倒2</h1>
        <h1>张学友演唱会上突然头晕跌倒3</h1>
        <h1>张学友演唱会上突然头晕跌倒4</h1>
        <h1>张学友演唱会上突然头晕跌倒5</h1>
        <h1>张学友演唱会上突然头晕跌倒6</h1>
    </div>

    <div class="content2">
        <p>张学友演唱会上突然头晕跌倒0</p>
        <h1>张学友演唱会上突然头晕跌倒1</h1>
        <h1>张学友演唱会上突然头晕跌倒2</h1>
        <h1>张学友演唱会上突然头晕跌倒3</h1>
        <h1>张学友演唱会上突然头晕跌倒4</h1>
        <h1>张学友演唱会上突然头晕跌倒5</h1>
        <h1>张学友演唱会上突然头晕跌倒6</h1>
        <p>张学友演唱会上突然头晕跌倒7</p>
    </div>

</body>

</html>

五.指定子元素的序号

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- :nth-child(n) 对指定序号的子元素设置样式（从前往后数） -->
    <style>
        /* 2n偶数 2n+1奇数 odd奇数 even偶数 */
        .content p:nth-child(4n) {
            font-family: "华文彩云";
        }

        /* .content p:nth-child(2n+1) {
            color: red;
        } */


        /* :nth-last-child(n) 对指定序号的子元素设置样式（从后往前数）。参数同上。 */
        /* .content h3:nth-last-child(2n){
            color: aqua;
        } */
        /* .content h3:nth-last-child(4n){
            color: aqua;
        } */


        /* :nth-of-type(n) 匹配指定序号的同一种类型的子元素（从前往后数）。参数同上。 */
        /* .content h3:nth-of-type(4n){
            color: aqua;
        } */

        /* :nth-last-of-type(n) 匹配 指定序号的同一种类型的子元素（从后往前数）。参数同上。 */
        .content h3:nth-last-of-type(4n){
            color: aqua;
        }
</style>

</head>

<body>

    <div class="content">
        <!-- <p>中秋国庆连休8天1</p>
        <p>中秋国庆连休8天2</p>
        <p>中秋国庆连休8天3</p>
        <p>中秋国庆连休8天4</p>
        <p>中秋国庆连休8天5</p>
        <p>中秋国庆连休8天6</p> -->
        <h3>中秋国庆连休8天1</h3>
        <h3>中秋国庆连休8天2</h3>
        <h3>中秋国庆连休8天3</h3>
        <h3>中秋国庆连休8天4</h3>
        <h3>中秋国庆连休8天5</h3>
        <h3>中秋国庆连休8天6</h3>
        <strong>丈夫割草归来采一大把野花送妻子1</strong>
        <strong>丈夫割草归来采一大把野花送妻子2</strong>
        <strong>丈夫割草归来采一大把野花送妻子3</strong>
        <strong>丈夫割草归来采一大把野花送妻子4</strong>
        <strong>丈夫割草归来采一大把野花送妻子5</strong>
        <strong>丈夫割草归来采一大把野花送妻子6</strong>
    </div>

</body>

</html>

六.其他伪类选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*  - :root：将样式应用到页面的根元素中。root选择器就是将样式应用到根元素中。在整个HTML页面中，指的就是整个“html”部分。
            - :empty 指定当元素内容为空白时使用的样式。
            - :not(selector)排除selector选择器选中的元素，不对它们应用样式解析。
            - :target 对页面中某个target元素指定样式，该样式只在用户单击了页面中的链接，并且跳转到target元素后生效。 
        */
        /* :root{
            color: purple;
        } */

        /* :empty {
            width: 200px;
            height: 200px;
            background-color: pink;
        } */

        h3:not(.item) {
            color: orange;
        }

        .detail {
            width: 1200px;
            height: 500px;
            margin: 20px auto 0px;
            background-color: skyblue;
        }

        :target {
            color: springgreen;
        }
    </style>
</head>

<body>

    <a href="#like">点击定位到猜你喜欢</a>
    <a href="#goodproduct">点击定位到品质好货</a>
    <div class="content">
        <p></p>
        <p>中秋国庆连休8天2</p>
        <p>中秋国庆连休8天3</p>
        <p>中秋国庆连休8天4</p>
        <p>中秋国庆连休8天5</p>
        <p>中秋国庆连休8天6</p>
        <h3></h3>
        <h3>中秋国庆连休8天2</h3>
        <h3>中秋国庆连休8天3</h3>
        <h3>中秋国庆连休8天4</h3>
        <h3>中秋国庆连休8天5</h3>
        <h3>中秋国庆连休8天6</h3>
        <strong></strong>
        <strong>丈夫割草归来采一大把野花送妻子2</strong>
        <strong>丈夫割草归来采一大把野花送妻子3</strong>
        <strong>丈夫割草归来采一大把野花送妻子4</strong>
        <strong>丈夫割草归来采一大把野花送妻子5</strong>
        <strong>丈夫割草归来采一大把野花送妻子6</strong>
    </div>
    <div class="detail"></div>
    <div class="detail"></div>
    <h1 id="goodproduct">品质好货</h1>
    <div class="detail"></div>
    <div class="detail"></div>
    <h1 id="like">猜你喜欢</h1>
    <div class="detail"></div>
    <div class="detail"></div>

    <script>

        var h3 = document.getElementsByTagName("h3");

        function siblings(ele) {
            for (var i = 0; i < ele.length; i++) {
                ele[i].className = ""
            }
        }
        for (var i = 0; i < h3.length; i++) {
            h3[i].onclick = function () {
                siblings(h3)
                this.className = "item";
            }
        }

    </script>

</body>

</html>

七.表单状态伪类选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*  - :disabled 指定当前元素处于不可用状态时的样式。
            - :enabled 指定当前元素处于可用状态时的样式。
            - :checked 指定表单中单选框或复选框处于选中状态时的样式。 */
        :disabled{
            width: 20px;
            height: 20px;
        }
        [type="email"]:enabled{
            width: 200px;
            height: 30px;
        }

        :checked{
            width: 20px;
            height: 20px;
        }
    </style>
</head>

<body>

    <form>
        <div>
            邮箱: <input type="email" disabled>
        </div>
        <div>
            手机号: <input type="tel">
        </div>
        <div>
            性别：
            男<input type="radio" name="gender">
            女<input type="radio" name="gender">
        </div>
        <div>
            爱好 :
            <input type="checkbox">敲代码
            <input type="checkbox">听音乐
            <input type="checkbox">看电影
            <input type="checkbox">美食
        </div>
    </form>

</body>

</html>

八.内容选中伪类

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
        .content{
            width: 800px;
            height: 800px;
            border: 1px solid red;
            margin: 100px auto;
        }
        ::selection{
            color: purple;
            background-color: aqua;
        }
    </style>
</head>

<body>

    <div class="content">
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111122222222222222222222222222222222222222222222222222354444444444444488888888888888888888888888888888888888888888888888666666666666
    </div>

</body>

</html>

九.内容追加伪元素

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*  - ::before:向当前的元素前面追加内容(创建一个伪元素，其将成为匹配选中的元素的第一个子元素)
            - ::after:向当前的元素内容后面追加内容(创建一个伪元素，作为已选中元素的最后一个子元素) */
            /* 
            :before是css2的写法
            ::before是css3的写法
            */
        .content:before {
            content: "这是追加到前面的文字";
            position: absolute;
            display: block;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .content:after{
            content: "这是追加到后面的文字";
            background-color: purple;
        }
    </style>
</head>

<body>

    <div class="content">
        原本内容
    </div>

</body>

</html>

十.JS新增选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="box">
        <div class="box2"></div>
        <input type="radio">
    </div>
    <div class="box2">
        <h3>12345678</h3>
        <h3>12345678</h3>
        <h3>12345678</h3>
        <h3>12345678</h3>
        <h3>12345678</h3>
        <h3>12345678</h3>
    </div>

    <script>

        // 根据id获取元素
        // getElementById(id);
        // 根据类名获取元素
        // getElementsByClassName(classname)[0];
        // 根据标签名获取元素
        // getElementsByTagName(tagname);

        // JS新增一个选择器
        // 获取一个元素
        // document.querySelector('selector');
        // 获取多个元素
        // document.querySelectorAll()
        var box = document.querySelector('.box');
        console.log(box);

        var input = document.querySelector('[type="radio"]');
        console.log(input);

        var eleh3 = document.querySelectorAll('h3');
        console.log(eleh3);

    </script>

</body>

</html>

前端拓海
关注
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4755
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
Web前端html5+css3前端开发入门学习笔记
m0_62516225的博客
10-16 2126
Web前端html5+css3前端开发入门学习笔记
20day-HTML&CSS-1~24
DaB210的博客
03-31 982
20day-HTML&CSS-1~24
day10-HTML5&CSS3提高
weixin_48697269的博客
04-22 925
目标 能够说出 3~5 个 HTML5 新增布局和表单标签 能够说出 CSS3 的新增特性有哪些 HTML5新特性 概述 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 语义化标签 （★★） 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的 <div class=“header”> </div>
前端Web开发HTML5+CSS3+移动web视频教程 Day3 CSS 第1天
chengkai730的博客
06-29 1569
Day3 CSS 第1天
系统学习前端之CSS---day04
weixin_63522291的博客
12-25 1679
文本的baseline是字母x的下方inline-block默认的baseline 是margin-bottom的底部，没有margin就是盒子底部inline-block有文字的时候，baseline是最后一行文本x的下方vertical-align这个属性的各种值理解baselin（默认值）：基线对齐top：把行内级盒子的顶部和line box顶部对齐middle：行内级盒子的中心点与父盒子基线加上x-height一半的线对齐。
100行Html5+CSS3+JS代码实现元旦倒计时界面
热门推荐
知心宝贝的博客
12-29 1万+
一、前言 二、圣诞树 效果展示： 三、步骤 如果之前看过我这篇文章的 1.下载VSCode 下载链接：VSCode 在Hbuilder、idea运行也是可以的，这里推荐使用VSCode 2.配置插件 三个插件对应的功能： 改写标签后自动完善 切换成中文页面 让代码在网页中打开，默认键Alt+B 3.构建三个文件 在桌面新建一个空的文件夹，用VSCode打开 在VSCode新建三个文件 index .html domtree....
HTML5+CSS3之快速入门 day6-day10布局，表单，css精灵，css hack，BFC规范
m0_47268176的博客
11-30 1万+
day06 布局核心： 盒模型（间距） 浮动 （并排） 定位 （覆盖+ 特殊位置） 定位类型position 静态定位 position:static; 默认值 静态定位不能使盒子位置变化 不适合布局 作用：解决低版本浏览器兼容问题 相对定位 position:relative; 能不能使盒子发生位置变化 yes ​ 2. 参考对象：自身初始位置 ​ 3. 脱离不脱离标准流 不脱离标准（保留原来位置 ） ​ 4. 是否适合布局：不适合
HTML5+CSS3实现鼠标悬停图文卡片动画切换特效
qq_36595761的博客
07-15 2589
HTML5+CSS3实现鼠标悬停图文卡片动画切换特效
day07.11.HTML-CSS盒模型练习
m0_61566562的博客
06-29 818
【代码】HTML-CSS盒模型练习。
day5-html-css-js
05-10
在"day5-html-css-js"的学习资源中，你可能会深入学习以下HTML知识点： 1. **HTML5新特性**：HTML5增加了许多新的标签，如`<header>`, `<footer>`, `<article>`, `<section>`等，使页面结构更加清晰，便于SEO和无...
高级软件人才培训专家-day01-HTML-CSS
03-10
### 3. Web标准 - **Web标准**：由一系列标准组成，主要用于规范网页的结构、表现和行为。这些标准大多由W3C（World Wide Web Consortium，万维网联盟）负责制定。 - **Web标准的组成部分**： - **HTML**：负责...
day10-HTML5&CSS3提高.pdf
10-11
HTML5与CSS3是现代网页开发的基石，它们带来了许多增强功能和改进，使得网页设计更加丰富和动态。HTML5的新特性主要集中在增强网页的语义化、多媒体支持以及表单元素的扩展。 语义化标签是HTML5的一大亮点，它们...
day01-HTML-CSS.md
03-21
day01-HTML-CSS.md
day10-HTML5&CSS3提高.md
01-21
day10-HTML5&CSS3提高.md
【HTML5】html5开篇基础（4）
Easonmax的博客
09-28 873
标签用于定义描述列表，该标签会与(定义项目)和(描述每一个项目)一起使用。名词1名词1解释1名词1解释21.
【HTML5】html5开篇基础（3）
Easonmax的博客
09-28 1269
定义表格头部单元格（header cell），通常用于表头中的内容，文本通常为粗体且居中显示。：定义表格的主体部分，包含实际的数据行。只是单纯语义化，不会对内容做任何修饰。）分组在一起，提供一种结构化的方式来组织表格的头部。：定义表格的单元格（data cell），用于包含表格中的数据。），而不仅仅是一行表头。只是单纯语义化，不会对内容做任何修饰。：定义表格的表头部分。所要针对的单元格是 左上 的单元格。学习前端知识，更好的运用它。：定义表格的一行（row）。标签创建表格，并通过。这篇文章我们讲表格。
html5 + css3（上）
2301_76979886的博客
09-28 1997
英文状态!→回车（或者tab键），快速生成骨架，标签名说明dl表示自定义列表的整体，用于包裹dt/dd标签dt表示自定义列表的主题dd表示自定义列表的针对主题的每一项内容dd前会默认显示缩进效果⭕️dl标签中只允许包含dt/dd标签⭕️li标签可以包含任意内容。
如何用JavaScript编写一个简单的计数器
最新发布
Jiaberrr的博客
10-01 325
在网页开发中，计数器是一种常见的功能，它可以帮助我们记录点击次数、显示时间等。下面我将介绍如何在HTML页面中使用JavaScript实现一个基本的计数器。
HTML5与CSS3：前端开发的革新与标准演变
HTML5和CSS3是现代Web开发中的核心技术，它们分别代表了网页结构语言和样式表语言的最新进展。2010年7月20日，在WebRebuild.org/W3Cday的活动上，主题演讲者谢子斌（ZiBin）针对这两者进行了深入探讨。 首先，他...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值