学习总结：CSS(一)定义方式、选择器、选择器权重

一、CSS的定义方式

1.内部样式：<style></style>

2.行间样式：<div style="width:100px;height:100px;">

3.外部样式：<link rel="stylesheet" type="text/css" href="地址" >

注：浏览器异步加载html、css、js文件

二、CSS选择器

1.常用选择器：类选择器、id选择器、标签选择器、通配符选择器

/*类选择器*/
/*假设页面有一个或多个同类名元素，且该类元素有一些共同的样式特性。当然通常我们的设计逻辑是有这样一些共同特性元素的需求，预先设计编写一组样式表，用来描述具备特定需求的元素。*/
/*假设有需求是有一些元素的宽高为100px,内边距和外边距为0，文本内容，文本溢出部分被剪切*/
.exa{
    width: 100px;
    height: 100px;
    margin:0 auto;
    padding: 0 auto;
    text-align: center;
    line-height: 100px;
    overflow: hidden;
}

标签选择器与类选择器的使用逻辑非常相似，就是用来描述页面同一类标签的元素的样式。类选择器使用程序员自己在元素属性上定义的class属性值来选定（.类名），点加类名的方式来设置。而标签选择器直接使用标签名即可。

id选择器就是使用元素上定义的id属性值来设置，在di属性值前面加上井号“#”就可以实现，设置的特定的一个元素的样式。实际开发中并不建议使用id选择器来设置样式表，根据项目和开发手册要求来定。

通配符使用的应该是最少的一种，出现在常用名单里的原因是我们每个样式表的第一行都是用星号“*”,即通配符来去除元素原本的默认样式，如元素的默认边距、列表标签的默认序列号、超链接元素的默认字体颜色和下划线、统一全局字体大小和字体及颜色等一系列应用。

2.父子选择器/派生选择器

基于标签选择器、类选择器、id选择器的父子关系进行筛选需要匹配的元素，每级条件用空格间隔。

/*比如有需求是：找到页面中id为“showcase”的div下，所有有序列表的列表项内的img元素中，设置样式为宽300px，高200px，内外边距为0像素,超出部分隐藏*/
div #showcase ul li img{
    margin: 0 auto;
    padding: 0 auto;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

3并列选择器

这个选择器也是基于标签选择器、类选择器、id选择器来实现的，通过基础选择器组合，有别于父子选择器的是并列选择器的每个基础选择器之间不加空格。

/*例如有需求是：有一类元素是div并且都有类名是showcase和primary的样式是，宽高249px；内外边距为0，边框1像素蓝色*/
div.showcase.primary{
    width: 249px;
    height: 249px;
    padding: 0 auto;
    margin: 0 auto;
    border: 1px solid blue;
}

4.直接子元素选择器

是在父子选择器的基础上演变而来的一个选择器，比如要找到一个div元素下的子元素em，但是在其他子元素下面还有em，所以就不能使用div em的父子选择器来实现了，这时候就可以采用直接子元素选择器div > em，在父子选择器的基础上添加一个大于号，中间可以加空格也可以不加空格。这样就是可以实现匹配一个元素下的子元素，而不会影响到其他后代元素。

5属性选择器

 在通常的情况下我们使用类名作为选择器或者id选择器其本质都是属性选择器，所谓的属性选择器就是使用元素的属性和属性值作为匹配条件。

语法：[属性值=属性值]

属性值的类型与元素上的一致，不需要发生改变。

/*比如有需求是找到img元素的图片名称是figure的元素，并设置宽300px，高250px，超出部分隐藏*/
img[src*="figure"]{
    width: 300px;
    height: 250px;
    overflow: hidden;
}

注意留意中间出现的一个符号“*”，在属性选择器中还存在^、$、~、|四个特殊的符号。

星号（*）表示在属性值中出现了指定的字符串。

（^）表示在属性值内有以指定字符串开头的属性值。

（$）表示在属性值内有以指定字符串结尾的属性值。

（~）表示在属性值内有指定的属性值。

（|）表示在属性值整个以指定的字符串开头。

[class="aaa bbb ccc"]{...}
/*(^)匹配属性值内有指定的字符开头的属性*/
[class^="a"]{...}
[class^="b"]{...}
[class^="c"]{...}
/*(|)匹配属性值以指定的字符串开头*/
[class|="a"]{...}
[class|="aa"]{...}
[class|="aaa b"]{...}
...

6.分组选择器

分组选择器就是同时有多个选择器同时匹配一个样式列表，使用逗号间隔。

.exa,div #showcase ul li img,div.showcase.primary,img[src*="figure"]{...}

7.伪类选择器

通过指定伪类设置元素样式，伪类即为不需设置就存在的类，css语法自有的类。在一定程度上解决了行为特性的需求。

:active	向被激活的元素添加样式
:focus	向拥有键盘输入焦点的元素添加样式
:hover	当鼠标悬浮元素上方时，向该元素添加样式
:link	向未被访问的链接添加样式
:visited	向已被访问的链接添加样式
:first-child	向元素的第一个子元素添加样式
:lang	向带有指定lang属性的元素添加样式

 三、伪元素

1.在一个标签内，内容前后隐式的存在逻辑上的两个元素，内容的逻辑前是：before，内容的逻辑后是：after

2.在css中选取伪元素的语法：标签名::before/after

3.伪元素中的content样式属性可以设置伪元素的内容，这个样式只存在伪元素中，必须写content才能生效（content:"";）

4.伪元素是行级元素

:first-letter	向文本的第一个字母添加特殊样式(只是应块级元素)
:first-line	向文本的首行添加特殊样式（只适应块级元素）
:before	在元素之前添加内容
:after	在元素之后添加内容

伪元素是由HTML语法给每一个标签内置的虚拟但真实存在的元素，这里的属性其实质是虚拟标签的class值

四、css样式权重

!important        infinity     正无穷     写在样式后面

行间样式          1000

id                      100

class|属性|伪类  10

标签 | 伪元素      1

通配符                0

注：计算机的：正无穷+1 > 正无穷

权重数值采用的256进制计算。

css复合样式的权重采用权重值相加，谁的权重值的和大使用谁。