css复杂选择器
-
父子选择器（派生选择器）
我们来看下面的结构<div class="demo"> <p>111</p> <span>222</span> </div> <p>333</p>此时我们想选出第一个
<p>111</p>，用之前的知识就解决不了。
我们选择div下的所有p标签div p{ } 给div下面的p加样式 这时候的p的权重值是加和的结果。 .demo p{ } 与上面完全相同我们来看下面结构
<div class="demo"> <p> <strong> <em>1</em> </strong> <em>2</em> </p> <span>3</span> <em>4</em> </div>我们要选择第一个
<em>1</em>div p strong em{ }<span style="color:#ff0000">注意：在实际开发中，我们因为要注意浏览器寻找时候的耗能，一般这样的嵌套关系不超过4层。<span>
-
直接子元素选择器
<div class="demo"> <p> <em>1</em> </p> <em>4</em> </div>如果我们只想选择第二个
<em>4</em>标签div > em{ } 这样就只能选出div的直接子元素 -
并列选择器
<div>1</div> <div class="demo">2</div> <span class="demo">3</span>我们想选出类名是
demo的divdiv.demo{ }<span style="color: #ff000">注意：div和.demo之间没有空格，标签选择器要写在最前面</span>
-
分组选择器
<p></p> <strong></strong> <em></em> <div></div>我们要想同时给四种标签都加上
color: red的样式，不可能把四个标签都写一遍样式，因此要用分组选择器。div, p, em, strong {}这样的写法，我们可以把前面写的所有的标签都选择出来加上样式，中间是用逗号连接的。这个样子四种标签就全都被选择出来并且都加上了统一的样式。
一个很重要的问题，那就是父子选择器的时候浏览器是怎么检索的？
div p strong em span 这样的选择器，浏览器是从右往左检索的
- 因为如果是从左往右寻找的话，每找到一个父级标签，都要把它下面的所有标签都遍历一遍，看看有没有我们下一个标签，上面那个选择器中，浏览器会先找到div这个标签，然后把div下面所有的子元素都遍历一遍后，找到strong这个标签，然后再把strong这个标签下面的所有元素遍历一遍，找到em这个标签，以此类推，这样是十分消耗性能并且速度非常慢的。
- 而如果是从右往左的话，那么浏览器只需要先找到span标签，然后从span这个节点向上寻找，只要找到em就可以停止寻找，以此类推，不必遍历所有的节点，而且需要遍历的点非常的少，这样的好处显而易见，速度非常快，而且不耗性能。
权重的计算问题
凡是写在同一横行的选择器，把他们的权重相加
看下面一个例子
<div class="wrapper" id="wrapper">
<p class="content" id="content">
111
</p>
</div>
/*1 100 = 101权重*/
div #content{
background-color: red;
}
/*1 10 1 10 = 21权重*/
div.wrapper p.content{
background-color: green;
}
此时p标签呈现<span style="color: #ff000">红色</span>。
CSS基础属性
css有很多很多的样式，我们不可能一一记住每一个样式的值，其实我们只需要记住一些常用的样式的意思，然后去http://www.css88.com这个网站去查询样式的具体的值就可以了
首先我们介绍一下样式的构成，样式都是由属性名和属性值构成的，名和值之间用: (冒号)分隔，属性和属性之间用; (分号)分隔。
我们首先来写几个样式
p {
font-size:20px;
font-weight: bold;
font-family: arial;
font-style: italic;
color: red;
}
-
font-size属性
这条属性是设置文字的大小的，文字大小默认是
16px，我们在例子中就是将p标签里面的文字设置成20px大小
<span style="color: #ff000">这条属性其实是设置的文字的高度而不是宽度。</span>这里我们要介绍一下px
px是像素的意思，这是一种相对大小，并不是絶対大小，因为每一个像素点的大小都是不同的，我们的屏幕都是由很多个像素点组成的。 -
font-weight属性
这条属性是设置的文字的粗细程度的，默认值是
normal，当我们设置成bold的时候，这个p标签就和strong标签没什么区别了，这就是为什么很多标签我们都不用，因为通过修改样式就可以达到和其他标签一样的效果。这条属性常用的值有
lighter、normal、bold、bolder，其次我们还可以写100-900的数字，其中lighter大概是100左右，normal大概是400左右，bold应该是700左右。 -
font-family属性
这个属性的作用是设置文字的样式，默认是arial字体，其他还有很多很多的字体，我们可以到css88上面去查找。
不过我们写英文字体的时候，属性值是不需要加引号的，写中文的时候则需要加引号。font-family: '黑体'; -
font-style属性
这个属性的作用是设置文字是否斜体，italic就是斜体的意思，通过设置这个属性我们就可以让p标签达到和em标签一样的效果了。 -
color属性
这个属性的作用是设置文字的颜色，并不是font-color。
文字颜色的色值有三种表达方式- 英文单词，比如red、black、blue等等。
- 三位十六进制组成光学三原色红绿蓝
每一个的值都是00-ff，00代表空，ff代表满，例如#000000就是黑色的意思。其中，如果每连续的两位都是一样的并且3组数字都是这种情况的时候，我们就可以两两合并只写一个数值就可以了，比如#ffffff —> #fff、 #55ffcc —> #5fc; - 通过rgb(xx,xx,xx)属性值来设置颜色，其实和第二种是一个意思，只是把十六进制换成了十进制，rgb就是red、green、blue的缩写，其中的三个数值每一项的范围都是0-255，例如红色就是rgb(255, 0, 0)。
对文字的处理大概就这么多，我们再来介绍一下其他的一些简单的样式
-
text-indent属性
这个属性的作用是设置首行文字的缩进，值有两种单位，一种是px，一种是em。
这里就要提一下em和px的区别了-
px虽然是一个相对长度单位，但是我们可以变相地理解为它是一个差不多固定长度的单位，我们设置100px的时候，基本上每一个宽度被设置成100px的元素都是一样的宽度。 -
em则是一个真正的相对长度单位，它相对的是当前元素内的文字的大小，也就是说1em = 1 * font-size;如果我们设置font-size是20px的话那么1em也就是20px的大小，我们只要将text-indent设置成2em就可以首行缩进2个文字大小了。
-
-
border属性
border: 1px solid red;border是边框的意思，这个属性也是设置元素边框的属性。
这其实是一个复合属性 由border-width、border-style、border-color三个属性复合而成的。分别设置的边框的宽度，边框的样式，边框的颜色，其中边框的样式有很多种，基本常用的只有solid实线、dotted短虚线、dashed长条虚线三种样式。
border-width也是一个复合属性
它可以按照上右下左的顺序来分别设置四个边框的宽度值。 -
text-align属性
这个属性是设置文字的位置的属性，它的值也是有三种，分别是center文字左右居中、left文字左对齐、right文字右对齐。 -
line-height属性
这个属性是设置一行文字所占的高度的属性，默认状态是和字体大小一样的值。- 当我们想要让单行文字在容器内部上下居中的时候，我们只需要让height = line-height即可。
- 多行文字居中我们现在还没有专门的属性可以做到这一点，不过我本人一般是在文字部分外面包裹一层div标签，然后让div标签在父级元素水平上下居中来实现的。（并不知道这么做对不对…）
-
text-decoration属性
这个属性的意思是文字装饰的意思，可以来设置文字是否有下划线、上划线、中划线，分别对应的属性值是underline、overline、line-through。 -
cursor属性
这个属性则是设置我们的鼠标移入到这个元素中的时候，鼠标会变成什么样子。它的值有很多很多，我们同样可以到css88上去查看。不过一般常用的是cursor: pointer;这一条属性，它会让我们鼠标移入这个元素的时候，鼠标变成可以点击的小手的状态。
现在我们就可以来模拟一下a标签的样式了。<p>www.baidu.com</p>p { color: rgb(0, 0, 238); text-decoration: underline; cursor: pointer; }
这个时候www.baidu.com的样式和我们直接用a标签写一个www.baidu.com的样式基本是一模一样的。
网友评论