前端知识之CSS(1)-css语法、css选择器（属性、伪类、伪元素、分组与嵌套）、css组合器
前端基础之css
1.关于css的介绍
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，也就是给HTML标签修改样式。
当浏览器读取到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
可能我们还会看到css3，后面这个数字指的是它的版本号
css语言开发的文件是以.css为后缀，通过在html文件中引入该css文件来控制html代码的样式（css语言代码也可以直接写在html文件中）
采用的语言是级联样式表 （Cascading Style Sheet），也属于标记语言。
2.css语法
1.每个css样式由俩个部分组成：选择器和声明，声明又包括属性和属性值，每个声明之后要以分号作为结束
2.语法结构
选择器 {
属性名1:属性值1;
属性名2:属性值2;
}
3.注释语法
/*注释内容*/
3.三种编写CSS的方式
css是来控制页面标签的样式，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行内式、内部式和外部式三种。
1.head中style标签内部直接编写(学习阶段使用 方便)
2.head中link标签引入外部css文件(最正规)
3.直接在标签内部通过style属性编写(不推荐)
3.1.style内部直接编写css代码
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
color: red;
}
</style>
</head>
3.2.link标签引入外部css文件
外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css真正的.css">
</head>
3.3.标签内直接书写
<body>
<h1 style="color: blue">热死个人</h1>
</body>
4.css四个基本选择器(标签选择器、类选择器、id选择器、通用选择器)
因为同一个页面上有很多相似的标签 并且这些标签在不同的位置有不同的样式 所以为了能够区分 我们肯定先需要学习如何查找指定的标签
/*1.标签选择器:直接编写标签名来查找标签*/
div {
color: green; /*查找所有的div标签 并将内部的文本颜色变为绿色*/
}
/*2.类选择器:通过编写class的值来查找标签*/
.c1 {
color:red; /*查找所有class属性中含有c1的标签 并将内部的文本颜色变为红色*/
}
/*3.id选择器:通过编写id的值来精准查找标签*/
#d1 {
color: aquamarine; /*查找id值是d1的标签 并将内部的文本颜色改为天青色*/
}
/*4.通用选择器:查找所有的标签*/
* {
color: blue; /*查找所有的标签 并将内部的文本颜色改为蓝色*/
}
5.css组合器(重点)
为了区分嵌套标签之间的关系，我们发明了一种称呼
<div>div
<span>div里的span</span>
<p>div里的p
<span>div里的p里的span</span>
</p>
<span>div里的span</span>
</div>
<span>与div同层的span1</span>
<span>与div同层的span2</span>
<span>与div同层的span3</span>
/*
span是p的儿子 是div的孙子也可以说是div的后代
p是div的儿子也是div后代 是span的父亲
div是p的父亲是span的爷爷 也可以说是他们的祖先
*/
5.1.后代选择器(特征为空格)空格的意思就是后代
/*查找div标签内部所有的span(后代)*/
/*1.后代选择器: 两个选择器之间空格隔开 查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签*/
<style>
div span{
color: orchid;
}
</tyle>
5.2.儿子选择器(特征>)
/*查找div标签内部所有的儿子span*/
/*2.儿子选择器 两个选择器之间大于号隔开 查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签*/
<style>
div > span {
color: orange;
}
</syle>
5.3.毗邻选择器(特征为+)
/*查找div标签同级别下面紧挨着的一个span标签(弟弟)*/
/*3.毗邻选择器*/
<style>
div + span {
color: aqua;
}
</style>
5.4.弟弟选择器(特征为~)
/*查找同级别下面所有的span(不需要紧挨着)*/
<style>
div ~ span {
color: deeppink;
}
</style>
6.css属性选择器
所有的标签除了有自己默认的属性之外 还可以拥有自定义的任意属性
<p id="d1" class="c1" name="jason" pwd="123">123</p>
6.1.查找属性名含有name的标签
<style>
[name] {
background-color: lightpink;
}
</style>
<body>
<input type="text" name="username" placeholder="username">
<input type="text" name="password" placeholder="password">
<a href="" name="username" value="321">我是a标签</a>
<div name="username">我是div</div>
</body>
6.2.查找属性名含有name并且值是username的标签
<style>
[name='username'] {
background-color: antiquewhite;
}
</style>
<body>
<input type="text" name="username" placeholder="username">
<input type="text" name="password" placeholder="password">
<a href="" name="username" value="321">我是a标签</a>
<div name="username">我是div</div>
</body>
6.2.查找input标签并且 属性名含有name值是username的
<style>
input[name='username'] {
background-color: cadetblue;
}
</style>
<body>
<input type="text" name="username" placeholder="username">
<input type="text" name="password" placeholder="password">
<a href="" name="username" value="321">我是a标签</a>
<div name="username">我是div</div>
</body>
7.css选择器之分组与嵌套
7.1.当多个选择器查找到的标签需要调整相同的样式，那么可以合并
当多个选择器查找到的标签需要调整相同的样式，那么可以合并
<style>
div,span,p { /*查找div或者span或者p*/
color: red;
}
</style>
7.2.并且合并的选择器彼此不干扰也没有类型的限制
<style>
div,#d1,.c1 { /*标签查找div id查找d1 类查找c1*/
color: red;
}
</style>
7.3.不并列同样可以使用组合选择器
<style>
.c1 p { /*查找class为c1的后代p标签*/
color: red;
}
</style>
7.4.还可以在选择器基础之上添加额外的选择使得查找更精确
<style>
div#d1 { /*查找id为d1的div标签*/
color: red;
}
</style>
<style>
div.c1 { /*查找class为c1的div标签*/
color: red;
}
</style>
8.css选择器之伪类选择器
a标签默认的颜色有两种 紫色跟蓝色
紫色:链接地址已经被点击过了
蓝色:链接地址从来没有点击过
8.1.:hover(鼠标悬浮在上面会发送变化）
<style>
a:hover{
color: deeppink;
}
</style>
<body>
<a href="" name="a" value="321">我是a标签,鼠标未停留</a><br>
<a href="" name="b" value="321">我是a标签，鼠标停留</a>
</body>
8.2.:focus(聚焦状态）
<style>
[name]:focus {
background-color: cadetblue;
}
</style>
<body>
<input type="text" name="username">
</body>
8.3.:link(未访问状态）
<style>
a:link{
color: lightpink;
}
</style>
<body>
<a href="css基本选择器.html">我是a链接</a>
</body>
8.4.:active(选定的链接）
<style>
a:active{
color: darkorange;
}
</style>
<body>
<a href="css基本选择器.html">我是a链接</a>
</body>
8.5.:visited(以访问的状态）
a:visited{
color: darkorange;
}
</style>
<body>
<a href="css基本选择器.html">我是a链接</a>
</body>
9.css选择器之伪元素选择器(first-letter、before、after)
伪元素选择器可以用在解决标签浮动所带来的的负面影响 也可以用来做数据的防爬
<style>
p:first-letter{
/*设置第一个字的大小、颜色*/
font-size: 48px;
color: green;
}
p:before{
/*在文本前面添加信息*/
content:"歌词：";
color:salmon;
}
p:after{
/*在文本后面面添加信息*/
content:"结束了";
color: cornflowerblue;
}
</style>
<body>
<p>
想着你的感觉，有如风的缠绻，吹乱我的日夜，吹也吹不走你的容颜
</p>
</body>
10.css选择器优先级
10.1.相同选择器不同导入方式(相同距离优先)
相同选择器不同导入方式(相同距离优先)
选择器系统遵循就进原则 从上往下谁离标签更近谁说了算
就近原则
2.选择器不同的情况
行内 > id选择器 > 类选择器 > 标签选择器
!important
10.2.不同选择器不遵循就近原则>>>:优先级
不同选择器不遵循就近原则>>>:优先级
行内选择器 > id选择器 > 类选择器 > 标签选择器
!important
10.3.!important
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试Css中的!Important区别</title>
</head>
<style type="text/css">
.testClass{
color:blue !important;
}
</style>
<body>
<div class="testClass" style="color:red;">
<!-- 虽然元素的style中有testClass类的定义，但是在上面的css定义中的用!important限定的定义却是优先级最高的-->
测试Css中的Important
</div>
</body>
</html>
无论是在ie6-10或者Firefox和Chrome表现都是一致的，都显示蓝色。
这种情况也同时可以说明ie6是可以识别!important的，只是这个是ie6的一个缺陷吧。如果写成下面的样式，ie6是识别不出来的：
.testClass{
color:blue !important;
color:red;
}
当然，也可以通过以下方式来让ie6识别：
.testClass{
color:blue !important;
}
.testClass{
color:red;
}
通过以上方式也是可以让ie6显示成蓝色的。
前端知识之CSS(1)-css语法、css选择器（属性、伪类、伪元素、分组与嵌套）、css组合器的更多相关文章
- css伪类伪元素
在CSS中,模式(pattern)匹配规则决定哪种样式规则应用于文档树(document tree)的哪个元素.这些模式叫着选择符(selector). 一条CSS规则(rule)是选择符{属性:值; ...
- CSS学习摘要-语法和选择器
主要摘自网络开发者. 从最基本的层次来看,CSS是由两块内容组合而成的: 属性(Property):一些人类可理解的标识符,这些标识符指出你想修改哪一些样式,例如:字体,宽度,背景颜色等. 属性值(V ...
- 3 CSS 定位&浮动&水平对齐&组合选择符&伪类&伪元素
CSS Position(定位):元素的定位与文档流无关 static定位: HTML元素的默认值, 没有定位,元素出现在正常的流中 静态定位的元素不会受到top,bottom,left,right影 ...
- css伪类 伪元素
之前写了一篇 <详解 CSS 属性 - :before && :after> 的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸 @riophae 兄指正 ...
- CSS篇-样式表、选择器、权重、伪类
CSS定义 CSS:Cascading Style Sheet(层叠样式表) // 写法 选择器 { 属性名: 属性值; } CSS样式表 (1)三种样式表使用 // 内联样式 <div sty ...
- 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
- css样式（二）（伪类 | 伪元素 | 导航 | 图像拼合 | 属性选择器 ）
一.rgb值: RGBA 颜色 RGBA 颜色值得到以下浏览器的支持:IE9+.Firefox +.Chrome.Safari 以及 Opera +. RGBA 颜色值是 RGB 颜色值的扩展,带有一 ...
- css中伪类/伪元素详解
一.伪类和伪元素 伪类和伪元素都是用来修饰不在文档树中的部分,区别在于, 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active). ...
- 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器
今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...
随机推荐
- 一个支持数据绑定与数据联动的Dashboard
什么是仪表盘 仪表盘是不同部件的组合,可以在一个页面集中显示各类信息,方便用户集中查看信息.并快速处理业务 关于制作部件,请参见:制作部件 CabloyJS仪表盘的特点 更灵活的自适应能力,可以针对m ...
- EnvironmentLocationNotFound: Not a conda environment: C:\Program Files\Anaconda3
可参考:https://blog.csdn.net/dscn15848078969/article/details/114743744
- docker-compose 搭建 Prometheus+Grafana监控系统
有关监控选型之前有写过一篇文章: 监控系统选型,一文轻松搞定! 监控对象 Linux服务器 Docker Redis MySQL 数据采集 1).prometheus: 采集数据 2).node-ex ...
- 合宙AIR105(二): 时钟设置和延迟函数
目录 合宙AIR105(一): Keil MDK开发环境, DAP-Link 烧录和调试 合宙AIR105(二): 时钟设置和延迟函数 Air105 的时钟 高频振荡源 芯片支持使用内部振荡源, 或使 ...
- RPA应用场景-信用卡交易争议后续流程
RPA应用场景-信用卡交易争议后续流程 场景概述 信用卡交易争议后续流程 所涉系统名称 客服系统,邮件 人工操作(时间/次) 4小时 所涉人工数量20操作频率 不定时 场景流程 1.RPA自动接收客户 ...
- Python爬虫常用：谷歌浏览器驱动——Chromedriver 插件安装教程
我们在做爬虫的时候经常要使用谷歌浏览器驱动,今天分享下这个Chromedriver 插件的安装方法. 第一步:打开谷歌浏览器打开设置面板 嫌枯燥的小伙伴可以点击此处找管理员小姐姐领取免费资料 第二步: ...
- SQL SERVER 算法面试题，自己再插入数据时，本想一次性复制10条数据，结果变成了1024条。产生一个算法bug，最后记录一下
- 自己动手实现 HashMap（Python字典），彻底系统的学习哈希表（上篇）——不看血亏！！！
HashMap(Python字典)设计原理与实现(上篇)--哈希表的原理 在此前的四篇长文当中我们已经实现了我们自己的ArrayList和LinkedList,并且分析了ArrayList和Linke ...
- 👨💻Mybatis源码我搞透了，面试来问吧！写了134个源码类，1.03万行代码！
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言:手撸一万行! 完结撒花:4个月.20章.134个类.1.03万行代码! 22年3月初 ...
- 7 什么是dubbo
什么是dubbo 快速入门dubbo 了解什么是dubbo之前,我们得先了解什么是分布式系统? <分布式系统原理与范型>定义: 分布式系统是若干独立计算机的集合,这些计算机对于用户来说就像 ...