本文详细介绍了CSS中的选择器，包括核心选择器、层次选择器、属性选择器、伪类选择器和伪元素选择器。此外，还讨论了取值规则，如颜色、长度和关键字，并详细阐述了文本样式、字体样式、列表样式和盒子模型等样式设置。最后，总结了CSS的优先级规则。
1.选择器
1.核心选择器
-
标签选择器
h2 { } div {规则 } -
id选择器
#two {} <div id="one"></div> <div id="two"></div> -
类选择器
.second{} <div class="second"></div> <div class="second"></div> -
逗号选择器
h1,h2,h3 {} -
组合选择器
div#two {} 选择id为div的元素 div,#two {} 选择div元素和id为two的元素 -
普遍选择器
*{}
2. 层次选择器
-
子元素选择器
.header > a 选中class为header的元素的直接孩子元素a标签 <div class="header"> <a href=""></a> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> <div class="content"> <a href=""></a> <a href=""></a> </div> -
后代元素选择器
.header a 选中class为header的元素的后代元素a标签 -
下一个兄弟
语法： ul>li.two + li或.two + *（用“+”加号连接）<ul> <li>zero</li> <li>one</li> <li class="two">two</li> <li>three</li> <li>four</li> <li>five</li> </ul> -
之后所有兄弟
语法：ul>li.two ~ li或.two ~ *（用“~”波浪线连接）
3. 属性选择器【过滤器】
在已有选择器的基础上进行筛选
selector[]input[type]对包含type属性的元素进行样式的添加input[type=text]对type属性值为text的元素进行样式的添加input[type^=s]选择type属性值以"s"开头的所有元素input[type$=t]选择type属性值以"t"开头的所有元素input[type*=t]选择type属性值以包含子串"t"的所有元素
4. 伪类选择器
表示结构的
:first-child：第一个子元素
:last-child：最后一个子元素
:only-child: 匹配属于父元素中唯一子元素的 p 元素
:nth-child(n): 同级别中第一个子元素
:nth-child(odd): 同级别中所有的奇数标签
:nth-child(even): 同级别中所有的偶数标签
:first-of-type：同级别中同类型的第一个标签
:last-of-type：同级别中同类型的最后一个标签
:nth-of-type(n)：同级别中同类型的第n个标签
表示状态的
:link正常状态:hover鼠标移入时:active激活时的状态:visited访问过后的状态:focus获取文本框焦点
5. 伪元素选择器
selector::after
将一个伪元素添加到selector选择到的元素里面的最后面
ul.nav::after {
content:"four";
display:block;
...
}
<ul class="nav">
<li>one</li>
<li>two</li>
<li>three</li>
::after
</ul>
selector::before（同after）
::first-letter（选中第一个字符）
::first-line（选中一行）
::selection（选中被选择的）
2.取值规则
1.关键字
- 位置
left right center top bottom medium - 取消
none - 。。。
2.颜色
- 十六进制
#ffffff #ededed - rgb函数
rgb(0,0,0) - 关键字
- 渐变色
linear-gradient
3.长度
- 绝对单位
px - 相对单位
em、rem、%百分比
em：当前元素上的字体大小
font-size:12px
1em = 12px
2em = 24px
rem： 当前html元素中设定的字体大小
html {
font-size:10px;
}
ul {
font-size:20px;
}
li {
height:2rem; //20px
}
% 百分比border-radius:50%
3.样式
1.文本样式（可以被继承）
1. text-align （文本在容器中的排列方式）
可取值：靠左left、靠右right、居中center
2. text-indent（文本在容器中的缩进）
默认缩进：2em
3. text-decoration
text-decoration-line（文本装饰线的位置）
可取值：无none、文本下的一条线underline、文本上的一条线overline、穿过文本下的一条线line-through、闪烁的文本blink
text-decoration-style（文本装饰线的类型）
可取值：单实线solid、双实线double、点状线 dotted、虚线dashed、波浪线wavy
text-decoration-color（文本装饰线的颜色）
4.text-shadow （文本的阴影）
格式：left top c color;
2.字体样式（可以被继承）
-
color（颜色）
-
font-family （族）
‘微软雅黑’ ,‘Microsoft YaHei’,‘宋体’（字体栈）font-family:"微软雅黑","Microsoft YaHei",serif; -
font-size （大小）
网页默认字体为16px
常用字体大小：12px 10px -
font-weight （粗细）
可取值：bold、thin、bolder、100~900 -
font-style （是否打开斜体）
-
line-height （行高）
7. font的速写，简写
font: font-style font-weight font-size/line-height font-family
font:normal bold 14px/1.5em "微软雅黑","Microsoft YaHei"
- 网络字体
奇葩字体，（字 -> icon） - 图标
1.将图标从设计图中切割下来，当做图片使用(小程序)
缺点：放大与缩小比较麻烦，失真；无法更换颜色
2.字体图标库（网页） - 字体图标库（第三方库）
iconfont / fontawesome(拓展)
使用方法：
1) 在iconfont官网中选择要使用的图标，放入到购物车中
2) 下载源码到本地
3) 本地引用iconfont.css文件
4) 应用样式即可
<i class="iconfont icon-xxx"></i>
@font-face {
font-family: "iconfont";
src: url('iconfont.eot?t=1564624596715'); /* IE9 */
src: url('iconfont.eot?t=1564624596715#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,=') format('woff2'),
url('iconfont.woff?t=1564624596715') format('woff'),
url('iconfont.ttf?t=1564624596715') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1564624596715#iconfont') format('svg'); /* iOS 4.1- */
}
.lishiziti {
font-family:'iconfont'
}
.weixin:before {
content:'\e123'
}
3. 列表样式
- list-style:
none - list-style-type：
circle/quare/... - list-style-image：
url() - list-style-position：
inside/outside
4.盒子样式
盒子模型
W3C盒子：内容盒子（width = 内容宽）【传统盒子】
是绝大多数浏览器的默认盒子模型
width : 100px ---->表示内容区域的宽为100px
width=content(内容区域)
IE盒子：边框盒子（width = 边框以内所有元素宽）【怪异盒子】
width : 100px; ---->表示边框以内所有的宽的综合
width = border + padding + content(内容区域)
W3C盒子和IE盒子的对比图
 | |
