首页 > 其他分享 >CSS基础-选择器

CSS基础-选择器

时间:2023-08-09 14:11:45浏览次数:35  
标签:img color 标签 基础 alt div 选择器 CSS

概念

前文说,CSS是给HTML添加样式的, 那么要想两者之间产生作用,就需要用到选择器。

选择器标记在HTML标签上; 通过选择器,浏览器可以知道什么时候加载这些样式。

CSS 通过选择器组合一组样式,集体作用在某一段html代码上。

多种选择器

标签选择器

标签选择器,使用HTML的标签作为选择器。

作用域:引用页面上所有的同名标签, 标签选择区域大,通常用来初始化样式

举例

<style>
      span {
          background-color: rebeccapurple;
          color: rgb(182, 56, 56)
          
      }
</style>

<body>
    <span >
       我式这个div
    </span>
    <span >
        我式这个div
     </span>
    <div>这个</div>
    <div>那个</div>
</body>

id选择器

每个html标签都可以 有id属性,用来标记该标签的唯一性。

定义了id属性,就可以用id 作为一个选择器来用。

id选择器通常以#号开头。

举例

<!DOCTYPE html>
<html lang="en">
<head>
	  <!--匹配demoSpan , 匹配上的才会选择,匹配不上的就不选择 -->
    <style>
        #demoSpan{
            color: rgb(128, 0, 53);
            
        }
    </style>
</head>
<body>
    <span >
       我式这个div
    </span>
    <span id="demoSpan">
        我式这个div
     </span>
   
</body>
</html>

class 选择器

每个html都可以设置class属性,用来指定特定的样式。

利用class属性来指定样式的,定义为class选择器。

class 选择器 通常以 符号 . 开头

<!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>
        .colorRed{
            color: red;
            
        }
    </style>
</head>
<body>
    <span class="colorRed">
       我是span,内容红色
    </span>
    
   
</body>
</html>

复合选择器

选择器名称 示例 解释
后代选择器 .box1 .sp 选择类名为box的标签内部的class属性值为sp的标签,使用空格隔开
交集选择器 li.sp 选择既是li标签也属于 sp类的标签
并集选择器(也叫分组选择器) ul,ol 选择所有的ul和ol标签
复合选择器 div.box li p.spec.item 复合选择器可以式 id,class 后代选择器等的随组合从而形成的选择器

<!--后代选择器示例-->

<!--css 后代选择器, 只有box1自己的后代中叫 sp 才会显示红色-->
.box1 .sp {
    color: red
}

<div class="box1">
    <span class="sp">第一段文字</span>
</div>

<div class="box2">
    <span class="s2">第二段文字</span>
</div>

<!--交集选择器 同时 拥有 box1 和 box2 的盒子才会高亮-->

.box1.box2 {
		color: red
}
<div class="box1">
   盒子1
</div>

<div class="box1 box2">
   盒子2
</div>

<div class="box2">
   盒子3
</div>

<!--并集选择器 box1 box2 颜色均会为红色-->

.box1,.box2 {
    color: red
}
<div class="box1">
       盒子1
    </div>

    <div class="box2">
       盒子2
    </div>

    <div class="box3">
       盒子3
    </div>

元素关系选择器

名称 举例 意义
子选择器 div>p div的子标签, 只会匹配div标签的子(不含孙子等)元素中的所有P标签
相邻兄弟选择器 img+p 图片后面紧跟着的段落将被选中
通用兄弟选择器 p~span p元素后的所有同层级span元素, (从IE7开始兼容)

序号选择器

名称 意义 兼容性
:first-child 第一个子元素 IE7
:last-child 最后一个子元素 IE9
:nth-child(3) 第3个子元素 IE9
:nth-of-type(3) 第三个某类型子元素,同种标签指定序号 IE9
:nth-last-child(3) 倒数第三个子元素 IE9
:nth-last-of-type(3) 倒数第三个摸个类型的子元素,同种标签指定元素 IE9

<!--一段html代码-->
<div class="parentBox">
    <div class="box">
        <p>box1</p>
        <p>box1</p>
    </div>        
    <div class="box">
        <p>box2</p>
        <p>box2</p>
    </div>        
    <div class="box">
        <p>box3</p>
        <p>box3</p>
    </div>
    <div class="box">
        <p>box4</p>
        <p>box4</p>
    </div>
    <div class="box">
        <p>box5</p>
        <p>box5</p>
    </div>
