首页 > 其他分享 >前端:CSS选择器(级联/层叠样式单)--用作装饰

前端:CSS选择器(级联/层叠样式单)--用作装饰

时间:2024-08-10 19:27:45浏览次数:12  
标签:-- hello color background div li 选择器 CSS

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;
}

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

标签:--,hello,color,background,div,li,选择器,CSS
From: https://blog.csdn.net/weixin_63708006/article/details/141066927

相关文章

  • 【时时三省】(C语言基础)操作符3
    山不在高,有仙则名。水不在深,有龙则灵。             ----CSDN时时三省&取地址操作符示例: 每个内存单元都有自己的编号编号就成为内存单元的地址&a就是找出a的地址后面可以加一个int*pa=&a是可以用来存放地址pa是用来存放地址的-pa就是一......
  • MySQL的安装
    文章目录在线安装方式离线安装方式1、卸载已有的MySQL文件2、安装mysql3、后续命令修改字符集MySQL是一种开源的关系型数据库管理系统(RDBMS),由瑞典MySQLAB公司开发,后来被SunMicrosystems收购,并最终归属于Oracle公司。MySQL因其高性能、可靠性、扩展性和安全性而广......
  • Navicat Premium使用
    文章目录NavicatPremium16的使用连接MySQL建立数据库并构建表导入数据NavicatPremium16是一款功能强大的数据库管理工具,它允许用户从单一应用程序中同时连接多种数据库,提供了极其便捷和高效的管理和开发环境,对于MySQL用户来说,是一个不可或缺的数据库管理工具......
  • 提高效率:Linux 正则表达式实用技巧
    目录前言匹配符号用法讲解“.”用法[]用法“*”用法“.*”用法“\?”用法“\+”用法“\\{n\\}”用法\\{m,n\\}用法锚点符号“^”用法“$”用法“^$”用法或|用法前言在Linux系统中,正则表达式(RegularExpressions,简称regex)是一个强大的工具,广泛应......
  • C# 泛型简单概括
    一、泛型的概念,定义,运行原理,优势1.泛型的概念泛型(generic)是C#2.0推出的新语法,并不是语法糖,它是专门为处理多段代码在不同的数据类型上执行相同的指令的情况而设计的。即泛型让不同的数据类型支持相同的业务逻辑。泛型是一个复合类型,把多个类型混合一起作用,比如:方法和泛......
  • 虚拟DOM如何被渲染产生的?(虚拟DOM和diff算法(上))
    虚拟DOM如何被渲染产生的?答:h函数h函数的使用:1.产生虚拟节点(vnode)2.h函数可以嵌套,从而得到虚拟DOM树1.产生虚拟节点import{init,classModule,propsModule,styleModule,eventListenersModule,h}from"snabbdom";//创建出patch......
  • flex常见属性容器
    display:flex将一个元素定义为Flex布局容器的属性flex-direction设置Flex容器主轴方向的属性justify-content用于定义Flex容器内子元素在主轴上对齐方式align-items用于定义Flex子元素在交叉轴上对齐方式flex-wrap控制子元素在主轴方向空间不足是否换行gap子元素之间间隙......
  • JSP广元市旅游网站6gj5o(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表系统功能:用户,景点类型,景点信息,房间类型,酒店民宿,酒店预约,出游租车,租车信息,旅游攻略,旅游社团,跟团预约技术要求:开发语言:JSP前端使用:HTML5,CSS,JSP动......
  • JSP公司薪酬管理系统1hqm4(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表系统功能:员工,部门信息,工资信息,请假信息,出勤信息技术要求:    开发语言:JSP前端使用:HTML5,CSS,JSP动态网页技术后端使用SpringBoot,Spring技术主数据库......
  • 初始化二维vector
    这里是我遇到的一些对于二维vector容器初始化的一些问题的总结与记录,一共有一下四种情况,随时添加新的方式方法。初始化一个二维vector,行M,列N//初始化一个二维的matrix,行M,列N,且值为0vector<vector<int>>matrix(M,vector<int>(N));//等价于下面的vector<vector<......