第六章：选择器高级和伪类

一.选择器

    1.E,F 多元素选择器

div,p,span,a{color:red;}
E > F 子元素选择器
顾名思义就是只选择器他的子元素！只认儿子，这种选择器一般是不想影响后面的元素而使用的比较多！
E + F 毗邻元素选择器
选择后面的一个兄弟元素
div + p{background:red;}
div p + p{background:blue;}

    2.属性选择器

用元素属性来选择元素
[class]
匹配所有具有class属性的元素
[class=’box’]
匹配所有具有class属性并且值等于box的元素 不仅要具备class属性 并且值也要符合
[class~=’box’]
匹配所有具有class属性 并且值等于box 或者包含box 包含的意思是一个class属性多个类名的时候适用,包含是一个属性多个值的时候，有一个值是我们要选择的属性的时候使用，并不是我们常常说的那种模糊匹配的意思！
[class|=’list’]
匹配所有class属性 等于list 开头 或者以list开头的元素,这里说的“开头”要是第一个元素
[href][class=’abox’]
匹配所有同时拥有href 和class属性 并且值等于abox的元素 满足三个条件
扩展：
[href][class~=’abox’]
匹配所有同时拥有href 和class属性。 并且值等于abox或者包含abox的元素

二.伪类

    1.伪类选择器

我们没有给某个元素定义类名 可以通过样式的方式给某些选择器添加特殊的效果,实际上就是 某些标签css内部本身赋予它一些特性和功能，拿过来加以运用
针对a标签两个伪类
:link 规定未被点击的a标签的颜色
:visited 匹配所有已被点击的颜色
适用于所有元素
:active 匹配按住不放的元素
:hover 匹配鼠标滑过的元素
hover伪类的扩展
div：hover{}/*选择自己本身*/
div p：hover a{}/*后代元素如何选中*/
div + p：hover a{}/*兄弟元素如何选中*/

    2.伪元素

通过样式的方式在元素后面添加内容
伪元素的由两个冒号::开头，然后是伪元素的名称 。
使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::
:before 元素内容前面添加内容
:after 元素后面添加内容
/*在伪元素里面添加图片*/
::after{content:’url(‘images/1.jpg’)’;}
总结：
伪类和伪元素的根本区别在于：它们是否创造了新的元素

选择器高级和伪类

一.选择器

    1.E,F 多元素选择器

div,p,span,a{color:red;}

    2.E > F 子元素选择器

顾名思义就是只选择器他的子元素！只认儿子，这种选择器一般是不想影响后面的元素而
使用的比较多！

    3.E + F 毗邻元素选择器

选择后面的一个兄弟元素
div + p{background:red;}

div p + p{background:blue;} /*指向div 下p标签下面的邻居 是p的标签*/

二.属性选择器

用元素属性来选择元素

[class]
匹配所有具有class属性的元素
[class=’box’]
匹配所有具有class属性并且值等于box的元素 不仅要具备class属性 并且值也要符合
[class~=’box’]
匹配所有具有class属性 并且值等于box 或者包含box 包含的意思是一个class属性多个类名的时候适用 包含是一个属性多个值的时候，有一个值是我们要选择的属性的时候使用，并不是我们常常说的那种模糊匹配的意思！
[class|=’list’]
匹配所有class属性 等于list 开头 或者以list开头的元素 这里说的“开头”要是第一个元素
[href][class=’abox’]
匹配所有同时拥有href 和class属性 并且值等于abox的元素 满足三个条件
扩展：
[href][class~=’abox’]
匹配所有同时拥有href 和class属性。 并且值等于abox或者包含abox的元素

三.伪类

伪类选择器
我们没有给某个元素定义类名 可以通过样式的方式给某些选择器添加特殊的效果 实际上就是 某些标签css内部本身赋予它一些特性和功能，拿过来加以运用

    1.针对a标签两个伪类

:link 规定未被点击的a标签的颜色
:visited 匹配所有已被点击的颜色

    2.适用于所有元素

:active 匹配按住不放的元素
:hover 匹配鼠标滑过的元素
hover伪类的扩展
div：hover{}/*选择自己本身*/
div p：hover a{}/*后代元素如何选中*/
div + p：hover a{}/*兄弟元素如何选中*/

四.伪元素

通过样式的方式在元素后面添加内容
伪元素的由两个冒号::开头，然后是伪元素的名称 。
使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，
CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用
两个冒号::
:before 元素内容前面添加内容
:after 元素后面添加内容
/*在伪元素里面添加图片 content=” 必填*/
::after{content:’url(‘images/1.jpg’)’;}
总结：
伪类和伪元素的根本区别在于：它们是否创造了新的元素

字体文本样式和特殊符号

