css(杂记)

CSS中的伪类有：

:link——未访问过的链接；
:visited——访问过的链接；
:hover——鼠标悬停的元素；
:focus——获取焦点的元素；
:active——激活的元素（例如一个被单击的链接元素）；
:first-child——作为其他元素第一个子元素的元素；
:lang()——根据元素的lang属性确定的元素。
:target
:root
:nth-child()
:nth-of-type()
:nth-last-of-type()
:first-of-type
:last-of-type
:only-of-type
:only-child
:last-child
:empty
:not()
:enabled
:disabled
:checked

CSS2.1中的伪元素有：~~~~

::first-line
::first-letter
::before
::after

那么区别在哪儿呢？区别就在于这些伪选择器影响文档的方式不同。伪类的表现有点儿像给文档添加类，而伪元素的效果就好像有元素被插入到了文档中。

特殊性可以来判断优先级

每个元素描述符贡献0,0,0,1；
每个类、伪类或者属性描述符贡献0,0,1,0；
每个ID描述符贡献0,1,0,0。

a[href*="w3.org"] {font-weight: bold;}
选择所有URL中包含w3.org的链接元素

a[href^="http"]
a[href$=".pdf"]
只查找属性值的开头或结尾部分

p~ul选择前面有元素的每个元素，即选择p之后出现的所有ul

css中“>”是css3中特有的选择器，A>B表示选择A元素的所有子B元素，与A B不同的是，A B选择所有后代元素，为A>B只选择一代。

A B{}选择A所有的后代B元素

A>B{}选择A的一代B元素

A+B{}这个+是选择相邻兄弟，称作“相邻兄弟选择器”，如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器，例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

　　h1 + p {margin-top:50px;}
  
波浪号作为选择符，允许选择后续的兄弟元素，但不包含直接相邻的兄弟元素。
h1 ~ ul {list-style-type: lower-alpha;}

line-height（行高）属性既可以接受无单位的数值，也可以使用带单位的行高值。那么它们之间有什么区别呢？当你定义了一个有单位的值，例如1em或者100%时，就会将计算后的行高值传给全部的后代元素。而无单位的行高值不会传导到后代元素。

.hide {visibility: hidden;}
该规则会使元素不可见，这可能听上去像是元素没有`display`属性。然而，这里有个很关键的差异：被设置成`visibility:　hidden`的元素仍然参与页面布局

设置打印样式
将这些打印样式应用到屏幕媒介上，把其他的屏幕样式取消，如图3-11所示。因此，需要把print改为screen并且把原来存在的screen值改为其他的media值。一般会使用tty这个值，因为这是跟screen最不搭边的媒介了，并且它很短，输入很方便。

通用样式

body {padding: 0; margin: 0;}
消除所有浏览器的装订距离

ul, ol {margin-left: 0; padding-left: 0;}

轮廓outline和div的区别
1、边框是参与布局的，而轮廓并不参与。
2、轮廓必然是环绕着元素的，并且在元素的四周永远保持一致。换种说法就是，你不能像设置边框那样只设置左轮廓或者上轮廓

清除浮动：

div#footer {clear: left;}

清除浮动最简单的办法就是在文档中插入一个元素，并设置它的clear（清除）属性。

.clearfix {display: block; clear: both;
font-size: 0; height: 0;}

em和rem相对于px更具有灵活性，他们是相对长度单位，更适用于响应式布局。

对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。
em

子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size

css(杂记)

你可能感兴趣的:(css)