学习来源:尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频
⭐️前文回顾:前端 | (三)表单及HTML4收尾 | 尚硅谷前端html+css零基础教程2023最新
⭐️前文对应p41-p56
,本文对应p57-p86
⭐️补充网站:W3school,MDN
写在单独的.css
文件中,随后在HTML文件中引入使用。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>示例title>
head>
<body>
<h1 >欢迎来到尚硅谷学习h1>
body>
html>
/* 给h1添加样式 */
h1{
color: red;
font-size: 40px;
}
优先级规则:行内样式 > 内部样式 = 外部样式
CSS语法规范由两部分构成:
作用:可以选中所有的HTML元素。
语法:
*{
属性名:属性值;
}
举例:
/* 举例,选中所有元素 */
*{
color:orange;
font-size: 40px;
}
目前来看,通配选择器貌似有点鸡肋,但后面清除样式时,会对我们有很大帮助。
标签名{
属性名:属性值;
}
/* 选中所有h1元素 */
h1{
color: orange;
font-size: 40px;
}
/* 选中所有p元素 */
p{
color: blue;
font-size: 60px;
}
元素选择器无法实现差异化设置,例如上面的代码中,所有的p元素效果都一样。
语法:
.类名{
属性名:属性值;
}
举例:
/* 选中所有class值为speak的元素 */
.speak{
color: red;
}
/* 选中所有class值为big的元素 */
.big{
color: blue;
}
关于元素的class属性:
<h1 class="speak" class="big">你好啊h1>
<h1 class="speak pig">你好啊h1>
#id值{
属性名:属性值;
}
/* 选中id值为lala的那个元素 */
#lala{
color: red;
font-size: 60px;
}
- 复合选择器建立在基本选择器之上,由多个基本选择器,通过不同的方式组合而成。
- 符号位选择器可以在复杂结构中,快速而准确地选中元素。
选择器1选择器2选择器3...选择器n{}
/* 选中:类名为beauty的p元素,此种写法用得非常多!! */
p.beauty{
color: blue;
}
/* 选中:类名包含rich和beauty的元素 */
.rich.beauty{
color: green;
}
选择器1,选择器2,选择器3,...选择器n{}
,这里的,
就是或
/* 选中id为peiqi,或类名为rich,或类名为beauty的元素 */
#peiqi,
.rich,
.beauty{
font-size: 40px;
background-color: skyblue;
width: 200px;
}
选择器1 选择器2 选择器3 ... 选择器n {}
, (先写祖先,再写后代),选择器之间,用空格隔开,空格可以理解为“xxx中的”。/* 选中ul中的所有li */
ul li{
color: red;
}
/* 选中ul中的所有li中的a */
ul li a{
color: orange;
}
/* 选中类名为subject元素中的所有li */
.subject li{
color: blue;
}
/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end{
color: blue;
}
选择器1>选择器2>选择器3>......选择器n {}
,用>
隔开,>
可以理解为“xxx的子代”。/* div中的子代a元素 */
div>a{
color: red;
}
/* 类名为persons的元素中的子代a元素 */
.persons>a{
color: red;
}
两种兄弟选择器,选择的是下面的兄弟。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>属性选择器title>
<style>
/* 第一种写法,选中具有某个属性的元素 */
[title]{
font-size: 40px;
}
/* 第二种写法:选中包含某个属性,且属性值等于指定值的元素 */
[title="lalayouyi"]{
color: red;
}
/* 第三种写法:选中包含某个属性,且属性值以指定值开头的元素 */
[title^="you"]{
color: aqua;
}
/* 第四种写法:选中包含某个属性,且属性值以指定值结尾的元素 */
[title$="er"]{
color:blue;
}
/* 第五种写法:选中包含某个属性,属性值包含指定值的元素 */
[title*="luyou"]{
color:palegreen;
}
style>
head>
<body>
<div title="lalayouyi">啦啦右一div>
<div title="lalazuoer">啦啦左二div>
<div title="youyi">右一div>
<div title="luluyouyi">噜噜右一div>
body>
html>
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动态伪类title>
<style>
/* 选中的是没有访问过的a元素 */
a:link{
color: aquamarine;
}
/* 选中的是访问过的a元素 */
a:visited{
color: gray;
}
/* 选中的是鼠标悬浮状态的a元素 */
a:hover{
color: yellow;
}
/* 选中的是激活(点下未抬起)状态下的a元素 */
a:active{
color: blueviolet;
}
/* 在输入时(获取焦点时)选中 */
input:focus{
color: red;
background-color: pink;
}
style>
head>
<body>
<a href="https://www.baidu.com">去百度a>
<a href="https://www.jd.com">去京东a>
<input type="text">
body>
html>
总的来说,n是需要满足
an+b
格式的公式,n从0开始。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器title>
<style>
/* ul里li的偶数个标绿 */
ul > li:nth-child(2n){
color: green;
}
/* ul里li的奇数个标紫 */
ul > li:nth-child(odd){
color: purple;
}
/* ul里第一个li标红 */
ul > li:first-of-type{
color: red;
}
/* ul里最后一个li标蓝 */
ul > li:last-child{
color: blue;
}
style>
head>
<body>
<ul>
<span>我是一个spanspan>
<li>第0个li>
<li>第1个li>
<li>第2个li>
<li>第3个li>
<li>第4个li>
<li>第5个li>
ul>
body>
html>
否定伪类::not(选择器)
,排除满足括号中条件的元素。
目标伪类::target
,选中描点指向的元素。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>目标伪类title>
<style>
div{
background-color: aquamarine;
height: 200px;
}
div:target{
background-color: cornflowerblue;
}
style>
head>
<body>
<a href="#one">去看第一个a>
<a href="#two">去看第二个a>
<a href="#three">去看第三个a>
<a href="#four">去看第四个a>
<a href="#five">去看第五个a>
<a href="#six">去看第六个a>
<div id="one">第一个div><br>
<div id="two">第二个div><br>
<div id="three">第三个div><br>
<div id="four">第四个div><br>
<div id="five">第五个div><br>
<div id="six">第六个div><br>
body>
html>
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪元素选择器title>
<style>
p{
font-size: 10px;
}
/* 选中元素的第一个文字 */
p::first-letter{
font-size: 30px;
}
/* 选中元素的第一行文字 */
p::first-line{
background-color: yellow;
}
/* 选中被鼠标选中的内容 */
p::selection{
background-color: greenyellow;
}
/* 在元素最开始的地方创建一个子元素 */
div::before{
content: 'abc';
color: red;
}
p::before{
content: '『';
}
/* 在元素最后的地方创建一个子元素 */
div::after{
content: 'haha';
color: blue;
}
p::after{
content: '』';
}
style>
head>
<body>
<div>Hello Hello How are youdiv>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>
Atque velit modi veniam nisi veritatis tempore laborum nemo ipsa itaque optio. Id odit consequatur mollitia excepturi, minus saepe nostrum vel porro.
p>
body>
html>
通过不同的选择器,选中相同的元素,并且为相同的样式名设置不同的值时,就发生了样式的冲突。到底应用哪个样式,此时就需要看优先级了。