WEB distal -CSS selector (CSS background)

Intersection selector

The selector is constituted by the intersection of two selectors, wherein the first tag is a selector, the second selector is a class
NOTE: use is relatively small, not recommended.

h3.title{color:red;}

标签下的类名：h3标签下类名叫title

And set selector

If some of the selected style definition identical or partially identical, and can be set using the selector to the same CSS style definitions thereof

比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。

Child element selector

Sub-element selectors: elements with a parent class called child elements

.demo > h3 {color: red;}   类名demo下的子标签h3标签

Attribute selectors

The selector selecting tags with certain special properties

/* 获取到 拥有 该属性的元素 */
div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */
            color: pink;
        }
div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */
            color: skyblue;
        }
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
            color: green;
        }

<div class="font12">属性选择器</div>
    <div class="font12">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="24font">属性选择器123</div>
    <div class="sub-footer">属性选择器footer</div>
    <div class="jd-footer">属性选择器footer</div>
    <div class="news-tao-nav">属性选择器</div>
    <div class="news-tao-header">属性选择器</div>
    <div class="tao-header">属性选择器</div>

Pseudo-element selector (CSS3)

E :: first word or first-letter word of the text (such as Chinese, Japanese, Korean, etc.)
E :: first-line first line of text;
E :: selection may change the style of the selected text;
E::before和E::after
Created at the beginning and end of elements inside the E-bit of an element, the element is inline elements, and must be combined with the use of the content property.

p::first-letter {
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊样式 */
p::first-line {
  color: skyblue;
}

p::selection {
  /* font-size: 50px; */
  color: orange;
}
div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

CSS background

Transparent background (CSS3)

CSS3 support background translucent wording syntax is:

background: rgba(0,0,0,0.3);

The last parameter is between the alpha transparency ranges from 0 to 1

Note: Background refers translucent translucent background box, inside the box does not receive influence content.

Background scaling (CSS3)

By setting background-size background image size, as we set img size, as do the screen adaptation in a mobile Web application development very extensive.

Its parameters are as follows:

A) The unit of length may be provided (px) or percentage (percentage set, with reference to the width and height of the box)

b) set to cover, it will automatically adjust the zoom ratio to ensure pictures are always filling up the background area, if the overflow section will be hidden. The most we usually use cover

c) setting will automatically adjust the zoom to contain, to ensure that pictures are always displayed completely in the background area.

background-image: url('images/gyt.jpg');
            background-size: 300px 100px;
            /* background-size: contain; */
            /* background-size: cover; */

Multi-background (CSS3)

Comma-separated may be provided multi-instance, the layout can be used for the adaptive approach is separated by commas like.

An element can set multiple background images.
Between each attribute separated by commas.
If there is an intersection between a set of multiple background (i.e., there is an overlapping relationship), in front of the background will be overlaid on top of the background behind the FIG.
In order to avoid covering the background color image, the background color is usually defined in the last group,

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
       url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
       url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

Embossed lettering

<head>
        <meta charset="utf-8">
        <style>
        body {
            background-color: #ccc;
        }
        div {
            color: #ccc;
            font: 700 80px "微软雅黑";
        }
        div:first-child {
            /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
            text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
        }
        div:last-child {
            /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }

        </style>
    </head>
    <body>
    <div>我是凸起的文字</div>
    <div>我是凹下的文字</div>
    </body>

CSS three characteristics

CSS Cascading of

The so-called stack refers to the superposition of multiple CSS styles.
Under normal circumstances, in accordance with the order of CSS, subject to final style.

Style conflict, the principle to follow is the principle of proximity.

CSS inheritance

The so-called inheritance means that when writing CSS style sheets, some sub-label style tags will inherit the parent, such as text color and font size
Note: child elements can inherit the style of the beginning of the parent element (text-, font-, line- of these elements can inherit, and color attributes)

CSS priority

The right to inherit the style of weight 0. That in a nested structure, regardless of the parent element of style heavy weights much, when the quilt elements inherit his weights are zero, which means that the child elements defined style will override inherited styles.
Inline style takes precedence. Application of an element of style attribute, the style of its right row weight is very high, much greater than 100 may be understood. In short, he has elevated than the above selectors are big priority.
Weights are the same, CSS follow the principle of proximity. That is close to the style element with the greatest priority, or that came in the final of the biggest priorities style.
CSS defines an! Important command, the command is given maximum priority. That no matter how heavy the right position and distance style,! Important have the highest priority.

CSS particularity (Specificity)

About CSS weights, we need a formula to calculate come and go, this is the CSS Specificity, we called CSS properties or called extraordinary nature, it is a measure of the value of the priority of a CSS standard specification into concrete as follows:

specificity using a four-digit numeric string (the CSS2 is three) to indicate more like four levels, from left to right value, the maximum left, a greater than one, not between the binary digits, not between the levels beyond.

* Inheritance or contribution values	0,0,0,0
Each element (tag) contribution is	0,0,0,1
Each class, pseudo-class contribution value	0,0,1,0
Each ID value contribution	0,1,0,0
Style contribution in each row	1,0,0,0
Each! Important contribution value	∞ infinity

Weight can be superimposed

example:

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a       ------>      0,0,1,1   

#nav p       ----->       0,1,0,1

总结优先级：

使用了 !important声明的规则。
内嵌在 HTML 元素的 style属性里面的声明。
使用了 ID 选择器的规则。
使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
使用了元素选择器的规则。
只包含一个通用选择器的规则。
同一类选择器则遵循就近原则。

注意： 
继承的 权重是 0
数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0。

WEB distal CSS selectors