</div>

<!--模拟第一个div元素,背景称红色-->
    <style>

        .box:first-child {
            background-color: red;
        }

    </style>
    
   

<!--模拟div元素,最后一个背景为绿色-->
<style>

    .box:last-child {
        background-color: green;
    }

</style>

<!--模拟 nth-child指定 元素下标,如果指定的元素下表不是p标签,那么css也不会生效-->
<style>
        
        div p:nth-child(4) {
            background-color: red;
        }
        
    </style>
<div>

        <p>第1个p标签</p>
        <p>第2个p标签</p>
        <div>第一个div子标签</div>
        <p>第3个p标签</p>
        <p>第4个p标签</p>
    </div>

<!--模拟 nth-child 传参为基数的时候,css发挥作用。 nht-child 可以写成 an+b的形式,表示从b开始每a个选择一个-->
<!--2n+1 表示奇数 2n表示偶数-->
<style>
        
        div p:nth-child(2n+1) {
            background-color: red;
        }
        
    </style>

<div>

        <p>第1个p标签</p>
        <p>第2个p标签</p>
        <div>第一个div子标签</div>
        <p>第3个p标签</p>
        <p>第4个p标签</p>
    </div>

<!--模拟将选择同种标签指定子元素序号的子元素-->

<style>
        
        div p:nth-of-type(2n) {
            background-color: red;
        }
        
    </style>

<div>

        <p>第1个p标签</p>
        <p>第2个p标签</p>
        <div>第一个div子标签</div>
        <p>第3个p标签</p>
        <p>第4个p标签</p>
    </div>

属性选择器

举例 意义
img[alt] 选择有alt属性的img标签
img[alt=”房子”] 选择alt属性是房子的img标签
img[alt^=”小区”] 选择alt属性以小区开头的img标签
img[alt$=”花园”] 选择alt属性以花园结尾的img标签
img[alt*=“小径”] 选择alt属性中包含有小径字样的img标签
img[alt~=”马赛克”] 选择有alt属性中有空格隔开的马赛克字样的img标签
img[alt =”作家”]

伪类

伪类是添加到选择器的描述性词语,指定要选择的元素的特殊状态,例如: 超级链接有四个特殊状态

伪类 意义
a:link 没有被访问的超级链接
a:visited 已经被访问过的超级链接
a:hover 正被鼠标悬停的超级链接
a:active 正被激活的超级链接(按下键但是没有松开)
<!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>
        
        a:link {
            color: dodgerblue;
        }

        a:visited {
            color: black;
        }

        a:hover {
            color: brown;
        }
        
        a:active {
            color:crimson;
        }
      
       
    </style>
</head>
<body>
   
    <div>
        <a href="http://www.taobao.com">淘宝</a>
    </div>
    <div>
        <a href="http://www.alibaba.com">阿里巴巴</a>
    </div>
</body>
</html>

CSS3新增伪类

伪类 意思
:empty 选择空标签
:focos 选择当前获得焦点的表单元素
:enabled 选择当前有效的表单元素
:disabled 选择当前无效的表单元素
:checked 选择当前已经勾选的单选按钮或者复选框
:root 选择根元素, 即标签

<!--验证选取空标签示例-->
<style>
        
        p {
            height: 200px;
            width: 200px;
            border: 2px solid red;
        }

        p:empty {
            background-color: green;
        }

    </style>
<p></p>
<p></p>
<p>费控标签</p>
<p></p>

<!--验证获得焦点后 背景颜色为黑色-->

<style>
  
	input:focus {
      background-color: black;
  }

</style>

<input></input>
<input></input>
<input></input>
<input></input>

<!--验证添加disabled enabled伪类-->
<!--默认情况下, 为input标签为 enabled-->
<style>
    input:disabled {
        background-color: blue;
    }
		input:enabled {
	      background-color: green;
    }
</style>
<input></input>
<input></input>
<input disabled></input>
<input></input>

<!--验证 checked,已经单选的或者复选框,如果选中,相邻兄弟span标签的文字变成红色-->

<style>    
    input:checked+span{
        color: red;
    }
</style>
<input type="checkbox"> <span>文字</span>
<input type="checkbox"> <span>文字</span>
<input type="checkbox"> <span>文字</span>
<input type="checkbox"> <span>文字</span>

