前端：CSS选择器（级联/层叠样式单）--用作装饰

于 2024-08-09 17:43:58 发布
阅读量535 收藏 3
点赞数 20
文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63708006/article/details/141066927
版权

1.选择器：给谁加样式

三种样式如果对于不同的方面，效果叠加，如果是相同的方面，行内样式的优先级最高，外部样式和内部样式的优先级相等，谁在上面先用谁

2.css的语法规则：

selector{  
    property:value;
    property:value;
}
/* 基本选择器*/
/*1.元素选择器  根据元素名称做选择*/
div{
    background: red;
    color: yellow;
   } 
/*特例： * 选择所有元素 */
*{
    background: red;
    color: yellow; 
}
/*2.属性选择器  []属性*/
div[id]{
    background: red; /*有id属性*/
    color: yellow; 
}
div[id=a]{
    background: red;/*有id属性，并且id属性值等于a*/
    color: yellow; 
}
div[id$=a]{
    background: red;/*有id属性，并且id属性值以a结尾的div元素*/
    color: yellow; 
}
div[id^=a]{
    background: red;/*有id属性，并且id属性值以a开头的div元素*/
    color: yellow; 
}
div[id*=a]{
    background: red;/*有id属性，并且id属性值包含a的div元素*/
    color: yellow; 
}
div[mm*=a]{
    background: red;/*有mm属性，并且id属性值包含a的div元素 属性值可以自己创造*/
    color: yellow; 
}
/*3.id选择器*/
#ss{
    background: red;
    color: yellow; 
}
/*id最好唯一*/

/*4.class选择器*/
 .ss{
    background: red;
    color: yellow; 
 }

 /*特例，结合选择器*/
 p.ss{
    background: red;
    color: yellow;   /*不要用空格，直接拼接*/
 }
 /*5.包含选择器  selector1 selector2*  空格只时强调包含关系，时候带就行*/
div p{
    background: red;
    color: yellow; /*在第一个选择器所包含的元素里面，找第二个选择器满足的元素*/
}
/*6.子选择器  selector1>selector2   强调父子关系*/
div>p{
    background: red;
    color: yellow; /*在第一个选择器所包含的元素里面，找第二个选择器满足的元素*/
}

/*7.兄弟选择器  selector1~selector2 同级往下找弟弟*/
.php~.java{
    background: red;
    color: yellow; 
}
 
.php~*{
    background: red;
    color: yellow; 
}



/*8.选择器组合  selector1,selector2,selector3   之间是或的关系*/

p,
span,
div{
    background: red;
    color: yellow; 
}
/* 伪元素选择器*/

/*1.首字母  只有块级元素（竖着布局的元素）可以使用*/
div::first-letter{
    font-size: 40px;
    color: purple;
}
/*2.首行 只有块级元素（竖着布局的元素）可以使用*/
div::first-line{
    font-size: 40px;
    color: purple;
}
/*像一串英文字母aaa会看做一行，浏览器认为中文可以随意换行，英文单词或者连字符可以换行，如果是连续的字母没有意义，不会换行，可以用下面的进行换行*/
div{
    word-break: break-all;
}
/*单词裂开*/

/*3.特效追加  在前面追加*/
div::before{
    content: "111";
    font-size: 40px;
    color: purple;
}

/*4.在元素后面追加  after*/

div::after{
    content: "111";
    font-size: 40px;
    color: purple;
}
/*!!!!需要通过content开辟空间，进行追加*/
/* 伪类选择器*/

/*1.结构性伪类选择器*/
/*括号里 n可以是数字，如果是数字 n从1开始
          可以是单词  even偶数个  odd奇数个
        可以是表达式 2n+1  3n+2 n从0开始  
找第一个  first-child
找最后一个 last-child
倒数  nth-last-child()
正数  nth-child()
只认数字，如果类型恰好符合，则找到*/
  
