慕课前端入门-CSS选择器
1.CSS选择器
通配符选择器:*{margin: 0}
元素选择器:body{}
类选择器:.red{}
ID选择器:#green{}
后代选择器:ul li{}
| 选择器 | 示例 | |
|---|---|---|
| 基本选择器 | 子元素选择器：父元素>子元素 只能选择父元素的子元素 | section>div{color: red;} |
| 相邻兄弟选择器：父元素+兄弟相邻元素 可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素。 | section > div + article{color: red;} | |
| 通用兄弟选择器：父元素 ~ 后面所有兄弟相邻元素 选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素。 | section > div ~ article{color: red;} | |
| 群组选择器：元素1,元素2... 将具有相同样式的元素分组在一起，每个选择器之间使用,隔开 | article,div,aside{color:green;} | |
| 属性选择器 | element[属性] 选择所有带有attribute属性的元素 | a[href]{color:green;} |
| element[属性='vlue']选择所有使用attribute=value的元素 | a[href="hello"]{color:green;} | |
| element[属性 ~= 'value'] 选择属性包含value的元素 | a[class ~= 'two']{color: red;} | |
| element[属性 ^= 'value'] 选择属性值以value开头的所有元素 | a[href ^= '#']{color: red;} | |
| element[属性 $= 'value'] 选择属性值以value结尾的所有元素 | a[href $= '#']{color: red;} | |
| element[属性 *= 'value'] 选择属性值包含value的所有元素 | a[href *= '#']{color: #abcdef;} | |
| element[属性 |= 'value'] 选择属性值为value或以value-开头的的所有元素 | a[href |= '#']{color: #abcdef;} | |
| 伪类选择器 | 动态伪类(锚点伪类、用户行为伪类) 这些伪类并不存在与html中，只有当用户和网站交互的时候才能体现出来 锚点伪类(:link :visited) 用户行为伪类(:hover :active :focus) | a:link{color:red;}//初始颜色 a:visited{color:green;}//访问后颜色 a:hover{color:orange;}//停留时颜色 a:active{color:blue;}//点击时颜色 input:focus{background:#abcdef;} |
| UI元素状态伪类 :enable可输入 :disable不可输入 :checked被选中 | input:disabled{background-color: red;} | |
| CSS3结构类:nth :first-child 选择属于其父元素的首个子元素的每个Element元素 :last-child 指定属于其父元素的最后一个子元素的element元素 :nth-child(n) 匹配属于其父元素的第N个子元素(也可用表达式)，不论元素的类型 :nth-last-child() 匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数 :nth-of-type() 匹配属于父元素的特定类型的第N个子元素的每个元素 :nth-last-of-type() 匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数 :first-of-type 匹配属于其父元素的特定类型的首个子元素的每个元素 :last-of-type 匹配属于其父元素的特定类型的最后一个子元素的每个元素 :only-child 匹配属于其父元素的唯一子元素的每个元素 :only-of-type 匹配属于其父元素的特定类型的唯一子元素的每个元素 :empty 匹配没有子元素(包括文本节点)的每个元素 | section>div:first-child{color: #f00;} section>div:last-child{color: #f00;} ul>li:nth-child(even){background: yellow;}或使用2n偶数 ul>li:nth-child(odd){background: yellow;}或2n+1奇数 ul>li:nth-last-child(3){background: red;} div:nth-of-type(2){background: red;}该元素是div，且在父元素中排第2 div:nth-last-of-type(1){background: red;}该元素是div，且在父元素中排倒数第一 div:first-of-type{background: red;} div:last-of-type{background: red;} div:only-child{background: red;}子元素唯一 div:only-of-type{background: red;}指定的元素唯一 div:empty{background:red;} | |
| 否定选择器:not(selector) 匹配非指定元素/选择器的每个元素 | nav > a:not(:last-of-type){border-right:1px solid red;} | |
| 伪元素 格式：元素::伪元素 用于向某些选择器设置特殊效果 ::first-line对元素的第一行文本进行格式化，只能用于块级元素。 ::first-letter对文本的首字母设置样式，只能用于块级元素。 ::before 在元素的内容前面插入新内容，常用content配合使用。 ::after 在元素的内容后面插入新内容，常用content配合使用，多用于清除浮动 ::selection用于设置在浏览器中选中文本后的背景色与前景色 | p::first-line{color:red;} p::first-letter{color:red;} p::before{content:'我在内容的前面';color:red;}特点：1.第一个子元素2.行级元素3.内容通过content写入4.标签中找不到对应的标签 p::selection{background: red;color:#ff0;} |
1.2 权重
当很多的规则被应用到某一个元素上时，权重是一个决定那种规则生效，或是优先级的过程。
权重等级与权值：行内样式(1000)>ID选择器(100)>类、属性选择器和伪类选择器(10)>元素和伪元素(1)>*(0)
权重计算口诀：从0开始，一个行内样式+1000，一个ID+100，一个属性选择器、class或者伪类+10，一个元素名或伪元素+1
CSS权重规则：
包含更高权重选择器的一条规则拥有更高的权重，如ID选择器(#idValue)的权重比属性选择器[id="idValue"]高
带有上下文关系的选择器比单纯的元素选择器权重要高。如section>articile比article高
与元素挨得近的规则生效
最后定义的规则会覆盖上面与之冲突的规则
无论多少个元素组成的选择器，都没有一个class选择器权重高，如div.hello比div高
通配符选择器权重是0，被继承的css属性也带有权重，权重也是0
1.3 示例：使用::after清除浮动
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
header{background: #abcdef;border: 5px solid green;}
header::after{content:"";display: block;clear: both;}
header>article{float:left;width:40%;height:30px;background:#f00;}
header>aside{float: right;width: 40%;height: 50px;background: #ff0;}
</style>
</head>
<body>
<header>
<article></article>
<aside></aside>
</header>
</body>
</html>
2.CSS边框和圆角
2.1CSS圆角
border-radius：复合属性 单位有px,em,rem,vw,百分比，不能只写数字
border-top-left-radius：左上角的弧度
border-top-right-radius右上角的弧度
border-bottom-right-radius右下角的弧度
border-bottom-left-radius左下角的弧度
border-radius:50px 设置全部
border-radius:50px(左上,右下) 25px(右上,左下)
border-radius:50px(左上) 25px(右上,左下) 20px(右下)
border-radius:50px(左上) 25px(右上) 20px(右下) 25px(左下)
border-radius:50%长款不等得椭圆，长款相等得正圆
圆角示例
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
position: relative;
width: 500px;
height: 300px;
border: 1px solid black;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius: 50%;
line-height: 300px;
text-align: center;
font-size:24px;
font-weight: bold;
}
div::after,div::before{
position: absolute;
content:"";
display: block;
border: 1px solid black;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius: 50%;
}
div:before{
width: 50px;
height: 50px;
bottom: -25px;
right:25px;
}
div:after{
width: 20px;
height: 20px;
bottom: -75px;
right:0px;
}
</style>
</head>
<body>
<div>大家好，欢迎来到慕课网！</div>
</body>
</html>
2.2CSS阴影
box-shadow：可以设置一个或多个下拉阴影的框
语法：box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow:水平方向偏移量。正值，右；负值，左。
v-shadow:垂直方向偏移量。正值：下；负值：上。
blur:模糊多少。不能有负值
spread:扩展多少。负值，会在h-shadow和v-shadow的基础上减去
color:阴影颜色
inset:内阴影。不写默认外阴影
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div.wrapper{
width: 800px;
height:500px;
margin: 0 auto;
background: green;
position: relative;
}
div.inner{
position: absolute;
width: 500px;
height: 300px;
background: red;
margin: auto auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
box-shadow: 50px 30px 0 -10px yellow inset;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner">大家好，欢迎来到慕课网！</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒阴影</title>
<style type="text/css">
div{
width: 300px;
height: 200px;
background-color: #f0f;
margin:0 auto;
}
/*此处写代码*/
div:hover{
box-shadow: 10px 10px 0 0 #bbb;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.3CSS边界
border-image也是复合属性：共有5个值。
source:指定要使用的图像，而不是有border-style属性设置的边框样式
slice：指定图像的边界向内偏移 number/百分比/fill默认
width：图像边界的宽度 number/百分比/auto
outset:指定在边框外部绘制border-image-area的量。length/number
repeat:stretch拉伸、repeat重复、round铺满、initial默认值、inherit继承
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒阴影</title>
<style type="text/css">
div{
margin-top: 100px;
width: 853ps;
height: 392px;
border: 50px solid;
border-image-source: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598622136420&di=9bfdca4a279d53f9a14d352e9e595778&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F18%2F03%2F29%2Fd8c03a32882567cc19ebf381abc5d5de.jpg");
border-image-slice: 50%;
border-image-width: 50%;
border-image-outset: 2;
border-image-repeat: repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
