前端学习day02--CSS选择器02

最新推荐文章于 2024-07-18 15:48:23 发布
最新推荐文章于 2024-07-18 15:48:23 发布
阅读量60 收藏
点赞数
分类专栏： 前端 文章标签： 前端 学习 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50833617/article/details/131365664
版权

1.选择器02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 后代选择器 */
        div p {
            color: #3016c5;
        }
        /* 子代选择器 */
        div>a {
            color: blueviolet;
        }
        /* 并集选择器 */
        h1,
        span {
            color: coral;
        }
        /* 交集选择器 */
        p.box{
            color: hotpink;
        }
        /* 伪类选择器 :link,:visited,:hover,:active*/
        /* input:focus  ,   input:checked */
        a:link{
            color: #000;
        }
        a:visited{
            color: #0fb258;
        }
        a:hover{
            color: red;
            background-color: burlywood;
        }
        a:active{
            color: #d837b8;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">0987654321</a>
        <p>
            123456789
            <a href="#">12345678</a>
        </p>
        <p class="box">hhhhhhhhh</p>
    </div>
    <span>dsfgfgthgj</span>
    <h1>sfhgjli</h1>
</body>
</html>

2.emmet语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>emmet语法</title>
    <style>
        .box{
            /* w300+h200+bgc */
            width: 300px;
            height: 200px;
            background-color: #b04471;
        }
    </style>
</head>
<body>
    <!-- 同级 div+p-->
    <div></div>
    <p></p>
    <!-- p.box -->
    <p class="box"></p>
    <!-- #box -->
    <div id="box"></div>
    <!-- ul>li -->
    <ui>
        <li></li>
    </ui>
    <!-- ul>li{2334566} -->
    <ui>
        <li>2334566</li>
    </ui>
    <!-- ui>li*4 -->
    <ui>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ui>
    <!-- ui>li{$}*3 -->
    <ui>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ui>

</body>
</html>

 3.背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: rgba(200, 255,160, 0.5);
            background-image: url(../day01/素材/专辑.jpg);
            /* 背景平铺background-repeat:repeat/no-repeat/repeat-x/repeat-y */
            /* 背景位置 background-position: center center*/
            background-repeat: no-repeat;
            background-position: -100px 0;
            /* 复合属性 */
            background: pink url(../day01/素材/专辑.jpg) no-repeat -50px bottom;
        }
    </style> 
</head>
<body>
    <div>1</div>
</body>
</html>

 4.显示模式和CSS三大特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 显示模式
    块-独占一行，可以设置宽高
    行内-不换行，设置宽高不生效，尺寸和内容大小相同
    行内块-不换行，宽高生效
    相互转换--块display:block,行内块display:inline-block,行内display:inline -->

    <!-- p标签不能嵌套div,p,h等块级元素
    a标签不能嵌套a标签 -->


    <!-- CSS三大特性 -->
    <!-- 继承性
    子元素继承父元素样式--文字控制属性都可以继承 -->
    <!-- 层叠性 -->
    <!-- 优先级 -->
    
