css 大于号 标签_CSS设计基础选择器篇

点击上方 Java项目学习 ,选择 星标 公众号

重磅资讯、干货,第一时间送达

前言:如果将CSS样式应用于特定的网页对象上,需要先找到目标元素。在CSS样式中执行这一任务的部分被称为选择器。75d8888f1aaff18cd4851f980cc58e80.png

1 标签选择器

  • 优点:为页面中同类型的标签重置样式,实现页面效果的统一。
  • 缺点:不能够为标签设计差异化样式,不同页面区域之间会互相干扰。
  


        《上邪》

上邪, 我欲与君相知,长命无绝衰。
山无陵,江水为竭。
冬雷震震,夏雨雪。
天地合,乃敢与君绝。

  

2 ID选择器

  • 特点:元素的id名称唯一,只能应用于文档中一个具体的对象。在使用时用#前缀符,后面紧跟指定的元素的id名称。优先级相对较高。
"poem2">
"title">《思帝乡·春日游》
"author">【唐】韦庄
"content">春日游,杏花吹满头。
"content">陌上谁家年少足风流?
"content">妾拟将身嫁与一生休。
"content">纵被无情弃,不能羞。


3 类选择器

  • 特点:类选择器是以对象的class属性作为选择器,在使用时以英文点(.)开头,后面紧跟类名,在CSS中体现了代码的重用性。优先级低于ID选择器。

"poem-id" class="poem-class">
        《离思五首·其四》
 【唐】元稹 
 曾经沧海难为水, 
 除却巫山不是云。
 取次花丛懒回顾,
 半缘修道半缘君。




4 指定选择器

  • 特点:为ID选择器或类选择器指定目标标签的一种特殊选择器形式。
   
"head">
        《白头吟》
【汉】卓文君
 皑如山上雪,皎若云间月。
 闻君有两意,故来相决绝。
 今日斗酒会,明旦沟水头。
 躞蹀御沟上,沟水东西流。
 凄凄复凄凄,嫁娶不须啼。
"snow"> 愿得一心人,白头不相离。
 竹竿何袅袅,鱼尾何簁簁!
 男儿重意气,何用钱刀为!

   

5 包含选择器

  • 特点:复合选择器,由前后两个选择符组成(中间空格隔开),它选择被第一个选择符包含的第二个选择符匹配的所有后代元素对象。
  • 注意:必须保证第一个选择符匹配的对象能够包含第二个选择符匹配的对象。
   

        《采桑子·恨君不似江楼月》
【宋】吕本中
"hate">恨君不似江楼月,南北东西。南北东西。只有相随无别离。
"hate">恨君却似江楼月,暂满还亏。暂满还亏。待得团团是几时。

   

6 子选择器

  • 特点1:复合选择器,由前后两个选择符组成,它选择被第一个选择符包含的第二个选择符匹配的所有子对象。
  • 特点2:前后两部分之间用一个大于号隔开,在结构上属于父子关系。
  
"rain-in-night">
        《夜雨寄北》
【唐】李商隐
君问归期未有期,巴山夜雨涨秋池。
何当共剪西窗烛,却话巴山夜雨时。

  

7 相邻选择器

  • 特点1:复合选择器,由前后两个选择符组成,它选择与第一个选择符相邻的第二个选择符匹配的所有同级对象。
  • 特点2:前后两部分之间用+号隔开,在结构上属于同级关系,且拥有共同的父元素。
  
"live-near-river">
        《卜算子·我住长江头》
"song-author-li"> 【宋】李之仪
我住长江头,君住长江尾。
日日思君不见君,共饮长江水。
此水几时休,此恨何时已。
只愿君心似我心,定不负相思意。

  

8 兄弟选择器

  • 特点1:复合选择器,由前后两个选择符组成,它选择与第一个选择符后面的第二个选择符匹配的所有同级对象。
  • 特点2:前后部分之间用一个波浪号(~)隔开,在结构上属于同级的关系,且拥有共同的父元素。
  
