【CSS】聊一聊css的选择器
对于css来说,他的基本语法就是
选择器 {
K:V;
K:V;
K:V
}
所以css的学习就分为两个部分:
* 1 选择器 选中元素(标签)
* 2 各种属性
其中选择器尤为重要,因为如果无法确定样式具体作用的标签,那么设置样式也就无从谈起。所以今天我们一起来聊一聊css中的选择器。
一 基本选择器
首先我们需要掌握几种基本选择器,如果能熟练掌握基本选择器,实际上就可以开发出大部分的页面样式。
1.1 标签选择器
最基本的选择器就是标签选择器,标签选择器就是直接使用div,p这种标签名,这种设定会影响到页面中所有的该标签。
2css.html(head部分)
<style>
/* 所有p标签都起作用*/
p {
color: orange;
}
</style>
2css.html(body部分)
<p>第一段</p>
<div>
<div>
<div>
<div>
<p>我隐藏的比较深</p>
</div>
</div>
</div>
</div>
实现效果:
两个p标签都改变了样式,字体颜色变成了橘黄色。
1.2 类选择器
如果我们只希望更改第一个p标签的样式,而不更改第二个p标签,这时候就可以选择类选择器,具体实现方法就是给标签添加class属性,要注意可以给不同的标签赋予同样的类名,因为物以类聚,人以群分,从而实现同一类的样式控制。给类设样式时我们使用 .类名 的方式。
2css.html(head部分)
<style>
/* 选中class含有p1的元素 */
.p1 {
color: red;
}
</style>
2css.html(body部分)
<p class="p1">第一段</p>
<div>
<div>
<div>
<div>
<p>我隐藏的比较深</p>
</div>
</div>
</div>
</div>
实现效果:
Q:那么又一个新问题来了,我们能否给一个标签设置不同的类呢??答案是可以的,我们使用 class="类名1 类名2 ..." 的方式。要注意不同类名之间用空格隔开。
2css.html(head部分)
<style>
/* 选中class含有p1的元素 */
.p1 {
color: red;
}
.h2 {
text-align: center; /*让文字水平居中*/
background-color: aqua
}
</style>
2css.html(body部分)
<!--有多个class就写在class属性里面,用空格隔开-->
<h2 class="p1 h2">二级标题</h2>
实现效果:
1.3 id选择器
id选择器与class选择器很类似,同样是给标签设置id属性,赋予id值。给id设置样式时我们使用 #id值 的格式。其实我们也可以给不同的标签设置同样的id值来实现同类样式控制,但极其不建议这样做。作为一个开发人员,我们必须对id唯一性有一个认识,即每一个id值都是独一无二,不允许重复的。一般我们使用id选择器就是表示一个独一无二的标签。
3css.html(head部分)
<style>
/* 选中id值为p2的元素,表示某一个独一无二的区域时常用 */
#p2 {
color: blue
}
</style>
3css.html(body部分)
<p>这是段落</p>
<p id="p2">这是段落</p>
<p>这是段落</p>
实现效果:
1.4 通配符选择器(基本不用)
通配符选择器就是针对html中的所有标签,用 * 表示,但我们基本不用,因为相比而言,通配符选择器的代价大,效率低。通常使用并集选择器代替(下文有举例)。
3css.html(head部分)
<style>
/* 通配符选择器 ,所有工程上很少使用,因为效率太低 */
* {
color:blue;
}
</style>
3css.html(body部分)
<div>div</div>
<p>p</p>
<h1>h1</h1>
实现效果:
二 高级选择器
除了以上基本选择器之外,我们还需要掌握几种高级选择器,他们功能更强大,开发起来速度更快。
2.1 后代选择器
后代选择器,就是先写出父代,然后再写出子代,以 父代 子代 的方式确定样式作用的标签,以空格连接。
5css.html(head部分)
<style>
/*后代选择器,中间以空格连接*/
ul li {
font-size: 30px;
color: green;
}
div li {
background-color: skyblue;
}
</style>
5css.html(body部分)
<ul>
<li>
<p>111</p>
</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<div>
<ul>
<li>item</li>
</ul>
</div>
实现效果:
2.2 交集选择器
交集选择器,就是既满足条件A,又满足条件B的标签,以 AB 的方式确定样式作用的标签,注意不要用空格连接!
5css.html(head部分)
<style>
/*交集选择器 表示给同时满足这两个条件的元素设置样式。。注意中间不能加空格*/
div.box {
color: orange;
}
</style>
5css.html(body部分)
<div class="box">
<ul>
<li>item</li>
</ul>
</div>
<div>
这是第二个div
</div>
实现效果:
只有第一个div改变了样式,因为它的class为box,满足了交集选择器的要求。
2.3 并集选择器
并集选择器就是所列出来的标签都会采用这种样式,以 A,B,C ... 的方式确定样式作用的标签,以,连接。
我们将通配符选择器中所举的例子进行简单更改。
4css.html(head部分)
<style>
div,p,h1 {
color: green;
}
</style>
4css.html(body部分)
<div>div</div>
<p>p</p>
<h1>h1</h1>
实现效果:
以上就是关于选择器的相关知识,希望在开发中能够根据实际场景,灵活选择不同的选择器。
【CSS】聊一聊css的选择器的更多相关文章
- CSS样式----图文详解:css样式表和选择器
主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
- [HTML] CSS Id 和 Class选择器
id 和 class 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. id 选择器 id 选择器可以为标 ...
- 前端学习——css基础知识,选择器与html模板、值得收藏的html标签
一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...
- css笔记09:选择器优先级
1. (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- CSS 选择器之基本选择器 属性选择器 伪类选择器
CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.classNa ...
- css中所有的选择器
认识css中所有的选择器 什么是选择器 每一条样式申明(定义)由两部分组成 选择器{ 样式: } 标签选择器 p{ font-size:12px: line-height:1.6em; ...
- CSS——类和ID选择器的区别
1.相同点,可以应用在任何元素. 2.不同点,ID选择器只能在元素里只能分别引用,不能同时引用. 如: <style type="text/css">.stress{( ...
- css格式比较及选择器类型总结
在前端入门的前三天把网页制作过程中常用的一些标签和属性都认识和练习了一遍,能够做出简单模块的框架.就像老师说的网页制作就像建一栋大楼,html是砖和水泥,css是精装,js是完善各个功能.现在就开始进 ...
- 从零开始学 Web 之 CSS(一)选择器
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
随机推荐
- python_tkinter基本属性
1.外形尺寸 尺寸单位:只用默认的像素或者其他字符类的值!,不要用英寸毫米之类的内容. btn = tkinter.Button(root,text = '按钮') # 设置按钮尺寸,绝大多数默认单位 ...
- CF700E Cool Slogans——SAM+线段树合并
RemoteJudge 又是一道用线段树合并来维护\(endpos\)的题,还有一道见我的博客CF666E 思路 先把\(SAM\)建出来 如果两个相邻的串\(s_i\)和\(s_{i+1}\)要满足 ...
- Java反射的使用
反射的概述 1.Java反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法. 2.对于任意一个对象,都能调用它的任意一个方法和属性. 3.通过动态获取的信息以及动态调用对象的方法 ...
- 2018ccpc吉林 E:THE TOWER——数形结合
题目 链接 给你一个圆锥(位于坐标原点,告诉你高h 和底面半径 r),和一个点(x,y,z)并告诉你这个点的速度, 让你求点和圆锥相撞的最小时间(保证一定相撞) 分析 易知,将直线的参数方程与圆锥曲面 ...
- JDBC (Java DataBase Connectivity)数据库连接池原理解析与实现
一.应用程序直接获取数据库连接的缺点 用户每次请求都需要向数据库获得链接,而数据库创建连接通常需要消耗相对较大的资源,创建时间也较长.假设网站一天10万访问量,数据库服务器就需要创建10万次连接,极大 ...
- nginx 之 root和alias
转载: https://www.jianshu.com/p/4be0d5882ec5 https://blog.csdn.net/Erica_1230/article/details/7855311 ...
- Android App常用控件
- 论一种基于JS技术的WEB前端动态生成框图的方法
前言 HTML是一种标记语言,由HTML的标签元素和文本编写的文档可被浏览器描述为一幅网页.通常情况下网页的实现是由HTML.CSS和Javascript三者结合完成的,HTML负责网页的结构,CSS ...
- apidoc 接口文档系统
代码未动,文档先行.apidoc可以方便地维护接口文档.模拟响应数据.前后端分离.导出PDF文档. 特性说明 可视化编辑:支持表单界面编辑接口,不必手动编辑swagger.json 接口模拟响应:支持 ...
- Android input输入框 移动页面input手机键盘中的“搜索”按键
动页面input手机键盘中的“搜索”按键 满足以下几点机即可: input type="search" 放到form标签中 使用action属性 <form ac ...