CSS选择器

最新推荐文章于 2024-09-16 23:33:40 发布
最新推荐文章于 2024-09-16 23:33:40 发布
阅读量53 收藏
点赞数
文章标签： css sass html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Modyjue/article/details/124679491
版权

行内样式

<!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>CSS行内样式</title>
</head>
<body>
    <h3 style="color: #00FF00; ;">千珏</h3>
    <h3 style="color: #73FF16; ;">亚索</h3>
    <h3 style="color: #76f019; ;">剑魔</h3>
</body>
</html>

内部样式

<!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>CSS行内样式</title>
    <style>
        /*内部样式*/
        h3{
            color: #00FF00;
        }
    </style>
</head>
<body>
    <h3>千珏</h3>
    <h3>剑魔</h3>
    <h3>青钢影</h3>
</body>
</html>

 外部样式

<!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>CSS外部样式</title>
    <link rel="stylesheet" href="./CSS/外部样式.css">
</head>
<body>
    <h3>千珏</h3>
    <h3>剑魔</h3>
    <h3>青钢影</h3>
</body>
</html>
 /*外部样式*/
 h3{
    color: #00FF00;
}

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>标签选择器</title>
    <style>
        p{
            color: rgb(191, 238, 22);
            font-size: 66px;
        }
    </style>
</head>
<body>
    <p>千珏</p>
</body>
</html>

类选择器

 

<!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>
         p{
            color: rgb(191, 238, 22);
            font-size: 10px;
        }
        .buzhidao{
            font-size: 30px;
            color: red;
        }        
    </style>
</head>
<body>
    <p class="buzhidao">千珏</p>
    <p class="buzhidao">剑魔</p>
    <p>青钢影</p>
</body>
</html>

 id选择器

<!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>id选择器</title>
    <style>
         p{
            color: rgb(191, 238, 22);
            font-size: 10px;
        }
        .buzhidao{
            font-size: 30px;
            color: red;
        }    
        #qianjue{
            color: aqua;
            font-size: 16px;
        }    
    </style>
</head>
<body>
    <p class="buzhidao">千珏</p>
    <p class="buzhidao" id="qianjue">剑魔</p>
    <p>青钢影</p>
</body>
</html>

后代选择器