"teenager-play">
《少年游·并刀如水》
"song-author-zhou"> 【宋】周邦彦
并刀如水,吴盐胜雪,纤手破新橙。
锦幄初温,兽烟不断,相对坐调笙。
低声问向谁行宿,城上已三更。
马滑霜浓,不如休去,直是少人行。

  

9 分组选择器

  • 特点:复合选择器。使用逗号把同组内不同对象分割。

10 伪选择器

  • 特点:以冒号(:)作为前缀,冒号后紧跟伪类或者伪对象名称,冒号前后没有空格。
  
《临江仙·梦后楼台高锁》
【宋】晏几道
梦后楼台高锁,酒醒帘幕低垂。
去年春恨却来时。落花人独立,微雨燕双飞。
记得小苹初见,两重心字罗衣。琵琶弦上说相思。
当时明月在,曾照彩云归。

  

11 属性选择器

  • 特点:以对象的属性作为选择器。
  
"spring">《长命女·春日宴》
【南唐】冯延巳
春日宴,绿酒一杯歌一遍。
再拜陈三愿:
一愿郎君千岁,二愿妾身常健,
三愿如同梁上燕,岁岁长相见。

  

12 通用选择器

  • 特点:确认文档中所有类型元素作为选择器,表示该样式适用于所有网页元素。用*表示。


13 总结

以上列举了可能会遇到的选择器类型和用法,在实际应用时,可根据场景选择合适的选择器来控制页面的样式。  

我们已将上述代码上传至Github,感兴趣的同学可以自己下载代码,观看运行效果。您也可以自己DIY自己想要的样式。

附Github链接: 

https://github.com/web-project-union/Java-Project-Learning/tree/dev/CSS%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80--%E9%80%89%E6%8B%A9%E5%99%A8%E7%AF%87

往期文章:

重构 if/ else小妙招,你值得拥有!

带你快速搭建Vue前端项目--Node篇

CSS设计基础--初识篇

Chrome 开发者工具各种骚技巧 ! 你知道几个?

7a9cd70479b2e392e174966229f1ba9f.png

点个在看

你最好看

079b1723dd423264520ca2c5c6786f00.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/457437.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSDN博客投票活动开始了

自己坚持写博客,一方面是为了将自己对知识点的理解做一个总结,另一方面也是因为自己看到了很多无私奉献分享自己知识的小伙伴们,因此自己也想像他们那样尽自己微薄之力把自己对某一知识点的理解分享给大家,或许算不上什么特高级的…

crontab 提示 command not found 解决方案

crontab 提示 command not found 解决方案 今天遇见一个问题,crontab的定时任务会报错:java command not found,但是手动执行脚本一直能成功。 猜想是环境变量的问题。 在crontab里添加个打印环境变量的任务: * * * * * echo $PAT…

java中文乱码decode_Java中文乱码处理

java编码转换过程我们总是用一个java类文件和用户进行最直接的交互(输入、输出),这些交互内容包含的文字可能会包含中文。无论这些java类是与数据库交互,还是与前端页面交互,他们的生命周期总是这样的:1、程序员在操作系统上通过编…

【设计模式 05】工厂方法模式

工厂方法模式 define an interface or abstract class for creating an object but let the subclasses decide which class to instantiate. 参考: refactoringguru | factory-methodjavatpoint | factory-method-design-pattern博客园| 工厂方法 简单工厂的问题 …

[C++]宏定义#define A B C

C关于宏定义的用法,有形如#define A B C的格式,此时B和C都是已知的字符串常量. 在宏定义中. 可以把两个常量字符串连在一起 如果#define A "a" 那么宏定义#define STRING A "bc" 就相当于 #define STRING "abc" 这里&…

LinkedList类源码浅析(二)

1、上一节介绍了LinkedList的几个基本的方法,其他方法类似,就不一一介绍; 现在再来看一个删除的方法:remove(Object o) remove方法接受一个Object参数,这里需要对参数做空与非空处理; 但是删除一个Object元…

【设计模式 06】原型模式(克隆??)

原型模式(clone?) Prototype pattern refers to creating duplicate object while keeping performance in mind. This type of design pattern comes under creational pattern as this pattern provides one of the best ways to create an object. 参考: tutori…