一.字体样式
字体颜色 color
字体风格 font-family
字是一样的写法，但是展示的风格不一样，比如宋体，楷书，隶书，草书，这些都是不一样的字体，在学校的时候我们都练过字对吧！
注意：
注意，当电脑上没有属性里规定的字体的时候，是无法显示出相应的字体的，需要在电脑上安装相应的字体才可以！
为了解决用户电脑里没有安装我们想要的字体，导致页面的问题，我们一般会写多个值，中间用逗号隔开，浏览器会优先使用前面的字体样式，如果前面的没有用第二个，以此类推！
span{
font-family:’微软雅黑’,’宋体’;
}
字体大小 font-size
div{
/*具体的值*/
font-size:50px;
/*百分比 相当于父容器的字体百分比调整 浏览器默认字体大小16px*/
font-size:50%;
/*em 父元素的字体大小 根据父元素字体大小来调整*/
font-size:1em;
/*rem 跟标签的字体大小默认16px 最小只能12px*/
font-size:1rem;
}
字体粗细 font-weight
1.bold 定义粗的字体
2.bolder 定义更粗的字体
3.lighter 定义更细的字体
4.100 200 300 400 500 600 700 800 900 数值的写法没有单位
5.normal 默认 默认一般是用来给本来就加粗的字体，变成普通粗度
规定字体是否倾斜 font-style
1.italic 定义字体倾斜
2.oblique 定义字体的斜体 (两者没有明显的区别，记住一个就行)
4.normal 默认 一般用来规定本来就是斜体的字体变成普通字体
如果对没有 italic 字体风格的字体使用 italic 就没有效果了,这时需要用斜体就使用 oblique;
如果字体没有 italic样式 ,而只有 oblique 样式 ,则使用后者 oblique ;但若 字体没有oblique样式 ,则不能用 italic 替代,此时浏览器会将正常直立字体倾斜一个角度来作为倾斜字体使用
规定小型大写字母 font-variant
smallcaps= 大型小写字母
规定小型大写字母 把小写字母变大，但是比文字小一圈，大写字母保持原型。
line-height 行高
设置行与行之前的距离
div{
/*给高度的一样的是可以实现垂直居中!*/
line-height:30px;
line-height:100%; 根据字体大小
line-height:1.2em; rem
}
只写数字不写单位的时候 等于em，当不给高度的时候行高可以撑开盒子的高度！但不是所有时候都可以用行高代替高度,会造成布局的混乱,当没有字的时候 行高不起作用.
复合写法
基本写法：
div{
/*字体大小和字体风格是必须要写的*/
font:12px ‘微软雅黑’,’宋体’;
}
多样式写法:
/*字体:字体大小/行高 字体风格 字体粗细 小型大写字母 倾斜 顺序不能改变*/
font:bold small-caps italic 12px/1.2 ‘微软雅黑’;
文本样式
text-transform 控制文本大小写
uppercase 字母大写
capitalize 首字母大写
lowercase 小写字母
text-align 文本对齐方式
left 左对齐
right 右对齐
center 居中
justify 两端对齐
text-indent 首行缩进
px 或者 百分比 em rem
text-decoration 文本修饰 下划线
none 去掉下划线
underline 下划线
linethrough
中划线
overline 上划线
letter-spacing 字间距
px
em
word-spacing 词间距 对中文无效.
px
em
white-space 文本不换行
nowrap 不换行
文本会在在同一行上继续，直到遇到标签为止。
word-break 单词内换行
breakall
单词内换行 一行写不下的时候，强制拆开一部分，换行显示，对中文无效。
text-overflow 文本省略号
ellipsis 文本省略号
要实现这个效果，必须要搭配一个属性overflow:hidden;元素溢出隐藏,对行内元素无效(内容撑开宽高)
span{
display:block;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
css属性的继承
默认继承的属性：
color
font:small-caps italic bold 50px/100px ‘microsoft yahei’;
text-align
text-indent:
letter-spacing = 字间距
word-spacing = 词间距
list-style
a标签的color不继承，不继承的加上inherit
a{color:inherit;}

二. 特殊符号

空格 nbsp 前后加上& ;
大于号 gt
小于号 lt
引号 quot
版权符号 copy

 样式初始化+元素类型

一.样式初始化

浏览器对标签默认属性有默认值,但不同浏览器默认值不一定相同;为使页面和代码兼容性,需要对一些标签进行样式初始化.

*{

margin:0;
padding:0;
}/* *通配符选择器 也是选择器的一种表示 选择页面中所有的元素*/
*通配符选择器的利弊
浪费性能，每个标签多执行8次！
多元素选择器多个选择器组合起来使用
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
ol,ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
img{border:0;}

二.元素类型的转换

元素的类型通常分为 块级元素 内联元素 内联块元素

    1.块级元素

定义：块级元素会占据一行的位置,它后面的元素内容会换行显示

块级元素里面可以放任何内容,主要用来布局。

默认占据一行
自动换行
支持添加宽度高度
支持margin
支持padding
常见的块级元素:
div
p
ul li
dl dd
h1 h6
hr
pre
table

    2.行内元素

定义：内联元素也叫行级元素.它只占据他内容所占的位置,其它的
内容在他后面显示，但是 行级元素里面不能放块级元素
不自动换行
不支持宽高
margin上下无效 左右有效
padding上下无效 左右有效
padding只对自身有效
元素类型互相转换呢？
用到display属性：
none
block
inline

    3.内联块元素

span{
/*以行内元素形式排列，以块级元素形式显示*/
display:inline-block;
}

1.不换行 横排显示（会解析空格）

2.支持宽高，不给宽高的时候，内容撑开，不给内容的时候是0.0
3.给宽高的时候，占据宽高的位置，不给的时候，占据内容的位置，没内容的时候，不占据
位置
4.支持margin padding 不支持margin auto

    4.元素嵌套规则

1 块级元素可以套任意内容 p 标签里面不能套块级 包括其自身 h标签 dt 标签不建议套块级
2 行内不能套块级 a标签不能套a a可以套块级 但是最好是块级套a 然后把a转化成块级元素
3 行内块可以套任意,但是内联元素不管变成什么样子，都不要套块级。

    5.外边距合并

垂直相遇的两个盒子会出现外边距合并的情况
包含关系的margin合并的问题
解决原理：
不让他们相遇 加padding 或者 border

列表标签和DIV盒子模型

一.层叠样式表概念

样式 = 选择器 + 申明

所有申明都要用{}大括号包裹,

每条申明 都由    属性和值组成 属性使固定的 值是可变的;并且有的属性可以由多个值; 每条属性由;分号隔开.

写样式时要 换行写; 每条申明结束要换行; 遵循从上往下 从外向内的顺序写样式; 样式可视性好,直观;可维护性很重要.

二.三种列表标签

    1.无序列表标签

ul li标签组合; 必须成对出现,父子关系;

ul下面只能放li标签;

li标签下面可以放任意元素,除了自己.

行内样式type 外部样式list-style-type

none:没有文字点的点; disc:实心圆点; circle:空心圆; queare:方块符号.

    2.有序列表标签

ol li标签组合;必须成对出现,父子关系

行内样式type( 1[默认],A,a,I,i )

外部样式 list-style-type:decimal (1.  2. 3. 4. )

upper-alpha (A. B. C. D. )

lower-alpha (a. b. c. d.)

upper-roman (I. II. III. IIII. )

lower-roman (i. ii. iii. iiii. )

    3.自定义列表标签

dl dt dd配套使用

dl 父     dt 列表名    dd列表项 子

一个dt    一个dd

一个dt    多个dd

多个dt    一个dd

多个dt    多个dd

三.div盒子模型

div标签通常被称为盒子,(严格来讲所有的标签都是盒子,div比较典型);网页中div被大量使用.

是一个通用的留内容容器;

里面可以放任意元素,用来布局网页或者给元素分组;

    1.边框

是一个用于设置各种单独边界的属性.

border:1px solid red;( 这三个值对应:边框大小 边框风格 边框颜色 ).

border-top:1px solid red; ( 单独设置一条边框线 上边框线).

其中:

border-top-width: 5px; 上边框线的宽度5px;

border-top-style: solid; 上边框风格为实线;

border-top-color: red; 上边框线颜色为红色;

border-type:

none    无边框线 (默认)

solid    实线

dashed    虚线

dotted    点状线

double    双线

groove    3D 凹槽

ridge    3D 垄状

inset    3D insert边框

outset    3D outset边框

颜色:

颜色的标准英文关键词:red blue yellow orange pink;

十六进制颜色 #开头    前两个值代表红色 中间两个代表绿色 后两个值代表蓝色

两个值相同可简写成一个字母,如:#aa00ff 可以写成#a0f

    2.外边距 margin

移动盒子位置用maigin

maigin属性为给定元素设置所有四个(上右下左)方向的外边距属性.

可简写成maigin:100px;

四个外边距属性:margin-top    margin-right    margin-bottom    margin-left;(值允许负值)

百分比: 是根据父元素的宽高来自动设置;

如:maigin:50%;

复合式写法

div{

margin:100px; /*上下左右*/

margin:100px 100px;    /*上下    左右*/

margin:100px 200px 300px;    /*上    左右    下*/

margin:100px 200px 300px 400px;    /*上    右    下    左 (顺时针)*/

}

    3.内边距

padding属性设置一个元素的内边距,pandding区域是指一个元素内容与其边界之间的空间,该属性不能为负值.

单样式写法

div{

pandding-top:100px;

padding-right:100px;

padding-bottom:100px;

padding-left:100px;

}

复合写法

div{

padding:100px;    /*上下左右*/

padding:100px 200px;    /*上下    左右*/

padding:100px 200px 300px;    /*上    左右    下*/

padding:100px 200px 300px 400px;    /*上    右    下    左 (顺时针)*/

}

特性:

元素框的最内部分是实际内容,直接包围内容的是内边距.

在CSS中,width和height属性是指内容区域的宽度和高度.增加内边距、边框和外边距不会影响内容的区域的尺寸,但会增加元素框(父元素)的总尺寸.

盒子占位大小:

盒子的实际大小+margin    如果是块级(block)那么后面(右方)都是盒子的占位大小

盒子的宽度= 盒子的本身宽度 + 边框左右宽度*2 +左右padding大小*2

 

 

 

 

本文为原创文章，转载请注明出处！