CSS之选择器

最新推荐文章于 2022-11-21 21:18:46 发布
最新推荐文章于 2022-11-21 21:18:46 发布
阅读量49 收藏
点赞数
分类专栏： java学习 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sun_tf_sir/article/details/116800113
版权

CSS之选择器

Cascading Style Sheet 层叠级联样式表

说简单就是美化网页（字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动, …）

<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="关键词">
    <meta name="description" content="关键词的描述">
    <link rel="shortcut icon" href="img/shouye.jpg">
    <title>登录界面</title>
<!--
    规范： <style> 可以编写css的代码 每一个声明最好以；结尾
    语法：
       选择器{
          声明1；
          声明2；
          声明3；
       }
 -->
    <style>
        h1 {
            color: chocolate;
        }
    </style>
</head>
<body>
<h1>注册</h1>
</body>

CSS的优势：

  1. 内容和表现分离
  2. 网页结构表现统一，可以实现复用
  3. 样式十分丰富
  4. 建议使用独立于html的css文件
  5. 利用SEO，容易被搜索引擎收录！

CSS的三种导入方式

1.行内样式
<body>
<h2 style="color: chocolate">你好</h2>
</body>
2.内部样式
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
        /*内部样式，*/
        h1 {
            color: cornflowerblue;
        }
    </style>
</head>
<body>
<h1>注册</h1>
</body>
3.外部样式
h1{
    color: cyan;
}

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <title>登录界面</title>
</head>
<body>
<h1>注册</h1>
</body>

选择器

作用：选择页面上的某一个或者某一类元素

1.基本选择器

1.标签选择器

2.类选择器

3.ID选择器

优先级：

这里不遵循就近原则

ID选择器 > 类选择器 > 标签选择器

1.1 标签选择器

<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
        /*标签选择器：会选择这个页面上所有的这个标签的元素*/
        h1 , p{
            color: #ed1408;
        }
    </style>
</head>
<body>
<h1>注册</h1>
<p>自主学习</p>
</body>

1.2类选择器

<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
        /*类选择器  .class的名称  也可以多个标签归类，是同一个class*/
        .zc {
            color: chartreuse;
        }
    </style>
</head>
<body>
<h1 class="zc">注册</h1>
<p class="zc">自主学习</p>
<p >学习</p>
</body>

1.3 ID选择器

<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
        /*ID选择器  # ID的名称  多个归类需要用逗号隔开*/
        #zc ,#zcc{
            color: #ff6167;
        }
    </style>
</head>
<body>
/*这里ID值需要唯一*/
<h1 id="zc">注册</h1>
<p id="zcc">自主学习</p>
</body>
2层次选择器
1. 后代选择器

在某个元素的后面

<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
        /*后代选择器*/
        body p {
            color: red;
        }
    </style>
</head>
<body>
<p>世界</p>
<ul>
    <li><p>你好</p></li>
</ul>
</body>
2. 子选择器
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
   /*子选择器*/
        body>p{
            color: red;
        }
    </style>
</head>
<body>
<p>世界</p>
<ul>
    <li><p>你好</p></li>
</ul>
</body>
</html>
3.相邻兄弟选择器
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
   /*兄弟选择器*/
        .sj+p{
            color: red;
        }
    </style>
</head>
<body>
<p>世界</p>
<p class="sj">全世界</p>
<p>全部世界</p>
<ul>
    <li><p>你好</p></li>
</ul>
</body>
</html>
4.通用选择器
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
   /*通用选择器*/
        .sj~p{
            color: red;
        }
    </style>
</head>
<body>
<p>世界</p>
<p class="sj">全世界</p>
<p>全部世界</p>
<p>全部的世界</p>
<p>全部的世界</p>
<p>全部的世界</p>
<ul>
    <li><p>你好</p></li>
</ul>
</body>
</html>
5.结构伪类选择器
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
   /*结构伪类选择器*/
        ul li:first-child{
            color: red;
        }
        ul li:last-child{
            color: chocolate;
        }
    </style>
</head>
<body>
<ul>
    <li><p>你好</p></li>
    <li><p>你好</p></li>
    <li><p>你好</p></li>
    <li><p>你好</p></li>
    <li><p>你好</p></li>