ul li:nth-child(2){
    font-size: 40px;
    color: purple;
}
ul li:nth-child(2){
    font-size: 40px;
    color: purple;
}
ul li:nth-child(odd){
    font-size: 40px;
    color: purple;
}
/*找同类型的 nth-of-type  既认数字，也认类型
括号里 n可以是数字，如果是数字 n从1开始
          可以是单词  even偶数个  odd奇数个
        可以是表达式 2n+1  3n+2 n从0开始  
找第一个  first-of-type
找最后一个 last-of-type
倒数  nth-last-of-type()
正数  nth-of-type()*/
ul li:nth-of-type(1){
    font-size: 40px;
    color: purple;
}

/*2.UI状态伪类选择器*/
/*hover鼠标悬停状态*/
/*focus鼠标焦点状态*/
/*checked鼠标选中状态*/
ul li:hover{
    font-size: 40px;
    color: purple;
}

/*3.其他伪类选择器*/
/*not() 排除 过滤掉某些元素  括号中可以写任何一个选择器*/

ul li:not(.java){
    font-size: 40px;
    color: purple;
}
ul li:not(.java):not(.php){
    font-size: 40px;
    color: purple;
}
/*CSS选择器优先级*/

/*1.选择器写得越长越准确，优先级越高*/
/*2.优先级 id选择器>class选择器>元素选择器*/
/*3.同级别选择器下，CSS按照代码顺序执行   后面代码会把前面的覆盖掉*/
/*4.终极规则:以上规则适用于绝大部分场景，特殊场景不适用请自行调试*/

3.CSS选择器详细介绍

基本选择器

1.元素选择器  根据元素名称做选择
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<p>hello</p>

div{
    background: aqua;
    color: black;
}

特例： * 选择所有元素  body html也是元素

*{
    background: aqua;
    color: black;
}

2.属性选择器  []属性
<div id="e">hello</div>
<div id="ab">hello</div>
<div id="ba">hello</div>
<div id="daad">hello</div>
<div mm="baab">hello</div>
<p>hello</p> 

div[id]{
    color: rgb(55, 0, 255); 
}
div[id=e]{
    background: red;
    
}
div[id$=a]{
    background: greenyellow;
   
}
div[id^=a]{
    background: rgb(249, 49, 219);
}  
div[id*=a]{
    background: rgb(19, 178, 246);
    color: yellow; 
}
div[mm*=a]{
    background: rgb(166, 28, 212);
    color: yellow; 
}

3.id选择器
#e{
    background-color: aqua;
}

id最好唯一

4.class选择器
<div class="a">hello</div>
<div>hello</div>
<div id="ss" class="a">hello</div>
<div>hello</div>
<p>hello</p> 
</body>


  .a{
    background-color: blueviolet;
    
}

特例，结合选择器

div.a{
    background-color: aquamarine;
}
#ss.a{
    color: red;
}

 5.包含选择器  selector1 selector2*  空格只是强调包含关系
<div>
    <p>
        hello
    </p>
</div>
 <p>hello</p>
 <p class="java">hello</p>
 <p class="java ">hello</p>
 <p class="php">hello</p>
 <p class="java">hello</p>
 <p class="java">hello</p>

div p{
    background-color: aqua;
}

6.子选择器  selector1>selector2   强调父子关系
div>p{
    color: red;
}
<div>
    <p>
        hello
        
    </p>
</div>
<div>
    <h1>
        <p>
        hello
         </p>
        
    </h1>
</div>
<p>hello</p>
 <p class="java">hello</p>
 <p class="java ">hello</p>
 <p class="php">hello</p>
 <p class="java">hello</p>
 <p class="java">hello</p>

7.兄弟选择器  selector1~selector2 同级往下找弟弟
<p>hello</p>
 <p class="java">hello</p>
 <p class="java ">hello</p>
 <p class="php">hello</p>
 <p class="java">hello</p>
 <p class="nn">hello</p>
 

.php~.java{
    background-color: blueviolet;
}
.php~*{
  background-color: chartreuse;
}/*全选*/

