htmlCSS-----CSS选择器(上)
目录
前言:
1.初级选择器
(1)ID选择器
(2)class选择器
(3)标签选择器
(4)通配选择器
前言:
CSS选择器是CSS页面处理的重要组成部分,前面讲到CSS的三种写法样式,选择器用到最多的是外部样式,通过外部样式去设置选择器可以更好的去处理页面,提高代码的复用性。在此之前我们需要去创建一个CSS文件(外部样式的写法),下面就一起来看看吧。(上一期链接:html&CSS-----CSS介绍与样式书写_灰勒塔德的博客-CSDN博客)
1.初级选择器
初级选择器包括,ID选择器,类选择器(class),还有标签选择器和通配选择器,下面我就进行一一介绍其相关用法。
(1)ID选择器
ID 选择器用来找到HTML文档中具有指定ID属性的标签,ID 选择器的定义需要用到井号
#
,后面紧跟ID属性的值。ID选择器的使用方式和类选择器的使用方式是非常像,但是ID选择器的主要作用是结合js用于确定页面上的唯一元素。单个标签不允许拥有多个id名,同页面中不存出现重复的id名(id重名会影响js代码获取标签)。并不是主要用来设置css的。可见ID选择器是唯一性的,只能作用于一个标签,其权重也是最大的。
示例:
html文件代码
<!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><link rel="stylesheet" href="./index.css">
</head>
<body><div id="nice">这是一个ID选择器<p>hello</p><p id="nic">555</p></div>
</body>
</html>
CSS文件代码:
#nice{color:red;font-size: 50px;
}#nic{color: bisque;
}
效果:
这里可以看出ID选择器是具优先性质的,同样在div的内部,由于一个有定义ID选择器一个没有去ID选择器显示的效果是不一样的。
(2)class选择器
类选择器可以根据标签的class属性,找到具体的HTML标签。类选择器的定义需要用到一个英文的句号
.
,后面紧跟 class 属性的值,在CSS写法如下:
.black {color: black;
}
一个标签可以同时有多个类名,类名之间以空格隔开。使用场景:将一些标签相同的样式放在一个类里面,从而节省css代码的书写。类选择器的权重小于ID选择器的权重,但没有唯一性。
示例:
html代码
<!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><link rel="stylesheet" href="./index.css">
</head>
<body><div class="classsecond" id="nice">你好世界</div><div class="classfirst classsceond">这是一个类选择器</div><p class="classsecond">hello</p>
</body>
</html>
css 代码:
#nice{color:red;font-size: 50px;
}.classfirst{font-size: 50px;color: brown;
}
.classsecond{color:blue
}
效果:
这里可以看出,如果同时出现了ID选择器和class选择器的时候,会优先作用到ID选择器,如果重新两个class选择器并列的时候,是优先作用于第一个class选择器。
(3)标签选择器
一个完整的 HTML 文档由各式各样的标签组成,而标签选择器可以通过具体的标签名称来匹配文档内所有同名的标签,写法如下:
/* 找到页面当中所有的p标签 */
p {color: blue;
}
标签选择器选择的覆盖面广,通常用来做样式的初始化,其权重小于ID选择器,小于类选择器。
示例:
html代码:
<!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><link rel="stylesheet" href="./index.css">
</head>
<body><a href="https://www.yhdmz2.com/" class="classsecond">点开我开始看动漫</a></body>
</html>
CSS代码:
a{/* 删除下划线 */color: brown;text-decoration: none;
}
.classsecond{color:blue
}
效果:
可以看出,同样设置了字体颜色,这里是优先使用class选择器里面的资源颜色。
(4)通配选择器
通配符选择器用星号
*
表示,它不匹配某个特定的HTML元素,而是匹配 HTML文档中的每个元素。我们通常使用通用选择器来清除 HTML元素中默认的内外边距。实际上在我们以后做项目的时候,这一类选择器基本上是不会用到的,因为这一类选择器是把整个代码里面的样式都进行统一化,所以其权重也是比以上讲到的三个选择器的权重要小的。写法如下:
/*通配符选择器在开发中不会使用,一般我们页面的标签的样式不会长的都完全一样。在平常的练习去除标签默认的margin和padding*/
* {margin: 0;padding: 0;
}
示例:
html代码:
<!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><link rel="stylesheet" href="./index.css">
</head>
<body><a href="https://www.yhdmz2.com/" class="classsecond">点开我开始看动漫</a><p class="class">一起看动漫吧!</p><ul><li>东京美食家</li><li>寄生兽</li><li>进击的巨人</li><li>斩赤红之瞳</li></ul>
</body>
</html>
CSS代码:
a{/* 删除下划线 */color: brown;text-decoration: none;
}
.class{font-family: 华文行楷;color:blue}
*{margin: 0;padding: 0;font-size: 40px;
}
效果:
以上是今天的全部内容了,下一期我们接着讲CSS高级选择器,我们下一期再见!
分享一张壁纸:
htmlCSS-----CSS选择器(上)相关推荐
- Css选择器(上) 让样式无孔不入
css选择器 一个可以选择样式的工具, 这里适用于无论是内部代码还是外部引用 abc.css 这类型的文件. 基本选择器 *{ } 就是一个简单的*, 代表应用于全部. 不适合于个 ...
- 前端学习(486):css选择器上
- Web全栈~06.CSS选择器
Web基本笔记~06.CSS选择器 上一期 关系选择器 后代选择器 定义 选择所有被 E 元素包含的 F 元素,中间用空格隔开 语法 E F{ } 例子 <html><head> ...
- css a标签去掉下划线_这30个CSS选择器,你必须熟记(上)
CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计,我们能轻而易举的改变颜色.布局.制作出漂亮的阴影效果等等,我们只需要改几行代码,不需要借助任何软件,就能轻而易举的实现,感觉就像魔法师一般, ...
- css选择器的应用的实验,HTMLCSS实验(3)---掌握CSS选择器的使用方法
[实验题目]HTML&CSS实验(3) [实验目的]掌握CSS选择器的使用方法. ----------------------个人作业,如果有后辈的作业习题一致,可以参考学习,一起交流,请勿直 ...
- 这30个CSS选择器,你必须熟记(上)
关注前端达人,与你共同进步 CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计,我们能轻而易举的改变颜色.布局.制作出漂亮的影音效果等等,我们只需要改几行代码,不需要借助任何软件,就能轻而易举 ...
- 利用CSS选择器爬取豆瓣上的图书
利用CSS选择器爬取豆瓣上的图书 主要技术:熟练掌握requests.BeautifulSoup 爬取图书链接 "https://book.douban.com/latest?icn=ind ...
- CSS 选择器:BeautifulSoup4解析器
和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会局部遍历,而Beautiful Soup 是基 ...
- css选择器及float(浮动)
--------------------------选择器( css有就近原则)------------------------------- 选择器名称 在css表的 ...
- 最常用的css选择器及兼容性 +几个好用却不多见的 nth-child等
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
最新文章
- IIS配置不正确可能导致“远程服务器返回错误: (404) 未找到错误一例。
- DCMTK:验证服务类用户(C-ECHO操作)
- 【c】‘声明’和malloc不要重复开辟空间
- idea 版本控制 忽略要提交的文件
- 最近游戏更新 未整理 无图片 续
- java:单例模式的五种实现方式
- 一站式跨境电商免费开源ERP平台,简洁的操作,助您高效工作
- 微信公众账号分为哪几类?区别是什么
- 基于MATLAB的指纹识别系统仿真设计,基于Matlab的指纹识别系统的研究与实现
- 全球最好听、最值得听的100首英文歌曲。(每首都有下载地址)
- 2022-2028年中国保健食品行业市场运营格局及前景战略分析报告
- VideoProc for mac(全能视频处理软件)
- 微信支付商户接入(一)
- java调用批处理文件_有关java调用批处理文件
- 跟海外大牌正面PK,中国品牌如何出圈?
- 9012,9013,9014,9015,8050,8550三极管的区别
- 通过搭建MySQL掌握k8s(Kubernetes)重要概念(下):参数配置
- 听说,要把南京大学的大门拆了
- 9.1 了解导航窗格
- 卡巴斯基导致SVN不能正常工作
热门文章
- TKinterDesigner从入门到精通视频教程
- Confluence 6 如何考虑设置一个空间的主页
- python--读取特定的txt文件,并统计文件中的词汇
- yolov3实现Kitti baseline(含评估代码:easy、moderate和hard的AP计算,fps计算)(下)
- Oracle的日期函数
- 今年最诱人的10大高校年夜饭,第一名是...
- 如同ps般的css属性-webkit-filter
- 分享4个方法,手机就能搞定图片转文字提取
- 自己制作飞机大战小游戏 canvas应用实例
- 【19调剂】中国科学院大学成都计算所2019年硕士研究生招生预调剂通知