css基础:简单的选择器、伪类选择器与前端组件样式模块化知识
16lz
2021-03-23
选择器id、class、tag
class>tag" class="reference-link">优先级id>class>tag
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* id选择器,优先级大于class与tag,h1为红色*/
h1#p11.p1{color: red}
h1.p1{color: blue}
h1{color: green}
/* class选择器,优先级大于tag,h2为蓝色*/
h2.p2{color: blue}
h2{color: green}
/* h3为绿色*/
h2{color: green}
</style>
</head>
<body>
<h1 class="p1" id="p11">77777</h1>
<h2 class="p2" id="p22">77777</h2>
<h2 class="p3" id="p33">77777</h2>
</body>
</html>
效果如图
简单的前端组件样式模块化
dome.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--引入文件index.css-->
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<header>首</header>
<main>身</main>
<footer>尾</footer>
</body>
</html>
index.css
@import url(header.css);
@import url(main.css);
@import url(footer.css);
header.css
header{min-height: 3em;background-color: red;}
main.css
nain{min-height: 5em;background-color: blue;}
footer.css
footer{min-height: 4em;background-color: green;}
伪类选择器的使用
deom.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<ul class="list">
<li>7777</li>
<li>7777</li>
<li>7777</li>
<li>7777</li>
<li>7777</li>
<li>7777</li>
</ul>
<ul>
<li>888</li>
</ul>
</body>
</html>
css.css
/*第一个li*/
.list > li:first-of-type {
background-color: red;
}
/*第二个li*/
.list > li:nth-of-type(2) {
background-color: yellow;
}
/*最后一个li*/
.list>li:last-of-type{
background-color: blue;
}
/*倒数第三个li*/
.list>li:nth-last-of-type(3){
background-color: green;
}
li:only-of-type{
background-color: skyblue;
}
效果如图
更多相关文章
- 选择器优先级/前端组件样式模块化原理与实现/常用伪类选择器的使
- 0322作业
- css基础、选择器、模块化组件
- 【CSS入门】CSS基本语法和选择器优先级学习总结简介
- 伪类选择器,优先级,模块化
- CSS选择器优先级、模块化与伪类选择器的原理及应用
- 选择器的优先级,id,class,tag
- CSS选择器优先级+模块化+伪类选择器
- python基本语法三