css选择器分类以及其他知识点

css选择器分类以及其他知识点

一. id：#id选择器指定具有ID的元素的样式。特点：一对一，一个标签只能对应一个id，就如同一个人只能有一个身份证号码。

<div id="myOnlyId"></div>//正确
<div id="myOneId" id="myTwoId"></div>//错误

二. class：.class选择器是指定类的所有元素的样式。特点：多对多，即一个元素可以有多个class，一个class也可以由多个标签使用，如同人和衣服的关系。

//一个class可以对应多个标签
<div class="myClass"></div>
<div class="myClass"></div>
//一个标签可以使用多个class
<div class="myOneClass myTwoClass myThreeClass"></div>

三. 属性选择器：[class=“myclass”] or [id=“myid”]

四. 标签选择器：特点：无论标签在html文档结构的哪里其都可以被选中。（标签选择器主要的作用为初始化标签样式,因为每个标签出生时，都带着出生样式）

五. 父子(派生)选择器：

<div><span>inside</span></div>
<span>outside<span>

div span{
	background-color:blue;
}

六. 直接子元素选择器：

<div>
	<span>inside</span>
	<strong>
		<span>outside<span>
	</strong>
</div>

div > span{
	background-color:blue;
}

七. 并列选择器：

//html
<div>one</div>
<div class="two">two</div>
<p class="two">three</p>

/* css */
div.two{
	background-color:blue;
}

八. 分组选择器：

//html
<div>one</div>
<p>two</p>
<strong>three</strong>
<em>four</em>

/* css */
div,p,strong,em{
	background-color:blue;
}

九. 伪类选择器：

//html
<div>one</div>

/* css 下列代码的意思是将光标移动到div区域时，背景颜色变为蓝色，移开时，背景颜色还原*/
div:hover{
	background-color:blue;
}

其他小知识：

1. html中既有行注释//，也有块注释/* */，但是css中只有块注释。
2. css中行高（line-height）相当于word文档中的行间距。就是一段文字所占一行的高度。一个小例子：实现单行文本水平垂直居中：text-align：center，height与line-height的值相等就可以实现。
3. text-indent：首行缩进（提起首行缩进就不得不介绍一下em单位：em的大小 = 1 * 该标签样式的font-size值 ）
4. cursor：设置光标的图案。
5. html标签的分类：标签被划分为三类——行级（inline）元素，块级（block）元素以及行块（inline-block）级元素，其中行级元素的特点是内容决定元素所占位置，不可以通过css改变宽高；块级元素的特点是独占一行，可以通过css改变宽高；行块级元素的特点是内容决定大小，可以改变宽高。（补充一个小知识：凡是带有inline特征的元素都带有文字特性）
6. 在一般开发过程中，一般是先定义功能，然后再去选择功能。（初学时，我们一般是先定义一个html标签，再根据最终要体现出的样子来定义css，而在一般开发过程中，过程是反过来的，这样做的好处是便于代码的维护以及再利用）
7. 一般我们使用通配符（*）来初始化标签样式（因为通配符的权重最低——值为0）

css权重：

!important :infinity
行间样式 :1000
id :100
class|属性|伪类选择器 :10
标签|伪元素 :1
通配符 :0

盒模型计算问题：

盒子的组成部分：盒子壁（border）内边距（padding）盒子内容（width+height）
盒子模型组成部分：margin + border + padding + （content = width + height）如下图所示：

盒模型示例代码：

<div>粉红葡萄脆皮酒<div>

/*	padding:20px(表示上下左右大小都为20px)
    padding:20px 10px 15px(表示上20,左右10,下15)
    margin:10px(表示上下大小为10px) 30px(表示左右大小为30px); */
div{
	width:100px;
	height:100px;
	background-color:blue;
	padding:20px;
	border:10px solid black;
	margin:10px 30px;
}

那么请问上述盒子可视区域的宽高是多少？
（w:160 h:160 可视区域不计算margin的值）

【归纳学习笔记】