|---|---|
1. width
2. height
3. background
background-origin（规定 background-position 属性相对于什么位置来定位）
可取值：
背景图像相对于边框盒来定位border-box、
背景图像相对于内边距框来定位padding-box、
背景图像相对于内容框来定位content-box
background-clip（规定背景的绘制区域/对已经铺好的背景裁切）
可取值：
背景被裁剪到边框盒border-box、
背景被裁剪到内边距框padding-box、
背景被裁剪到内容框content-box
background-image（为元素设置背景图像）
可取值：指向图像的路径url
background-color（设置元素的背景颜色）
background-position（设置背景图像的起始位置）
W3cshool中对于background-position的解释
可取值：居中center
background-repeat（设置是否及如何重复背景图像）
可取值：
默认。背景图像将在垂直方向和水平方向重复：repeat
背景图像将在水平方向重复：repeat-x
背景图像将在垂直方向重复：repeat-y
背景图像将仅显示一次：no-repeat
使用空白分隔开图片，尽可能使背景图片占满整个屏幕而不使用切割（clipping）：space
将图片压缩或者是扩展以适应整个背景范围，不使用切割：round
background速写：
background:url('') no-repeat center;
background:center/cover padding-box url('./image/lianjia_08.png') no-repeat ;
4. margin
注意：盒子上下外边距不会合并，比如，第一个元素margin-bottom:20px;第二个元素margin-top:10px;他们的外边距为20px
上右下左：margin-top、margin-right、margin-bottom、margin-left
几种赋值方式：
margin:10px; 上右下左都为10px
margin:0 10px;上下为0,左右为10px
margin:0 5px 10px;上0,下10px,左右5px
margin:5px 10px 15px 20px;上5px,右10px,下15px,左20px
5. padding
上右下左：padding-top、padding-right、padding-bottom、padding-left
几种赋值方式：
padding:10px;上右下左都为10px
padding:0 10px;上下为0,左右为10px
padding:0 5px 10px;上0,下10px,左右5px
padding:5px 10px 15px 20px;上5px,右10px,下15px,左20px
6. border
border-width
上右下左：border-top-width、border-right-width、border-bottom-width、border-left-width
border-style
上右下左：border-top-style、border-right-style、border-bottom-style、border-left-style
W3cshool中对于border-style的解释
可取值：
border-color
上右下左：border-top-color、border-right-color、border-bottom-color、border-left-color
border的速写：border:1px solid #ededed;
7. border-radius
8. box-shadow
box-shadow:5px 5px 10px #ccc; //外部阴影
box-shadow:inset 0px 0 3px lightblue //内部发光
5.布局
浮动布局
float
clear
定位布局
position （规定元素的定位类型）
可取值：
生成绝对定位的元素：absolute
生成相对定位的元素：relative
top
left
伸缩盒
3.优先级
- !important
- 若选择器权重相同，则就近
- 行内：1000
id选择器: 100
类选择器，属性选择器，伪类选择器：10
标签选择器，伪元素选择器：1
扫一扫
423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