8.选择器组合  selector1,selector2,selector3  选择器之间是或 的关系，只需要满足一个就可以使用该选择器给的样式
<div>hello</div>
<span>hello</span>
<p>hello</p>
<p>hello</p>

div,
p{
    background-color: aqua;
}
div,
span,
p{
    color: red;
}

伪元素选择器

1.首字母  只有块级元素（竖着布局的元素）可以使用
div::first-letter{
    font-size: 40px;
    color: purple;
}

2.首行 只有块级元素（竖着布局的元素）可以使用
<div>
    
<p>hello</p>
<p>hello</p>
</div>

div::first-line{
    font-size: 40px;
    color: purple;
}

像一串英文字母aaa会看做一行，浏览器认为中文可以随意换行，英文单词或者连字符可以换行，如果是连续的字母没有意义，不会换行，可以用下面的进行换行

div{
    word-break: break-all;
}
/*单词裂开*/

<div>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
3.特效追加  在前面追加
div::before{
    content: "hello";
    background-color: aqua;
    color: purple;
}
<div>
world
</div>

4.在元素后面追加  after
div::after{
    content: "hello";
    background-color: aqua;
    color: purple;
}

!!!需要通过content开辟空间，进行追加

伪类选择器

1.结构性伪类选择器

括号里 n可以是数字，如果是数字 n从1开始，可以是单词  even偶数个  odd奇数个 可以是表达式 2n+1  3n+2 n从0开始  

找第一个  first-child

找最后一个 last-child

倒数  nth-last-child()

正数  nth-child()

只认数字，如果类型恰好符合，则找到

ul li:nth-child(1){
    
    color: blue;
}
ul li:nth-child(2){
    
    color: red;
}/*执行1次*/
ul li:nth-child(2n+1){
    font-size: 30px;
    
}
ul li:nth-child(odd){
    background-color:aqua ;
}

ul li:first-child{
    background-color:pink ;
}
ul li:last-child{
    background-color:rgb(126, 197, 245) ;
}/*执行一次*/

ul li:nth-last-child(even){
    background-color: blueviolet;
}/*执行一次*/

<ul>
   
    <li>aaa</li>
    <p>aaa</p>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
</ul>

找同类型的 nth-of-type  既认数字，也认类型

括号里 n可以是数字，如果是数字 n从1开始

          可以是单词  even偶数个  odd奇数个

        可以是表达式 2n+1  3n+2 n从0开始  

找第一个  first-of-type

找最后一个 last-of-type

倒数  nth-last-of-type()

正数  nth-of-type()

ul li:nth-of-type(1){
    
    color: blue;
}
ul li:nth-of-type(2){
    
    color: red;
}/*执行1次*/
ul li:nth-of-type(3n){
    font-size: 30px;
    
}
ul li:nth-of-type(odd){
    background-color:aqua ;
}

ul li:first-of-type{
    background-color:pink ;
}
ul li:last-of-type{
    background-color:rgb(126, 197, 245) ;
}/*执行一次*/

ul li:nth-last-child(3){
    background-color: blueviolet;
}/*执行一次*/

<ul>
   
    <li>aaa</li>
    <p>aaa</p>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
</ul>

2.UI状态伪类选择器

hover鼠标悬停状态

focus鼠标焦点状态

checked鼠标选中状态

/* focus(焦段状态)  hover(悬停状态) */
/* 鼠标放上去之前 */
ul li{
    background: red;
}
ul li:hover{
    background: blue;
}
/*  原本的原色 */
input{
    background: blue;
}
/* 开始输入数据 */
input:focus{
    background: red;
}
/* 鼠标悬停 */
input:hover{
    background: yellow;
}


<html>
    <head>
        <meta charset="utf-8">
        <title>FLOAT</title>
        <style>
        ul li{
            background-color: red;
        }
        ul li:hover{
            background-color: blue;
        }
       
        input{
            background-color: blueviolet;
        }
        input:focus{
            background-color: greenyellow;
        }
        input:hover{
            background-color: yellow;
        }
        </style>
    </head>
    <body>
      <ul>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
      </ul>
      <input type="text">
    </body>
