首页 > 其他分享 >前端学习-CSS的复合选择器(十四)

前端学习-CSS的复合选择器(十四)

时间:2024-10-08 18:53:23浏览次数:10  
标签:并集 伪类 color 前端 元素 语法 选择器 CSS

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

目录

前言

什么是复合选择器

后代选择器

语法格式

注意事项

代码示例

子选择器

语法格式

注意事项

代码示例

并集选择器

语法格式

伪类选择器

链接伪类选择器​编辑

注意事项

:focus伪类选择器

表格总结

总结


前言

接下来我们来学习CSS更加丰富多样且实用的选择器


什么是复合选择器

在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。

复合选择器可以更加准确高效的选择目标元素

通常是由两个或多个基础选择器通过不同的方式组合而成的

常用的复合选择器:后代选择器,子选择器,并集选择器,伪类选择器

后代选择器

后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。

语法格式

元素1 元素2{样式声明}

注意事项

表示选择元素1中里面的所有元素2(后代元素)

元素1和元素2中间用空格隔开

元素1为父级,元素2为子级,选择的是元素2

元素2 可以是儿子,也可以是孙子等,只要是元素1的后代即可

元素1 和 元素2 可以是任意基础选择器

代码示例

<style>

ol li{

color: aquamarine;

}

</style>

<body>

<ol>

<li> ol's child </li>

</ol>

<ul>

<li> ul's child </li>

</ul>

子选择器

子元素选择器只能选择作为某一元素的最近一级子元素,简单理解就是选亲儿子元素

语法格式

元素1>元素2{样式声明}

注意事项

上述语法表示选择元素1里面的所有直接后代(子元素)元素2

元素1和元素2中间用大于号隔开

元素1是父级,元素2是子级,最终选择的是元素2

代码示例

<style>

.fir>a {

color: blueviolet;

}

</style>

<body>

<div class="fir">

" a's child"

<p>

" p's child"

</p>

</div>

</body>

并集选择器

并集选择器可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明

并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。

语法格式

元素1,元素2{样式声明}

上述语法表示选择元素1和 元素2

例如:ul,div{样式声明}/*选择ul和 div标签元素 */元素1和 元素2 中间用逗号隔开逗号可以理解为和的意思

并集选择器通常用于集体声明

<style>

div,

p,

.pig li {

color: cornflowerblue;

}

</style>

<body>

<div>一</div>

<p>二</p>

<span>三</span>

<ul class="pig">

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

</body>

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或者选择第一个,第n个元素

伪类选择器书写最大的特点是用冒号表示,比如:hover,:first-child

链接伪类选择器

注意事项

1.为了确保生效,请按照LVHA的循顺序声明:link-:visited-:hover-:active。2.记忆法 :love hate 或者 Iv 包包 hao。3.因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式.

:focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素

焦点就是光标,一般情况<input>类表单元素才能获取,因此这个选择器也主要针对表单元素

input:focus{

background-color:yellow;

}

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<style>

a:link {

color: green;

}

a:visited {

color: blue;

}

a:hover {

color: red;

}

a:active {

color: yellow;

}

input:focus {

background-color: yellow;

}

</style>

<body>

hello everyone

weizhi

<input type="text" name="" id=""></input>

<input type="text" name="" id=""></input>

<input type="text" name="" id=""></input>

</body>

</html>

表格总结

 


总结

假期结束啦,真的结束辣

标签:并集,伪类,color,前端,元素,语法,选择器,CSS
From: https://blog.csdn.net/m0_74246993/article/details/142766671

相关文章

  • 前端开发笔记--黑马程序员1
    文章目录前端开发工具--VsCode前端开发基础语法VsCode优秀插件Chinese--中文插件AutoRenameTag--自动重命名插件openinbrowserOpeninDefaultBrowserOpeninOtherBrowserLiveServer--实时预览前端开发工具–VsCode轻量级与快速启动快速加载:VSCode......
  • 面试-前端基础速刷-Vue
    1.Vue中computed和watch的区别两者用途不同啊!computed用于计算产生新的数据,watch用于监听现有数据。computed有缓存,methods没有缓存。computed有点儿像工厂模式(产生新的东西),watch像发布订阅模式。(是我目前的知识盲区)2.Vue组件通讯有几种方式,尽量全面❗父子组件上下级组件......
  • CSS3属性选择器
    属性选择器选择符                       简介E[att]                   选择具有att属性的元素E[att="val"]          选择具有att属性且属性值等于val的E元素E......
  • 前端框架对比和选择
    在现代Web开发中,前端框架的选择对项目的成功与否至关重要。随着技术的不断发展,市场上涌现了多种前端框架,每种框架都有其独特的特点和适用场景。本文将对几种主流的前端框架进行对比,并提供选择建议。1.React简介:React是由Facebook开发的一个开源JavaScript库,用于构建用户界面......
  • 前端 - HTML基础一看就会
    HTML(超文本标记语言)是构建网页的基本语言,以下是一些常用功能及其使用注意事项和技巧:常用功能1.基础结构:•<!DOCTYPEhtml>:声明文档类型。•<html>:整个HTML文档的根元素。•<head>:包含文档的元数据,如标题、样式和脚本。•<body>:文档的主体,包含实际显示的内容。2.文本格式化:•<h......
  • 组态也能开发WEB前端 | uiotos致敬amis、nodered、appsmith、codewave、goview、datar
    WEB组态开发SCADA、HMI画面、大屏可视化,还比较常见。比如下面: UIOTOS组态示例那么常规WEB前端功能,组态能否一并做了呢?比如下面这种: UIOTOS前端示例答案是可以的!UIOTOS支持页面无限嵌套,能实现原型即应用。现在就以一个具体小示例介绍如何实现的。效果如下所示,初......
  • 528.大气的家具定制设计公司网站 大学生期末大作业 Web前端网页制作 html+css+js
    目录一、网页概述二、网页文件 三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界!这里有各行各业的Web前端网页制作的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这......
  • css 盒模型
    目录css盒模型的组成css盒模型的注意点现象描述:原因:解决方案:1.使用padding代替margin:2.使用overflow:hidden;或其他非visible的值:3.使用border或padding阻止合并:4.使用display:flow-root;(CSS中的BFC):5.使用position定位:块级盒子(BlockBox):特点:例子:内联盒子(Inl......
  • 前端模块化进化史:从全局 function 到 ES Modules
    目前,前端开发已经离不开由CommonJS、ESModules和Webpack构建的模块化开发环境。无论是JavaScript、CSS、图片还是其他资源,都可以作为一个模块来处理。那么,模块化究竟是如何发展到今天的呢?全局函数模式最初的前端模块化尝试是通过全局函数来实现的。例如,在一个util.js文......
  • CSS盒子
    1.width,height宽度高度。<!DOCTYPEhtml><html> <head> <title>WidthHeight</title> <styletype="text/css"> body{ font-family:Arial,Verdana,sans-serif; color:#111111;} div{ width:400px;......