<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 相邻兄弟选择器:紧挨着后面的兄弟 */
/* .box2+.box3 {
color: red;
} */
/* 匹配选择器:后面所有的兄弟 */
.box2~div {
color: blue;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
属性名
[class] {
color: red;
padding: 20px;
margin: 10px;
}
属性名等于属性值
[type="text"] {
margin: 20px;
}
匹配属性值以指定值开头的每个元素
[class^=box1] {
color: blue;
}
匹配属性值以指定值结尾的每个元素。
[class$=box3] {
color: yellow;
}
匹配属性值中包含指定值的每个元素
[class*=box2] {
color: purple;
}
用于选取属性值中（包含）指定词汇的元素，还可以空格为分隔符。
[class~=box2] {
color: orange;
}
用于选取带有以指定值（开头）的属性值的元素，还可以连字符为分隔符。
[class|=box1] {
color: orangered;
}
</style>
</head>
<body>
<!-- <div class="box">div元素</div>
<input type="text" name="username">
<input type="text" name="secname">
<input type="password" name="pwd"> -->
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box1box2box3">box1box2box3</div>
<div class="box1 box2 box3">box1 box2 box3</div>
<div class="box1-box2-box3">box1-box2-box3</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
选择器和first-child选择的是同一个元素
选择器:first-child
:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
p:first-child {
color: red;
}
:last-child 匹配的是某父元素的最后一个子元素，可以说是结构上的最后一个子元素。
p:last-child {
color: blue;
}
匹配的是某父元素下相同类型子元素中的第一个，
p:first-of-type {
color: aqua;
}
匹配某个父元素中最后一个某一类型的元素
p:last-of-type {
color: aqua;
}
</style>
</head>
<body>
<div class="main">
<div class="other">div元素</div>
<p class="con1">con1</p>
<p class="con2">con2</p>
<p class="con3">con3</p>
<p class="con4">con4</p>
<p class="con5">con5</p>
<span>span元素</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
1.nth-child(n):n从1开始.2.3....
p:nth-child(3) {
color: red;
}
偶数
p:nth-child(even) {
color: red;
}
odd:奇数
p:nth-child(odd) {
color: blue;
}
公式中的n从0开始
p:nth-child(2n) {
color: red;
}
p:nth-child(2n+1) {
color: blue;
}
p:nth-of-type(2n) {
color: red
}
（从后往前数)
:nth-last-child(n)
:nth-last-of-type(n)
</style>
</head>
<body>
<div class="main">
<div>你好</div>
<p class="con1">con1</p>
<p class="con2">con2</p>
<p class="con3">con3</p>
<p class="con4">con4</p>
<p class="con5">con5</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* html元素 :根元素*/
:root {
border: 1px solid red;
}
/* 文本为空的元素 */
:empty {
width: 100px;
height: 100px;
background-color: blue;
}
/* 排除选择器 */
:not(selector)排除selector选择器选中的元素，不对它们应用样式解析
li:not(.active) {
color: brown;
font-weight: 700;
}
</style>
</head>
<body>
<div class="box">box</div>
<div></div>
<div></div>
<span></span>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
height: 800px;
border: 1px solid #ccc;
}
/* 在用户单击了页面中的链接，并且跳转到target元素后生效。 */
:target {
color: red;
font-weight: 700;
}
</style>
</head>
<body>
<nav>
<a href="#home">首页</a>
<a href="#aboutus">关于我们</a>
<a href="#contactus">联系我们</a>
<a href="#joinus">加入我们</a>
</nav>
<p id="home">
首页内容
</p>
<p id="aboutus">
关于我们内容
</p>
<p id="contactus">
联系我们内容
</p>
<p id="joinus">
加入我们内容
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选中的文字的效果 */
::selection {
color: green;
background-color: red;
}
</style>
</head>
<body>
<p>
江西的周劼火了，火得发烫、“红”得发紫!据报道，近日，周劼的涉及“炫富”“秀后台”的朋友圈截图，在网上引起广泛热议，其所在国企江西国控也进行了积极回应，纪检监察组已介入调查。
</p>
<p>
总结周劼朋友圈截图内容归纳有三点，一是炫父，周劼宣称，“父亲的副局长没问题了”“省厅人事处的人刚打了电话给我爸”；二是炫富，喝的白毫银针20万一斤，戴欧米茄手表、系LV皮带；三是炫背景，多次发表“和单位的一把手吃饭”“我办公室主任怕我吹空调冷，帮我加挡风板”等言论。
</p>
<p>
江西省国有资本运营控股集团有限公司回应称：“周劼于2020年3月入职我司，现为我司股权管理部普通员工。”这周劼确有此人，并非虚构；通报还称：“网上转载内容为周劼于2019年9月至2020年6月在其本人微信朋友圈上发布，后被他人截图转发。”这说明网传内容出处是可靠的，就是来自周劼的朋友圈。
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 禁用 */
:disabled {
width: 300px;
}
:enabled {
width: 400px;
}
/* !important > 行内样式>ID选择器 > 类选择器|伪类|属性选择器 > 标签> 通配符 > 继承 > 浏览器默认属性 */
:checked {
width: 50px;
background-color:red;
}
</style>
</head>
<body>
<form action="">
<p>
用户名:
<input type="text" name="username" disabled>
</p>
<p>
昵称:
<input type="text" name="secname">
</p>
<!-- checked -->
<p>
男:<input type="radio" name="sex" id="" value="1" checked> 女:
<input type="radio" name="sex" id="" value="2">
</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span:before {
/* 必须 */
content: '二舅';
}
span:after {
content: '刷屏';
display: block;
color: red;
}
</style>
</head>
<body>
<span>治好了我的精神内耗</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul class="list">
<li>li元素1</li>
<li>li元素2</li>
<li>li元素3</li>
<li>li元素4</li>
<li>li元素5</li>
</ul>
<ul class="other_list">
<li>其他元素</li>
<li>其他元素</li>
<li>其他元素</li>
</ul>
<script>
// 根据css的选择器,来找到元素
var list = document.querySelector('.list');
console.log(list);
// 伪数组:querySelectorAll找到多个符合条件的元素
var lis = document.querySelectorAll('.list li');
console.log(lis);
console.log(lis[0]);
// querySelector:只能找页面符合条件的第一个元素
var uls = document.querySelector('ul');
console.log(uls);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 800px;
height: 600px;
border: 1px solid red;
/* 多重背景 */
/* 先写在最上 */
background: url(images/im.jpg) no-repeat, url(images/timg.jpg) no-repeat, url(images/xiaozhan.png) no-repeat right bottom;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid red;
margin-bottom: 10px;
}
/* 默认:不写,to bottom ,180deg都是向下渐变 */
.box1 {
background-image: linear-gradient(red, blue, yellow);
}
.box2 {
background-image: linear-gradient(to bottom, red, blue, yellow);
}
.box3 {
background-image: linear-gradient(180deg, red, blue, yellow);
}
.box4 {
background-image: linear-gradient(45deg, red, blue, yellow);
}
.box5 {
background-image: linear-gradient(to right bottom, red, blue, yellow);
}
.box6 {
background-image: linear-gradient(-180deg, red, blue, yellow);
}
.box7 {
background-image: linear-gradient(0deg, red, blue, yellow);
}
.box8 {
background-image: linear-gradient(0deg, red, blue, yellow);
}
.box9 {
background-image: linear-gradient(to right, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
<div class="box6">box6</div>
<div class="box7">box7</div>
<div class="box8">box8</div>
<div class="box9">box9</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 径向渐变 */
div {
width: 200px;
height: 100px;
border: 1px solid red;
margin-bottom: 10px;
}
.box1 {
background-image: radial-gradient(red, blue, yellow);
}
.box2 {
background-image: radial-gradient(circle, red, blue, yellow);
}
.box3 {
background-image: radial-gradient(ellipse, red, blue, yellow);
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 600px;
height: 400px;
border: 1px solid red;
background: url(images/zhan.png) no-repeat;
/* 根据像素来调整 */
/* background-size: 600px 400px; */
/* 自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。cover用的多 */
/* background-size: cover; */
/* contain会自动调整缩放比例，保证图片始终完整显示在背景区域,有可能有留白 */
background-size: contain;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 602px;
height: 497px;
border: 20px dotted #ccc;
background: url(images/timg.jpg) no-repeat;
/* 默认从padding区域开始渲染 */
padding: 20px;
/* 从边框区域开始渲染背景 */
background-origin: border-box;
/* 从内容开始渲染背景 */
background-origin: content-box;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 200px;
background-color: green;
opacity: 1;
}
</style>
</head>
<body>
<div class="box">box</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
filter: grayscale(100%);
}
.box {
width: 285px;
height: 338px;
background: url(images/xiaozhan.png) no-repeat;
/* 将图像转为灰度图像 */
/* filter: grayscale(100%); */
}
p {
color: blue;
}
</style>
</head>
<body>
<div class="box">
</div>
<p>文段--二舅治好了我的精神内耗</p>
<p>北京人搓澡搓的好</p>
<p>平凡而伟大</p>
<p>第一快乐:不用为别人负责的人,第二快乐,从不向后看人</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
border-radius: 50%;
background-image: linear-gradient(to right, #ff9900, #df4a06);
/* 模糊状态 */
filter: blur(5px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: hsla(120, 50%, 50%, 1);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 216px;
height: 204px;
border: 1px solid red;
}
.son {
/* 进行计算,然后将返回计算的结果 */
width: calc(100% - 40px);
height: 204px;
background-color: skyblue;
margin: 0 20px;
}
.main div {
width: calc(100% / 4 - 2px);
height: 200px;
border: 1px solid red;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
<div class="main">
<div class="con1">con1</div>
<div class="con2">con2</div>
<div class="con3">con3</div>
<div class="con4">con4</div>
</div>
</body>
</html>
扫一扫
2431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