<!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>
        ul a {
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <a href="">00</a><br>

    <ul>
        <a href="">22</a>
        <a href="">33</a>
        <li><span><a href="">11</a></span></li>
        <li><span><a href="">11</a></span></li>
    </ul>
    <a href="">00</a>

</body>

</html>

 

 直接相邻选择器

<!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>
        #two+p {
            color: red;
            background-color: black;
            font-size: medium;
            font-weight: 100;
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
</head>

<body>
    <span>
        <p>x熊大</p>
        <p id="two">x熊二</p>
        <p>x熊三</p>
        <p>x熊四</p>
        <p>x熊五</p>
    </span>
</body>

</html>

 间接相邻选择器

<!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>
        #two~p {
            color: red;
            background-color: black;
            font-size: medium;
            font-weight: 100;
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
</head>

<body>
    <span>
        <p>x熊大</p>
        <p id="two">x熊二</p>
        <p>x熊三</p>
        <p>x熊四</p>
        <p>x熊五</p>
    </span>
    <p>熊六</p>
</body>

</html>

 属性选择器

<!DOCTYPE html>
<html lang="zh-CN">
<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 type="text/css">
        input[type=text]{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <input type="text"  name="" id="" value="" placeholder="请输入账号" >
    <input type="password" name="" id="" value="" placeholder="请输入密码">
</body>
</html>

 公共选择器

<!DOCTYPE html>
<html lang="zh-CN">
<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 type="text/css">
        input[type=text],
        input[type=password]{
            width: 100px;
            height: 100px;
        }
        input[type=text]{
            border: 0.1rem solid #000;
        }
        input[type=password]{
            border: 0.1rem solid #0f0;
        }
    </style>
</head>
<body>
    <input type="text"  name="" id="" value="" placeholder="请输入账号" >
    <input type="password" name="" id="" value="" placeholder="请输入密码">
</body>
</html>

 通配符选择器

<!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 type="text/css">
        * {
            color: rgb(249, 100, 0);
            background-color: rgba(245, 228, 4, 0.541);
            font-size: 10px;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <a href="">点点我试试看呗</a>
        </li>
    </ul>
    <p>执子之魂</p>
    <span>与子共生</span>
</body>

</html>

 

Modyjue
关注
CSS 选择器
qq_46291038的博客
08-19 539
一：选择器的种类 1.标签选择器 通过标签的名字，修改 css 样式 div{ width:200px; height:300px; } 2.通配符选择器 • 选择页面中所有的元素 *{ margin:0; padding:0; } 3.属性选择器 例子：例如<td>标签的一些符号含义： td[class] 带有class属性的td标签 td[class = ”a”] 类名为“a”的d.
css选择器
总结前端开发中遇到的问题，分享前端知识
08-25 6395
通配选择器（Universal selector）作用：选中页面中的所有元素;元素选择器（Type selector）也叫类型选择器、标签选择器
CSS教程之css选择器 、属性、值
10-30
本教程将深入探讨CSS选择器、属性以及值，帮助你更好地理解和应用CSS来美化你的网页。 首先，我们要了解CSS选择器。选择器是CSS的核心组成部分，它的主要作用是定位HTML文档中的特定元素，以便对这些元素应用样式。...
CSS 选择器支持列表
09-25
CSS 选择器支持列表 CSS 选择器是 CSS 中的一个重要组成部分，它允许开发者根据特定的规则来选择和应用样式到 HTML 元素上。下面是 CSS 选择器支持列表的详细解释： ### 一、基本选择器 * `E`：选择所有 HTML ...
react-React组件的css选择器
08-15
在React开发中，CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面，因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用，以及如何优化组件的...
CSS——盒子模型
m0_73557953的博客
09-12 398
margin : auto => 让target元素左右两边的margin都占据尽可能多的空间，就会各占一半，使元素居中。水平方向：margin-left : auto => 让target元素左边的margin占据尽可能多的空间，使元素靠右。首先CSS将所有的元素都看成一个盒子。
HTML、CSS实现树状图
p_s_p的博客
09-09 585
【代码】HTML、CSS实现树状图。
响应式CSS 媒体查询——WEB开发系列39
一条晒干的咸鱼的博客
09-15 1511
CSS媒体查询（Media Queries）是响应式设计中的核心技术之一，帮助我们在不同设备上展示不同的样式。通过媒体查询，开发者可以检测用户设备的特性，如屏幕宽度、高度、分辨率、方向等，针对性地调整网页布局。
CSS——网格布局（display: grid）之上篇
最新发布
懒羊羊大王的博客
09-16 505
CSS网格布局（CSS Grid Layout）是一种用于创建复杂网页布局的系统，它允许开发者以二维系统（行和列）来控制元素的布局。跟 Flexbox 类似，网格布局也是作用于两级的 DOM 结构。设置为 display: grid 的元素成为一个网格容器（grid container）。它的子元素则变成网格元素（grid items）。下面将详细介绍网格布局：
unocss 一直热更新打印[vite] hot updated: /__uno.css
Rverdoser的博客
09-12 534
请注意，如果 __uno.css 是一个正在生成的文件，并且正在被热更新，这通常是预期内的行为。查看 unocss 文档：查看 unocss 的官方文档，看是否有其他用户遇到类似问题，或者是否有相关的解决方案。确认代码变更：首先确认你的代码中是否有对 unocss 相关的变更，如果有，这是正常的热更新行为。查看 Vite 日志：如果问题依然存在，查看 Vite 的详细日志，可能会有更多的线索。检查 unocss 配置：确保 unocss 的配置是正确的，没有配置错误导致的问题。
【CSS in Depth 2 精译_030】5.2 Grid 网格布局中的网格结构剖析（下）
PeacefulWinter的博客
09-13 1015
本篇主要对 Grid 网格布局中的网格结构进行了深入剖析，重点演示了网格布局对各页面内容的排布方法，同时与 Flexbox 布局的区别与联系进行了归纳。通过具体的案例阐述了两种布局方法所适用的场景，非常适合希望进阶 CSS 的朋友完善 CSS 知识体系，强烈建议收藏。
HTML/CSS/JS学习笔记 Day4（CSS--C1 选择器&声明）
给bug两拳的博客
09-13 1077
C1 选择器&声明：1.0 概述、1.1 选择器（基础选择器 / 复合选择器）、1.2 声明（字体属性 / 文本外观 / 引入方式 / 调试方式 / 快捷键tab）
【CSS】 Grid布局：现代网页设计的基石
一位前行者的博客
09-12 859
CSS Grid布局是现代网页设计中不可或缺的布局工具，它提供了一种高效、灵活的方式来创建复杂的二维布局。本文深入探讨了CSS Grid布局的基础知识，包括如何定义网格、管理网格项以及利用命名网格线和间隙来优化布局。我们还将探讨CSS Grid布局相较于传统布局技术的优势，如其简洁的语法、强大的对齐控制和响应式设计能力。通过实际案例分析，本文将向你展示如何将CSS Grid布局应用于实际项目中，以创建美观且功能强大的用户界面。
Html css水平居中+垂直居中+水平垂直居中的方法总结
qq_36158551的博客
09-16 1029
（1）块级元素（如div）：独占一行，不和其他元素在一起，可以设置宽和高；当没设置宽和高时，宽度和父级宽度一样，高度由内容的高度决定；当设置宽和高时，元素的宽高就是设置值，当内容超过宽高值时，元素宽高值也不变高，会溢出。（2）行级元素（如span）：不会独占一行，和其它元素在一起，不可以设置宽和高，由里面的内容决定；设置的宽高无效。（3）行内块级元素（如img）：不会独占一行，可以和其它元素在一起，可以设置宽和高；当没设置宽和高时，宽高有元素内容决定；当设置宽和高时，元素内容宽高为设置值。
CSS选择器详解：基础到高级实例
本篇笔记详细介绍了CSS选择器的基本概念和使用方法，分为三个主要部分： 1. **基本选择器**： - **通用元素选择器(*)**：此选择器匹配文档中的所有元素，可用于清除默认样式或设置全局样式。 - **标签选择器(E)**...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值