2016OSC源创会年终盛典-综合技术专场-张小刚

2019独角兽企业重金招聘Python工程师标准>>> 综合技术专场 讲师/SPEAKERS 张小刚 网易云负载均衡项目负责人 《网易蜂巢负载均衡技术实践》从网易蜂巢中的实践出发,分享网易蜂巢负载均衡服务从无到有,从私有云到公有云过程中的技术实践。重点…

python策略模式包含角色_详解Python设计模式之策略模式

虽然设计模式与语言无关,但这并不意味着每一个模式都能在每一门语言中使用。《设计模式:可复用面向对象软件的基础》一书中有 23 个模式,其中有 16 个在动态语言中“不见了,或者简化了”。1、策略模式概述策略模式:定义…

mysql 日期

数据类型 数据类型格式date YYYY-MM-DD datetime YYYY-MM-DD HH:MM:SS timestamp YYYY-MM-DD HH:MM:SS year YYYY 或 YY 具体实现的函数 1、now() 返回当前的日期和时间 SELECT NOW(); 2、curdate() 返回当前的日期 SELECT CURdate(); 3、curtime()返回当…

【Go】panic: reflect: call of reflect.Value.FieldByName on ptr Value

产生原因 调用 FieldByName()方法时,调用者与预期类型不相符。 // 错误代码 func setNewArticleInfoToCache(article *Article) {fields : []string{"Title", "Abstract", "ID", "AuthorID", "CreateTime",}im…

超完整的 Chrome 浏览器客户端调试大全

2019独角兽企业重金招聘Python工程师标准>>> 引言 “工欲善其事,必先利其器” 没错,这句话个人觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负…

PHP 获取服务器详细信息【转】

碰到此问题,做下记录 获取系统类型及版本号: php_uname() (例:Windows NT COMPUTER 5.1 build 2600)只获取系统类型: php_uname(s) (或&#xff1…

HIVE攻略 JFK_Hive安装及使用攻略

目录Hive的安装Hive的基本使用:CRUDHive交互式模式数据导入数据导出Hive查询HiveQLHive视图Hive分区表1. Hive的安装系统环境装好hadoop的环境后,我们可以把Hive装在namenode机器上(c1)。hadoop的环境,请参考:让Hadoop跑在云端系列文章&#…

MySQL 为什么用索引,为什么是 B+树,怎么用索引

MySQL 索引 A database index is a data structure that improves the speed of operations in a table. Indexes can be created using one or more columns, providing the basis for both rapid random lookups and efficient ordering of access to records. 为什么需要索…

页面加载完毕执行多个JS函数

通常我们需要在打开页面时加载脚本,这些脚本必须在页面加载完毕后才可以执行,因为这时候DOM才完整,可以利用window.onload确保这一点,如:window.οnlοadfirstFunction;这脚本的意思是在页面完毕后执行firstFunction函…

Servlet 生命周期、工作原理

Servlet 生命周期:Servlet 加载--->实例化--->服务--->销毁。init():在Servlet的生命周期中,仅执行一次init()方法。它是在服务器装入Servlet时执行的,负责初始化Servlet对象。可以配置服务器&…

【Go 并发控制】上下文 context 源码

Context 在 Go 服务中,往往由一个独立的 goroutine 去处理一次请求,但在这个 goroutine 中,可能会开启别的 goroutine 去执行一些具体的事务,如数据库,RPC 等,同时,这一组 goroutine 可能还需要…

js设置全局变量ajax中赋值

js设置全局变量,在ajax中给予赋值赋值不上问题解决方案 方案一、 //在全局或某个需要的函数内设置Ajax异步为false,也就是同步. $.ajaxSetup({async : false}); //然后再进行你的Ajax操作 $.post(地址, 参数, function(data, status) { if (status &q…

iOS开发UI篇—模仿ipad版QQ空间登录界面

一、实现和步骤 1.一般ipad项目在命名的时候可以加一个HD,标明为高清版 2.设置项目的文件结构,分为home和login两个部分 3.登陆界面的设置 (1)设置第一个控制器和自定义的控制器类(登陆)关联 (2&#xff09…