</ul>
</body>
</html>

<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
   /*结构伪类选择器*/
   p:nth-child(1){
       color: red;
   }
   p:nth-child(2){
       color: red;
   }
    </style>
</head>
<body>
    <!--<h1>sss</h1>--> 试试这个不注释的效果就明白了
<p>第一</p>
<p>第二</p>
<p>第三</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
   /*结构伪类选择器*/
    p:nth-of-type(1){
        color: red;
    }
    </style>
</head>
<body>
<h1>sss</h1>
<p>第一</p>
<p>第二</p>
<p>第三</p>
</body>
</html>
属性选择器
累了；

a[id=first]{
  color...
}

a[class*=second]{
      color...
}


=   
*=
^=
$=
小淘神
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 选择器
weixin_44739931的博客
07-04 191
CSS 选择器 选择器 class 选择所有class="intro"的元素 <!DOCTYPE html> <html> <head> <style> p.hometown { background:yellow; } </style> </head> ​ <body> <p>My name ...
css的父选择器
热门推荐
Cribug8080的博客
05-22 4万+
css的父选择器 首先声明一点，目前没有css的父选择器。新出的css3也没有。但是已经有很多人有很多次提案了。 反向选择 在2008年Shaun Inman建议这种父选择器。 a < img{ border: none; } 这段css的目的是选择img元素的a标签。 parent Remy Sharp建议使用:parent a img:parent { background: ...
CSS的选择器(超详细)
最新发布
前端开发,HTML5,css3,JavaScript,node.js,vue
11-21 7万+
一、常用的选择器 1.元素选择器 2.类选择器(class选择器) 3.id选择器 4.通配符选择器 二、群组选择器 三、关系选择器 1.后代选择器 2.子代选择器 3.相邻兄弟选择器 4.通用兄弟选择器 5.案例 四、属性选择器 五、伪类选择器 1.常用的伪类选择器 2.否定伪类 3.元素的伪类 六、伪元素选择器
CSS 选择器支持列表
09-25
CSS 选择器支持列表 CSS 选择器是 CSS 中的一个重要组成部分，它允许开发者根据特定的规则来选择和应用样式到 HTML 元素上。下面是 CSS 选择器支持列表的详细解释： ### 一、基本选择器 * `E`：选择所有 HTML ...
CSS教程之css选择器 、属性、值
10-30
本教程将深入探讨CSS选择器、属性以及值，帮助你更好地理解和应用CSS来美化你的网页。 首先，我们要了解CSS选择器。选择器是CSS的核心组成部分，它的主要作用是定位HTML文档中的特定元素，以便对这些元素应用样式。...
CSS选择器
01-08
Web前端css3选择器 参考文档： https://man.ilovefishc.com/css3/ 一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的html元素 id ID选择器 ...
CSS选择器.pdf
10-09
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）
css 元素选择器的简单实例
09-24
CSS元素选择器的使用不仅仅限于单个标签，还可以结合类选择器（`.class`)、ID选择器 (`#id`)、伪类（`:hover`, `:active`, `:focus`等）和属性选择器 `[attribute]`等，实现更复杂的样式控制。例如，如果我们只想让...
使用LambdaQueryWrapper，QueryWrapper,lambda表达式，获取list集合的几种方式
sun_tf_sir的博客
11-11 5566
#LambdaQueryWrapper，QueryWrapper,lambda表达式，获取list集合 ProjectMsg projectMsg = new ProjectMsg(); projectMsg.setXqxmbm("123456789"); 第一种使用lamdbaQueryWrapper List<ProjectMsg> list = projectMsgService .list(Wrappers.<ProjectMsg>q
大文件上传及拆分上传至服务器本地，OSS服务器，文件拆分合并上传
sun_tf_sir的博客
11-11 1951
大文件上传拆分，使用base64写入本地txt拼接合并上传，拆分上传 新入职一家公司第一天领导给了个任务 说上传文件到服务器速度太慢 结果读完代码发现了问题 原有代码是将大文件拆分成5兆的base64字符串存储到数据库 每次都需要读取数据库该文件的base64字符串和第二个拆分文件合并再存储到数据库 直至最后一条合并，该方式因为base64多次上传到数据库，导致数据库性能消耗很高，效率很慢 · 想到了一个解决方式就是既然效率慢的原因是数据库读写base64字符串导致， · 为何不将bas
本人在用特别推荐的好用的ider插件
sun_tf_sir的博客
11-12 905
好用的ider插件推荐 1.Translation 翻译插件 翻译插件IntelliJ基于ide。 | GitHub | Get Started | Donate 特性 多种翻译引擎。 谷歌翻译。 有道翻译。 阿里巴巴翻译。 百度翻译。 多种语言的不对应性。 文档翻译。 从文本到语音。 自动词选择。 自动分词。 单词书。 2.Trans Pride Progress Bar 彩虹进度条 一个插件，使intellij进度条trans。 可以使IDEA进度条变为彩虹条 3.Rainbow Bra
JAVA 变量及变量本质，声明方法，命名规则等
sun_tf_sir的博客
11-25 694
变量 变量的本质 变量本质上就是代表一个“可操作的存储空间”，空间位置是确定的，但是里面具体放什么值是不确定的 我们可以通过变量名来访问“对应的存储空间”，从而操纵这个“存储空间”存储的值 JAVA是一种强类型语言，每个变量都必须声明其数据类型。 变量的数据类型决定了变量占据存储空间的大小，比如 int a = 3; 表示a变量的空间大小为4个字节 变量作为程序中最基本的存储单元，其要素包括变量名，变量类型和作用域 变量在使用前必须对其声明，只有在变量声明以后，才能为其分配相应长度的存储空
JAVA包混淆
sun_tf_sir的博客
05-10 386
jar包混淆 添加依赖 在完成项目的pom文件下的下添加proGuard混淆插件依赖，直接复制粘贴过去下载依赖即可 <!-- ProGuard混淆插件--> <plugin> <groupId>com.github.wvengen</groupId> <artifactId>proguard-maven-plugin</artifactId> <version>2.3.1</version&
认识微服务
sun_tf_sir的博客
02-11 379
微服务 单体架构： 将业务的所有功能集中在一个项目中开发，打成一个包部署 优点：架构简单，部署成本低 缺点：耦合性高 分布式架构： 根据业务功能对系统进行拆分，每个业务模块作为一个独立的项目，称为一个服务 优点：降低服务耦合，有利于服务升级拓展 缺点：架构复杂，成本高 微服务就是一种经过良好架构设计的分布式架构方案 微服务架构特征 1. 单一职责：微服务拆分粒度小，每一个服务对应唯一的业务能力，做到单一职责，避免重复业务 2. 面向服务：微服务对外暴漏业务接口 3. 自治： 团队独立，
HTML
sun_tf_sir的博客
05-14 249
HTML 页面结构分析 元素名 描述 header 标题头部区域的内容（用于页面或页面中的一块儿区域） footer 标记脚部区域的内容（用于整个页面或页面的一块区域） section Web页面中的一块独立区域 article 独立的文章内容 aside 相关内容或应用（常用于侧边栏） nav 导航类辅助内容 网页的基本结构 <!DOCTYPE html> ：告诉浏览器我们使用什么规范 <html lang="en"> 总的标签 &lt
MongoDB增删改查原生操作
sun_tf_sir的博客
02-25 218
public static void main(String[] args) { // //创建连接对象 // MongoClient localhost = new MongoClient("localhost", 27017); // //获取Mongodb数据库 // MongoDatabase database = localhost.getDatabase("数据库名"); // //获取MongoDB中的集合 // ...
基本数据类型,运算符，数据类型的转换
sun_tf_sir的博客
11-25 200
基本数据类型(primitive data type) Java 是一种强类型语言，每个变量都必须声明其数据类型。 Java 的数据类型可分为两大类：基本数据类型和引用数据类型 Java中定义了3类8种基本数据类型 数字型 - byte , short, int, long ,float, double, 字符型 - char 布尔型 - boolean 注意事项 引用数据类型的大小统一为4个字节，记录的是其引用对象的地址 Java 语言的整型常数默认为 int 型，声明 long 型常量可以

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值