Python Learning Day 49th: CSS3 New

1 CSS3 Selector 1.1 Basic Selector

tagName.className#idName*slector,selector,selector

1.2 Level Selector

selector1 selector2     后代selectoer1>selectoer2   子元素selector1+selector2 紧邻在后面的兄弟元素selector1~selector后面所有兄弟元素

1.3 Property Selector

selector[attr]  包含指定的属性selector[attr=value]  指定属性的值selector[attr^=value] 属性值以value开头selector[attr$=value] 属性值以value结束selector[attr*=value] 属性值包含valueselector[][][] 多个属性选择器

• Attribute selector priority is the same class

1.4 Pseudo-Class selectors

/*语法*/selector:伪类 {   }

: LinkNon-visited hyperlinks: VisitedHyperlinks that have been visited: hover mouse hover any element : actived Activation Status Hyperlink : When focus is focused : First-child: Last-child: Nth-child () Specify a number, or you can specify the keyword "odd", "even": Nth-last-child: Only-child: Fist-of-type  : Last-of-type: Nth-of-type () Specify a number, or you can specify the keyword "odd", "even": Nth-last-of-type (): o Nly-of-type ()                 

1.5 pseudo Element Selector

::first-letter   第一个字::first-line 第一行::before 最前面插入一个子元素::after最后面追加一个子元素

2 CSS3 Base 2.1 Browser Private prefix

-weibkit-*    chrome/safari-moz-* firefox-ms-*  ie-o-* opera

2.2 CSS3 New Colors

rgba(r,g,b,不透明度)  不透明度：0~1 小数， 数越大，越不透明

2.3 CSS3 New Length unit

pxem默认字体大小的倍数rem根元素字体大小的倍数vw      窗口宽度分成100份 50vwvh 窗口高度分成100份

2.4 CSS3 New properties

#  reset  box Model Rules  Box-sizing: content-box ( default)/border-box  ( width/height box width high) #  outer contour  outside of border not box Outline:outline-styleoutline- Coloroutline-width#  opacity opacity Span class= "Hljs-number" >0~1  decimal      

2.3 Setting rounded corners

border-radiusborder-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusborder-bottom-right-radius

Python Learning Day 49th: CSS3 New