</html>

悬停状态

聚焦状态

3.其他伪类选择器

not() 排除 过滤掉某些元素  括号中可以写任何一个选择器*/

 <ul>
        <li>qcby</li>
        <li class="java">qcby</li>
        <li>qcby</li>
        <li class="java">qcby</li>
        <li>qcby</li>
        <li class="java">qcby</li>
        <li>qcby</li>
        <li class="php">qcby</li>
    </ul>
    
    /* 排除class是.java的 */
li:not(.java){
    background: red;
}

li:not(.java):not(.php){
    background: red;
}

欢迎大家，点击关注，加评论呦

YY编程小白
关注
  • 20
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Fundamentos-CSS:该项目包含级联样式语言CSS的概念和学习练习
04-17
1. **选择器（Selectors）**：CSS选择器用于选取HTML元素。例如，`p`选择器选取所有的段落，`.class`选择器选取所有类名为“class”的元素，`#id`选择器选取具有特定ID的元素。 2. **属性（Properties）**：属性...
css-stil-rehberi：CSS ve SASSiçinmakul biryaklaşım
02-05
2. **层叠规则**: CSS的名字中“级联”一词意味着样式会根据优先级进行叠加。优先级通常由选择器的特异性决定，更具体的选则器具有更高的优先级。 3. **盒模型**: CSS盒模型是理解布局的基础，它包括内容（content...
chrome-css-selector-capture：Chrome扩展CSS Selector Capture的支持页面
02-03
【标题】：“Chrome CSS Selector Capture”是一个Chrome浏览器扩展，它帮助开发者轻松地捕获和查看网页上的CSS选择器。这个工具对于前端工程师来说极其有用，因为它可以提高他们在调试和优化CSS时的效率。 【描述...
css-tutorial：初学者CSS概念教程
02-13
2. **层叠**：CSS中的“级联”意味着多个样式可以应用于同一个元素，最终效果是这些样式按照特定的规则层叠在一起。层叠规则通常基于样式来源、特异性、优先级以及浏览器默认样式。 3. **盒模型**：CSS盒模型是描述...
css-personal：使用CSS的个人主页
02-12
2. **层叠与继承**：CSS的“级联”意味着多个样式可以应用到一个元素上，根据优先级决定最终效果。继承则允许子元素从父元素继承某些样式，但不是所有属性都能继承。 **二、盒模型** 理解CSS盒模型对于布局至关...
WEB渗透Web突破篇-SSRF
qq_59468567的博客
08-03 966
转码服务 在线翻译 获取超链接的标题等内容进行显示 请求远程服务器资源的地方，图片加载与下载(通过URL地址加载或下载图片) 图片、文章收藏功能 对外发起网络请求的地方，网站采集、网页抓取的地方。 头像 (远程加载头像) 一切要你输入网址的地方和可以输入ip的地方。 数据库内置功能(mongodb的copyDatabase函数) 邮件系统 文件处理 在线处理工具 从URL关键字中寻找：share、wap、url、link、src、source、target、u、3g、display、sourceURl、im
探索WebKit之巅：开启现代网页应用的高效与兼容之旅
weixin_67239318的博客
08-03 517
随着现代网页应用的快速发展，WebKit作为先进的浏览器引擎，其在高效性和兼容性上的表现显得尤为重要。本文深入探讨了WebKit的架构和渲染机制，揭示了其在支持Web标准和提升浏览体验方面的关键技术。通过分析WebKit如何处理DOM操作、JavaScript执行与图形渲染等挑战，我们了解到优化WebKit性能不仅关乎算法和硬件的优化，还涉及网络协议和安全框架的理解。此外，本文讨论如何通过WebKit应对多设备和分辨率下的兼容性问题。掌握这些关键因素，对于开发者来说，是打造高效、兼容的现代网页应用的基础。
文章相关接口
qq_74474809的博客
08-03 304
跟着黑马程序员学习SpringBoot3+Vue3
【Web】TFCCTF 2024 部分题解
uuzeray的博客
08-04 744
但是因为strtok代码本身存在错误，当传入的string末尾为:时，会传入none进token，继而让internal server error，从而重启服务，这样就可以将事先写入app/templates下的模板文件注册。这时候再审计代码，可以发现当/login路由查表成功，会调strtok去分割数据，再写入User返回。提示打SSRF，但限制死了前缀要是http://google.com/修改后，再以admin/123:登录，此时服务会报错，刷新即可重启服务。多了一个/，便不能用@绕过。
小程序支付（前端）
weixin_43993121的博客
08-05 496
【代码】小程序支付（前端）
vuex知识
qq_16570607的博客
08-04 406
将getMoviesRankingInDouban的action用promise包装一下, 在此次请求结束后, 根据此次请求返回的电影的id, 根据id再次请求电影的信息。数据请求,在action中, 根据传入的参数(数字1-250)异步请求电影数据, 在请求完成后提交mutation。例子：在action中, 根据传入的参数(数字1-250)异步请求电影数据, 在请求完成后提交mutation。状态更改,在mutation中,将查询的结果(传入的参数), 赋值给state中声明的变量。
前端Web-JavaScript(下)
Yu2uki的博客
08-03 1459
补全一下js,忘记了好回来看
【React】实现输入框切换
最新发布
坚强的泡沫的博客
08-08 263
【React】实现输入框切换
linux安装weblogic
m0_46400195的博客
08-05 820
域文件位置就是python文件中设置的，位置（cd /root/web/weblogic/softWare/projects/doamins/testDomain）（以自己python为主）想要启动weblogic 12版本及以后都需要去oracle_common目录下配合启动脚本进行服务器启动。weblogic不允许root用户进行安装，所以要提前创建weblogic用户来进行安装。例如：http://192.168.0.143:7001/console。用户名：启动weblogic的用户名。
正则采集器之六——商品管理
简单，坚持
08-05 426
本文是项目实践文章"正则采集器"之五"商品管理"，后端采用框架SpringBoot，前端采用框架vue3-element-admin。
c# 使用异步函数实现线程的功能
MaggieWon
08-07 186
c#程序执行时 想要拖动窗口 需要使用线程,但是使用线程 对操作前端窗体很不友好.所以写了一个异步函数,网上搜了一下,貌似异步函数比线程 更加友好,更加现代。做这个功能的原因是 主要是想等程序执行完 走一个提示.用线程很难做到。
java 表单避免重复提交？
08-05 1213
只有一个针对锁的获取：acquiretryAcquire传入信息。至于锁的释放，则交给实现者自己实现。首先，我们定义一个注解。/***//*** 缓存实现策略* @return 实现*/Class<?/*** key 生成策略* @return 生成策略*/Class<?/*** 密匙生成策略* @return 生成策略*/Class<?/*** 存活时间* 单位：秒* @return 时间*//*** 启用注解*/
Web前端开发具有哪些特点？
weixin_54503231的博客
08-07 225
Web前端开发是基于浏览器的技术，能够在不同的操作系统和设备上运行，实现跨平台的兼容性。前端技术可以通过JavaScript等技术实现丰富的交互效果，如响应用户的点击、表单验证、页面动画等，这些交互特性增强了用户对网页的体验。前端开发可以实现响应式网站，这种网站可以根据不同的终端设备进行内容的布局调整，无需为不同设备开发不同版本的网站，从而降低了开发成本。随着前后端分离的开发模式逐渐成为趋势，前端开发需要更加独立地完成用户界面和交互的开发，但同时也需要与后端开发人员紧密配合，确保数据的正确传输和显示。
vue前端通过权限控制显示数据列vue2 vue3
ci2011ss的专栏
08-08 74
【代码】vue前端通过权限控制显示数据列vue2 vue3。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值