狂神css3笔记,【CSS】CSS3学习笔记(一)——选择器
✨CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
✨课程链接
【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili
✨学习笔记——选择器
我的第一个CSS
h1{
color: blue;
}
Title
一级标题
css的优势:
1、内容和表现分离
2、网页结构表现统一,可以实现复用
3、样式十分的丰富
4、建议使用独立于htm的css文件
5、利用SEO,容易被搜索引擎收录!
导入方式
/*外部样式*/
h1{
color: green;
}
Title
h1{
color: red;
}
优先级 就近原则
外部样式
- 链接式(html)
- 导入式(css2.1)
标题
Title导入式
@import "css/style.css";
/*@import url("css/style.css");*/
外部样式导入式
基本选择器
标签选择器
Title
/*标签选择器 会选择所有这个标签的元素*/
h1{
color: red;
}
p{
font-size: 20px;
}
标签选择器h1
标签选择器h1
标签选择器p
类选择器
Title
/*类选择器格式 .class的名称{}*/
/*可以多个标签归类 同一个class 可以复用*/
.class1{
color: red;
}
.class2{
color: blue;
}
类选择器
类选择器
类选择器
class="class1">类选择器
id选择器
Title
/*id选择器 id必须保证全局唯一*/
/*#id名称{}*/
/*不遵循就近原则*/
/*id选择器 > class选择器 > 标签选择器*/
#id1{
color: red;
}
.class1{
color: blue;
}
h1{
color: green;
}
id选择器
id选择器
id选择器
基本选择器总结
Title
p{
font-size: 20px;
}
标签选择器 选择一类标签
类选择器 选择所有class属性一致的标签 跨标签
id选择器 全局唯一
优先级:
不遵循就近原则
id选择器 > class选择器 > 标签选择器
层次选择器
Title
/*后代选择器*/
/*body p{*/
/* background: red;*/
/*}*/
/*子选择器*/
/*body > p{*/
/* background: green;*/
/*}*/
/*相邻兄弟选择器 只有下一个*/
/*.active + p{*/
/* background: red;*/
/*}*/
/*通用兄弟选择器 当前选中元素的向下所有兄弟元素*/
.active ~ p{
background: blue;
}
p0
p1
p2
p3
p4
p5
p6
p7
p8
结构伪类选择器
Title
/*ul第一个元素*/
ul li:first-child{
background: red;
}
/*ul最后一个元素*/
ul li:last-child{
background: blue;
}
/*选中p1*/
/*定位到父元素 选择当前的第一个元素*/
/*选择当前p元素的父级元素 选中父级元素的第一个 并且是当前元素才生效*/
p:nth-child(1){
background: green;
}
/*选择当前p元素的父级元素 选中p元素的第二个 类型*/
p:nth-of-type(2){
background: yellow;
}
a:hover{
background: red;
}
p1
p2
p3
- li1
- li2
- li3
属性选择器
Title
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: red;
text-decoration: none;
text-align: center;
font:bold 20px/50px Arial;
color: gainsboro;
margin-right: 5px;
}
/*属性名 属性名 = 属性值(正则)*/
/*
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
*/
/*存在id属性的元素*/
/*a[id]{*/
/* background: yellow;*/
/*}*/
/*a[id = first]{*/
/* background: yellow;*/
/*}*/
/*class中有links的元素*/
/* a[class*="links"]{
background: yellow;
} */
/* 选中herf中以http开头的元素 */
a[href^=http]{
background: yellow;
}
a[href$=pdf]{
background: blue;
}
1
2
3
4
5
6
7
8
9
10
⭐转载请注明出处
本文作者:双份浓缩馥芮白
原文链接:https://www.cnblogs.com/Flat-White/p/14964830.html
版权所有,如需转载请注明出处。
狂神css3笔记,【CSS】CSS3学习笔记(一)——选择器相关推荐
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- CSS入门学习笔记+案例(1)
CSS入门学习 一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet 层叠样式表 是一组样式设置的规则,用于控制页面的外观样式 2.为什么使用CSS 实现内容与样式的分 ...
- CSS入门学习笔记(案例+详解)
CSS入门学习笔记 一.CSS简介 1.什么是CSS? 2.为什么使用CSS? 3.CSS的作用 二.CSS语法 1.CSS基础语法 2.CSS注释语法 3.CSS应用方法 三.CSS选择器 1.元素 ...
- [前端笔记——CSS] 10.层叠与继承+选择器
[前端笔记--CSS] 10.层叠与继承+选择器 1.层叠与继承 1.1 冲突规则 1.2 继承 1.3 层叠 1.4 CSS位置的影响 2.选择器 2.1 选择器是什么? 2.2 选择器列表 2.3 ...
- 黄海广博士的机器学习个人笔记及深度学习笔记
想要下载黄海广博士的机器学习个人笔记及深度学习笔记的请复制下面链接 https://download.csdn.net/download/wgllovemother/10447758 备注:有想下载 ...
- Tsai笔记:GPOPS学习笔记(1)—— 高斯伪谱法的最基本优化方程求解思路(例子介绍)
Tsai笔记:GPOPS学习笔记(1)-- 高斯伪谱法的最基本优化方程求解思路(例子介绍) Tsai三步.(第一步,基本说明.第二步,结果图显示.第三步,代码展示.) 第一步,基本说明. A.问题说明 ...
- Web前端html5+css3前端开发入门学习笔记
文章目录 前言 HTML 认识HTML 1. 网页组成和本质 2.了解浏览器 3.web标准 4.HTML感知 5.HTML骨架 6.编译软件vscode的简介和使用 7.注释 8.标签组成和关系 9 ...
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3与页面布局学习笔记(一)——概要、选择器、特殊性与刻度单位
web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能 ...
- CSS(3)学习笔记——持续更新
本篇皆是本人长期记录并整理出来的笔记,如有记录得不对的地方,欢迎探讨.记录的很少,将不断学习不断补充. 1 选择器 CSS(3)中提供的选择器手册(w3school):http://www.w3sch ...
最新文章
- kset_register
- 机器学习特征工程之连续变量离散化:等频分箱
- 基于Vuejs+ElementUI的答案录入功能的一些总结
- C#开发中碰到的问题------Uncaught TypeError: Cannot read property 'style' of undefined
- mybitas oracle.sql.clob,Oracle使用简单函数
- Hexo+腾讯CVM+又拍云+github+gitee+coding
- Pycharm 输出中文或打印中文乱码现象的解决办法
- 你见过的“垃圾”项目是这样子么?
- Java数据库篇7——数据库设计
- 本地计算机所安装的网络组件,3.2 在本地计算机中安装和配置IIS
- tmemo 选择消除行_无线耳机新选择
- android 右边抽屉,android – 抽屉在右侧抽屉中切换
- x264_param_default分析
- SVN+MAVEN项目打包
- python3+selenium入门03-操作谷歌浏览器
- 给一个网址传递参数,并接收返回的参数
- 关于Sound Blaster Cinema 6找不到音频设备 史上最简单的解决方案
- 必须安装三星系列android系统智能手机usb驱动程序,三星usb手机驱动
- 2021年互联网热梗盘点
- xxx科技有限公司_公司管理制度
热门文章
- cp和scp复制命令
- 【BZOJ4568】幸运数字,树链剖分/倍增+维护线性基
- python读取数据库绘图_获取博客积分排名,存入数据库,读取数据进行绘图(python,selenium,matplotlib)...
- 【英语学习】【Level 08】U01 Let's Read L6 Person of the year
- 【英语学习】【WOTD】rowel 释义/词源/示例
- Pentium 4处理器架构/微架构/流水线 (3) - NetBurst微架构
- JavaWeb入门之简单分页查询功能实现
- ATC计算机会议,重点实验室张峰博士论文被国际系统领域顶会USENIX ATC 2020接收
- python excel详解_Python - excel 详解
- win10你的电脑设备需要修复_图文详解win10升级失败的解决方法