【前端】CSS3学习笔记（一）——选择器
程序员文章站
2022-06-10 14:59:17
✨CSS 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 ✨课程链接 【狂神说Ja ......
✨css
层叠样式表(英文全称：cascading style sheets)是一种用来表现html（标准通用标记语言的一个应用）或xml（标准通用标记语言的一个子集）等文件样式的计算机语言。css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
✨课程链接
【狂神说java】css3最新教程快速入门通俗易懂_哔哩哔哩_bilibili
✨学习笔记——选择器
我的第一个css
h1{
color: blue;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<!-- 规范：建议分离css与html-->
<!-- <style>编写css代码</style>-->
<!-- 语法：-->
<!-- 选择器{-->
<!-- 声明1;-->
<!-- 声明2;-->
<!-- 声明3;-->
<!-- }-->
<!-- 声明最好以;结尾-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>一级标题</h1>
<p>css的优势:<p/>
<p>1、内容和表现分离</p>
<p>2、网页结构表现统一,可以实现复用</p>
<p>3、样式十分的丰富</p>
<p>4、建议使用独立于htm的css文件</p>
<p>5、利用seo，容易被搜索引擎收录!</p>
</body>
</html>
导入方式
/*外部样式*/
h1{
color: green;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<!-- 内部样式-->
<style>
h1{
color: red;
}
</style>
<!-- 外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>优先级 就近原则</p>
<p>外部样式</p>
<ul>
<li>链接式（html）</li>
<li>导入式（css2.1）</li>
</ul>
<!--行内样式 在标签元素中 编写style属性 编写样式-->
<h1 style="color: blue">标题</h1>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<li>导入式</li>
<style>
@import "css/style.css";
/*@import url("css/style.css");*/
</style>
</head>
<body>
<h1>外部样式导入式</h1>
</body>
</html>
基本选择器
标签选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
/*标签选择器 会选择所有这个标签的元素*/
h1{
color: red;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<h1>标签选择器h1</h1>
<h1>标签选择器h1</h1>
<p>标签选择器p</p>
</body>
</html>
类选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
/*类选择器格式 .class的名称{}*/
/*可以多个标签归类 同一个class 可以复用*/
.class1{
color: red;
}
.class2{
color: blue;
}
</style>
</head>
<body>
<h1 class="class1">类选择器</h1>
<h1 class="class2">类选择器</h1>
<h1 class="class3">类选择器</h1>
<p> class="class1">类选择器</p>
</body>
</html>
id选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
/*id选择器 id必须保证全局唯一*/
/*#id名称{}*/
/*不遵循就近原则*/
/*id选择器 > class选择器 > 标签选择器*/
#id1{
color: red;
}
.class1{
color: blue;
}
h1{
color: green;
}
</style>
</head>
<body>
<h1 id="id1">id选择器</h1>
<h1 class="style1">id选择器</h1>
<h1>id选择器</h1>
</body>
</html>
基本选择器总结
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
p{
font-size: 20px;
}
</style>
</head>
<body>
<p>标签选择器 选择一类标签</p>
<p>类选择器 选择所有class属性一致的标签 跨标签</p>
<p>id选择器 全局唯一</p>
<br>
<p>优先级：</p>
<p>不遵循就近原则<p/>
<p>id选择器 > class选择器 > 标签选择器</p>
</body>
</html>
层次选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
/*后代选择器*/
/*body p{*/
/* background: red;*/
/*}*/
/*子选择器*/
/*body > p{*/
/* background: green;*/
/*}*/
/*相邻兄弟选择器 只有下一个*/
/*.active + p{*/
/* background: red;*/
/*}*/
/*通用兄弟选择器 当前选中元素的向下所有兄弟元素*/
.active ~ p{
background: blue;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>
结构伪类选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<!-- 避免使用class id选择器-->
<style>
/*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;
}
</style>
</head>
<body>
<!-- <a href="">a</a>-->
<!-- <h1>h1</h1>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
属性选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.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;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com/" class="links item first" id="first">1</a>
<a href="https://www.baidu.com/" class="links item active" target="_blank" title="test">2</a>
<a href="images/none.html" class="links item active">3</a>
<a href="images/none.png" class="links item">4</a>
<a href="none.jpg" class="links item">5</a>
<a href="none.pdf" class="links item">6</a>
<a href="none.docx" class="links item">7</a>
<a href="none.pptx" class="links item">8</a>
<a href="none.xlsx" class="links item">9</a>
<a href="none.cpp" class="links item last">10</a>
</p>
</body>
</html>
⭐转载请注明出处
本文作者：双份浓缩馥芮白
原文链接：https://www.cnblogs.com/flat-white/p/14964830.html
版权所有，如需转载请注明出处。
推荐阅读
-
PHP 面向对象程序设计（oop）学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
-
Flask框架学习笔记（一）安装篇（windows安装与centos安装）
-
CSS3 :not()选择器实现最后一行li去除某种css样式
-
前端笔记之微信小程序（一）初识微信小程序&WXSS与CSS|WXML与HTML的差异&像素和DPR
-
C＃Web应用程序入门经典学习笔记之一
-
Python学习笔记（一）(基础入门之环境搭建)
-
python网络编程学习笔记(五)：socket的一些补充
-
python网络编程学习笔记(一)
-
Redis学习笔记（一）：Redis的数据类型
-
CSS3中的Media Queries学习笔记