<!--root选择器 即表示根节点开始的所有元素-->
<style>
          
    :root {
      font-size: 30px;
    }
</style>

伪元素

表示虚拟动态创建的元素, 伪元素用双冒号表示:: , IE8可以兼容到单冒号

标签:img,color,标签,基础,alt,div,选择器,CSS
From: https://www.cnblogs.com/haloujava/p/17616718.html

相关文章

  • mybatis的基础操作
    mybatis的基础操作常用的操作,增删改查1.增加@Insert("insertinto表名(字段名)values(字段值)publicvoidinsert(参数);对于要将传递的参数用到sql语句中需要用到#{}例如:参数为idinsertinto表名(id)values(#{id})后一个id为参数的名字然而对于多个参数......
  • 《CUDA编程:基础与实践》读书笔记(2):CUDA内存
    1.全局内存核函数中的所有线程都能够访问全局内存(globalmemory)。全局内存的容量是所有设备内存中最大的,但由于它没有放在GPU芯片内部,因此具有相对较高的延迟和较低的访问速度,cudaMalloc分配的就是全局内存。此外,当处理逻辑上的二维或者三维问题时,还可以使用cudaMallocPitch和......
  • 电机基础知识
     一、电机分类1、直流有刷电机:只需调整电压,即可调整转速2、直流无刷电机:无电刷和换向器的电机3、舵机:特殊直流电机,自带控制器,舵机本身是闭环控制系统(伺服系统)。给舵机发送指令信号,可以将指令信号变换成轴的角度并保持住,即便负载变化,也能够自动调节。4、步进电机:将电脉冲信......
  • C# 中关于 T 泛型【C# 基础】
    〇、前言C#里面的泛型不仅可以使用泛型函数、泛型接口,也可以使用泛型类、泛型委托等等。在使用泛型的时候,它们会自行检测你传入参数的类型,因此它可以为我们省去大量的时间,不用一个个编写方法的重载。与此同时,使用泛型会提升程序的效率。本文将围绕泛型的各个方面,详细看下泛型到......
  • Java安全基础知识
    语雀不充钱出不了网,纯纯跳板,不定时更新。反射概念Java反射机制指的是:可以创建任意类的对象可以获取任意对象所属类可以访问任意类的,任意函数和成员在Java安全里,我们通常利用这个来控制一些对象的成员、执行一些方法。获取Class对象获取Class对象通常是反射的第一步,clas......
  • [Unity基础]ECS
    参考链接:https://zhuanlan.zhihu.com/p/419140323https://blog.csdn.net/pengfeicfan/article/details/129374673 ECS:面向数据的编程,当处理大量的游戏对象时,大量Component在内存中会排列地紧凑,提高数据的访问速度E:表示Entity,即实体,可以理解为一个空的GameObject,其本质是一个......
  • CSS的小问题
    在手搓自己的个人网页时,发现使用外联css样式表的时候,如果连续两个div都有class,然后前一个class在外联的样式表里没有出现,那么后面的一个class即使在外联样式表里有写也不会被关联到。再然后我的一个div的类是用内联css规定的可以正常,后面的css都在外联中有且都能正常显示。虽然不......
  • 《CUDA编程:基础与实践》读书笔记(1):CUDA编程基础
    1.GPU简介GPU与CPU的主要区别在于:CPU拥有少数几个快速的计算核心,而GPU拥有成百上千个不那么快速的计算核心。CPU中有更多的晶体管用于数据缓存和流程控制,而GPU中有更多的晶体管用于算数逻辑单元。所以,GPU依靠众多的计算核心来获得相对较高的并行计算性能。一块单独的GPU无......
  • CANoe:Communication Object编程基础
    引言  基于SOA的功能测试中,Someip作为核心至关重要,但是常规的功能测试(不包括协议栈)针对SomeipSD并不十分关注,用SomeipDLL实现也很麻烦。CANoe12.0版本提出了CO:CommunicationObject,CO将Someip的服务与方法抽象为具体的单独的接口来供测试工程师使用,极大降低了测试难度。本文章......
  • Python基础day62 DjangoAjax的传输应用
    前后端数据传输的编码格式(contentType)前后端数据传输的请求方式有两种:get、post我们只研究post请求的编码格式三种编码格式urlencodedform-datajson发送post请求的方式form表单Ajaxpostman(第三方工具,需要下载) form表单发送post请求的时候数据的编码格式请求头conten......