CSS选择器进阶

选择器进阶

后代选择器 子代选择器 并集选择器 交集选择器 伪类选择器

后代选择器

选择器1 选择器2{
    属性:属性值;
    ...
}
后代选择器可以选中子孙后代
选择器与选择器之间用空格隔开
示例:
.box a{color:red;}

子代选择器

选择器1> 选择器2{
    属性:属性值;
    ...
}
子代选择器只能选中亲儿子
选择器与选择器之间用大于号隔开
示例:
.box>strong{color:pink;}

并集选择器

选择器1, 选择器2{
    属性:属性值;
    ...
}
选择器与选择器之间用逗号隔开;
并集选择器每组选择器之间一行写;
最后一个选择器的后面不要加逗号;
并集选择器可以是任意基础选择器和复合选择器的结合
后续把相同的样式进行书写在一起,减少代码的耦合性.
示例
div,
p,
span,
.box p{color:pink;}

交集选择器

选择器1选择器2{
    属性:属性值;
    ...
}
交集选择器可以理解为既又的原则
选择器与选择器之间不需要任何符号,紧挨着一起.
交集选择器如果有标签,必须把标签写在最前面
示例
div.box{
    color:green;
}

伪类选择器

选择器:hover{
    属性:属性值;
    ...
}
鼠标经过时候的样式
a:hover{}
div:hover{}
.box:hover{}
:的前面和后面不能有空格

背景属性

背景颜色 背景图片 背景是否平铺 背景位置
背景颜色 
background-color: pink;
背景图片
background-image: url(./img/icon.png);
背景是否平铺
background-repeat: repeat|no-repeat|repeat-x|repeat-y;
背景位置
background-position: x y;
	背景位置取值:
		方位名词:
			水平位置:left|center|right
			垂直位置:top|center|bottom
		background-position:center center；
		数字+px:
			background-position:10px 20px；
		方位名词+数字(px):
		background-position:left 30px；

示例:

<h3 class="title">成长守护平台</h3>

.title {
            width: 118px;
            height: 41px;
            /* 背景颜色 */
            /* background-color: pink; */
            /* 背景图片 */
            /* background-image: url(./img/icon.png); */
            /* 背景是否平铺 */
            /* background-repeat: no-repeat; */
            /* 背景位置 */
            /* background-position: left center; */
            /* 背景简写 */
            background: pink url(./img/icon.png) no-repeat left center;
            text-indent: 1.5em;
            font-size: 14px;
            font-weight: 400;
            /* 单行文本垂直居中 */
            line-height: 41px;
            /* 盒子水平居中 */
            margin: auto;
        }

元素显示模式

根据标签不同的特点，我们可以把标签分成不同的种类。主要分为： 块级元素、行内元素、行内块元素

块级元素

块元素特点:
1 独占一行 
2 宽度默认是父元素的宽度,高度由内容撑开.
3 可以设置宽高
代表性的标签 div h系列 p li 

行内元素

行内元素特点
 1 一行可以显示多个,如果一行装不下自动折行(换行显示)
 2 宽度和高度默认由内容撑开
 3 设置宽高无效
 代表性的标签 a span em strong

行内块元素

行内块元素特点
 1 一行显示多个
 2 可以设置宽高
  代表性标签 input button

元素显示模式转换

转换为块级元素
display: block;
转换为行内块元素
display: inline-block;
转换为行内元素
display: inline