【CSS学习笔记2】-css复合选择器-EW帮帮网

1.emmet语法

1.1快速生成html标签

提高html编写的速度

标签+tab：完整

标签*nu：生成多个

标签1>标签2：包含

标签1+标签2：并列

标签.类名：直接为标签加上类（默认div 可以直接写".类名"

标签#类名：直接为标签加上id

标签.类名$*数量：一次性生成多个排好序的标签 $自增

  	<div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>

标签{文本} ：div{中文}

<div>中文</div>
    <div>语文</div>
    <div>语文</div>
    <div>语文</div>
    <div>语文</div>
    <div>语文</div>

div{$}*5

<div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

1.2快速生成css样式

样式缩写：每个字母的首字母

tac: text-align：center

ti：text-indent

w100：width：100px

2CSS复合选择器

简单选择器组合而成

复合选择器、子选择器、并集选择器、伪类选择器

2.2后代选择器（重要）

包含选择器可以选择父元素中的子元素

元素1必须包含元素2

元素1 元素2 元素3...{ 样式 }

ol li {
            color: red;
        }
ol li a {
    color: pink;
}

如果想对同标签的某一个标签中的标签修改样式，可以给这个标签单独加上类用类来修改样式

<ul class="one">
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li><a href="#">ul链接</a></li>
        <li><a href="#">ul链接</a></li>
        <li><a href="#">ul链接</a></li>
        <li><a href="#">ul链接</a></li>
    </ul>

单独对这个列表中的a进行修改

.one li a {
            color: green; 
        }

2.3子选择器（重要）

只能选择某元素的最近一级的子元素，只能选亲儿子

元素1>元素2 { }

对于

<div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>

如果是后代选择器，则两个a可以修改样式

.nav a {
            color: blue;
        }

如果是子选择器，则只能选择儿子用>号隔开

.nav>a {
            color: orange;
        }

2.4并集选择器（重要）

可以选择多组标签，定义为相同的样式，用于集体声明，任何选择器都可以作为并集选择器的一部分

元素1，元素2 { 样式} 竖着写

对于

<div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>乔治</li>
        <li>小猪妈妈/li>
    </ul>

把熊大熊二改为粉色

div,
p { 
            color: pink;
        }

把熊大熊二改为粉色小猪一家改为绿色

div,
       p,
       .pig li { 
            color: pink;
        }

2.5伪类选择器

语法

selector:pseudo-class {
  property: value;
}

用于向某些选择器添加特殊的效果，比如给链接添加特殊效果。（例如经过链接的时候颜色变化

伪链接选择器（锚伪类
）

a:link /*选择未被访问的链接
a:vitisted 访问过的
a:hover 鼠标经过
a:active/*选择活动链接，鼠标按下未松开

这几个伪类选择器不能交换顺序LVHA

开发中链接会单独指定样式

一般开发中只会用到hover

a {
    color:gray;
}
a:hover {
  color:red;
}

2.6:focus 伪类选择器

用于选取获得焦点的表单元素 ,也就是鼠标点击之后的样式

焦点就是光标，一版input类表单元素才能获取

总结

3.CSS元素显示模式

更好的布局页面

html元素：块元素、行内元素

3.1html块元素

特点是图占一行、高度宽度边距都可以控制、宽度默认是容器的100%、是一个容器及盒子可以放行内元素或者块级元素

文字元素内不能放块元素（盒子）

3.2行内元素

<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>

相邻元素在一行一行可以显示多个、高宽设置无效、默认u暗渡是他本身的宽度、行内元素只能容纳文本或其他行内元素

链接之内不能放链接 a中可以放块元素

3.3行内块元素

同时具有块元素和行内元素的特点

一行可以有多个、默认宽度、高度宽度边距都可以控制

3.4ccs元素显示模式转换

转化为块元素 display：block；

转化为行内元素 display:inline;

转化为行内块元素 display: line-block

这里是把链接a转化为了块元素

<style>
        a {
            /* 转化为块元素 */
            display: block;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>

div {
            /* 转化为行内元素 */
            display: inline;
            background-color: lightblue;
            /* 这里长宽失效 */
            width: 100px;
            height: 100px;
        }

4css背景

4.1背景图片

实际开发中logo 或者装饰性的小图片、超大背景图片等优点是非常便于控制位置

width: 500px;

height: 300px;

/* 背景图片默认情况下背景平铺 */

background-image: url(image.png);

/* 背景不平铺 */

background-repeat: no-repeat;

/* 沿x轴平铺 */

background-repeat: repeat-x;

/* 沿y轴平铺 */

background-repeat: repeat-y;

/* 可以设置颜色但是图片会盖住颜色 */

background-color: aqua;

/* 背景图片的位置如果只确定了一个参数那么另一个方向则默认是居中的*/

background-position: center right;

4.2背景位置

方位名词前后顺序随意

精确单位第一个是x坐标、第二个是y坐标（距离左边、顶部的距离，另：如果只指定一个值则是x值 y值默认居中

也可以混合使用

background-position: center top;

background-position: center 20px; x轴居中、y轴距离顶部 20像素

4.3背景图像固定

background-attachment: fixed;

4.4背景复合写法

background: 颜色、地址、平铺、图像滚动、位置

background: black url(bg-63580614.jpg) no-repeat fixed top;

4.5背景色半透明

background:rgba(0,0,0,0.3);最后一项是透明度

【CSS学习笔记2】-css复合选择器