</body>
</html>

 5.案例_导航

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航</title>
    <style>
        a{
            text-decoration:none;
            width: 120px;
            height: 58px;
            background-color: brown;
            display: inline-block;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
        .bgi1{
            background-image: url(../01选择器/素材/bg1.png);
        }
        .bgi2{
            background-image: url(../01选择器/素材/bg2.png);
        }
        .bgi3{
            background-image: url(../01选择器/素材/bg3.png);
        }
        .bgi4{
            background-image: url(../01选择器/素材/bg4.png);
        }
        .bgi1:hover{
            background-image: url(../01选择器/素材/bg5.png);
        }
        .bgi2:hover{
            background-image: url(../01选择器/素材/bg6.png);
        }
        .bgi3:hover{
            background-image: url(../01选择器/素材/bg7.png);
        }
        .bgi4:hover{
            background-image: url(../01选择器/素材/bg8.png);
        }
    </style>
</head>
<body>
    <!-- 选多行alt+shift+单击 -->
   <a href="#" class="bgi1">导航1</a>
   <a href="#" class="bgi2">导航2</a>
   <a href="#" class="bgi3">导航3</a>
   <a href="#" class="bgi4">导航4</a>
</body>
</html>

 

王壮_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS3新增选择器 第二部分 （:checked 选择器 :target 选择器 :disabled 选择器 :enabled 选择器）
weixin_72303943的博客
07-19 315
CSS3新增选择器 第二部分 （:checked 选择器 :target 选择器 :disabled 选择器 :enabled 选择器）
CSS学习笔记day02 --复合选择器
m0_48625424的博客
12-06 385
复合选择器
css之选择器
yangsen99的博客
05-25 342
一、基本选择器 1、id选择器 #1、作用： 根据指定的id名称，在当前界面中找到对应的唯一一个的标签，然后设置属性 #2、格式 #+id名称 { 属性：值; } #3、注意点： 1、在企业开发中如果仅仅只是为了设置样式，通常不会使用id，在前端开发中id通常是留给js使用的 2、每个标签都可以设置唯一一个id，id就相...
CSS选择器
qq_62755767的博客
04-17 6855
1.CSS选择器作用：选择器（选择符）就是根据不同需求把不同的标签选择出来 例如上图，如果想用css改变第二个div的样式，或者想改变<ul>中的<li>的样式，就需要使用选择器 2.选择器分类：选择器分为基础选择器和复合选择器两大类，基础选择器是由单个选择器组成的，其中包括标签选择器，类选择器，id选择器和通配符选择器 1）标签选择器：用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的C...
css 第二个孩子选择器,详解CSS3选择器:nth-child和:nth-of-type之间的差异
热门推荐
weixin_42601134的博客
08-04 1万+
先看一个简单的实例，首先是HTML部分：我是第1个p标签我是第2个p标签 然后两个选择器相对应的CSS代码如下：p:nth-child(2) { color: red; }p:nth-of-type(2) { color: red; }上面这个例子中，这两个选择器所实现的效果是一致的，第二个p标签的文字变成了红色：尽管上面两个demo的最后效果一致，但是两个选择器之间存在差异是必然的。对于:nt...
css获取同类名下的第二个开始
weixin_43827751的博客
12-17 3609
css css获取同类名下的第二个开始 代码如下 .first-box:nth-of-type(n+2){ margin: 0 auto; margin-top: 30px; }
前端学习day02--CSS选择器01
qq_50833617的博客
06-23 44
CSS：选择器，案例：专辑卡片，歌词
web前端实习Day3--css选择器
LXSJZBD的博客
03-06 937
因为h系列标签的默认字体大小的单位是em,是按照父元素字体大小来确定的。所以想要改变a标签的文字颜色需要选择器直接选择到a标签。因为a标签的字体颜色是由多个伪类选择器共同生成的，①h系列标签不要继承字体大小, 否则会变得比继承的字体要大。关于文本设置的属性会被继承，如：color，font，其他不会。单独定义.css文件，在css文件里面直接写css代码（无需style标签）标签的样式由选择器的样式叠加而来，共同生效。②a标签不会继承字体颜色。定义style标签 在style标签内定义css代码。
系统学习前端之CSS---day04
weixin_63522291的博客
12-25 1565
文本的baseline是字母x的下方inline-block默认的baseline 是margin-bottom的底部，没有margin就是盒子底部inline-block有文字的时候，baseline是最后一行文本x的下方vertical-align这个属性的各种值理解baselin（默认值）：基线对齐top：把行内级盒子的顶部和line box顶部对齐middle：行内级盒子的中心点与父盒子基线加上x-height一半的线对齐。
练习前端-CSS引入、基础选择器-day04
08-31
本练习主要关注如何引入CSS以及基础选择器的使用，这些都是构建动态、美观网站的基础。我们将会探讨以下知识点： 1. **CSS引入方式**： - **内联样式**：通过在HTML元素的`style`属性中直接编写CSS代码，如`;">...
ylsislove#make-a-little-progress-every-day#前端-CSS选择器优先级1
07-25
声明在样式表或文档中越靠后出现，权重越大。如果样式表中有通过 @import 导入的样式表，一般认为出现在导入样式表中的声明在前，主样式表的所有声明在后。
day5-html-css-js
05-10
1. **选择器**：了解各种CSS选择器，如类选择器（`.class`），ID选择器（`#id`），元素选择器（`element`），以及更高级的选择器如伪类（`:hover`, `:active`）和组合选择器（`E F`，`E > F`，`E + F`）。...
练习前端-CSS权重计算、复杂选择器、基础属性-day05
08-31
在Day05.css和Day05.html文件中，你可以实践这些概念，通过编写和调试CSS代码，加深对权重计算、复杂选择器和基础属性的理解。通过实际操作，你将更好地掌握如何有效地控制网页元素的样式，提升前端开发技能。
vue3前端开发-小兔鲜项目-人气推荐栏目的前端渲染
最新发布
yrldjsbk的博客
07-18 350
除了必要的import导入之外，剩余的就是直接调用了，赋值了。经历过上一次的，新鲜好物的栏目渲染之后，我们已经熟练了，vue3的接口调用，数据渲染到页面中的整体流程。如图，我们已经做好了，列表的渲染赋值。里面可以看见，顶部是脚本，中间是模板，底部是样式。在首页面，内容里面，会看见很多内容，上期内容我们已经完成了新鲜好物的渲染操作。1：打开接口文档，查询：人气推荐栏目的接口地址信息和参数，返回值对象信息等。以上内容就是，已经写好的，HomeHot的模板代码了。如图，地址信息和调用的方式已经清楚了。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1296
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
【前端】JavaScript入门及实战6-10
weixin_45980065的博客
07-17 569
如果使用Number表示的数字超过了最大值，则会返回一个Infinity，表示正无穷，typeof是number。NaN是一个特殊的数字，不是数字：not a number，是一个字面量，typeof是number。但是注意，null和undefined这两个值没有toString()方法，如果调用会报错。它会将null直接转换为"null"，将undefined直接转换为"undefined"当声明一个变量，但是并不给变量赋值时，它的值就算undefined。该方法不会影响原变量，它会将转换的结果返回。
【Vue】 style中的scoped
DX390609的博客
07-15 168
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
day--和--day区别
04-18
"day--"和"day"是两种不同的操作符，它们在编程中有着不同的含义和用法。 1. "day--"是一个后缀自减操作符，用于将变量的值减1，并返回减1之前的值。例如，如果有一个变量day的值为5，执行day--操作后，day的值将变为4，并且表达式的结果为5。这个操作符通常用于循环或迭代中，用于递减计数器或索引。 2. "day"是一个变量名或标识符，用于表示一个存储数据的位置。它可以是任何合法的变量名，用于存储某个特定类型的数据。例如，可以定义一个变量day来表示一周中的某一天。 总结起来，"day--"是一个操作符，用于递减变量的值；而"day"是一个变量名，用于表示存储数据的位置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值