Learn the Web from scratch CSS3 (i) CSS3 overview, Selector

Hello everyone, here is "learn the Web series from scratch" and synchronize updates at the following address ...

• Github:https://github.com/daotin/web
• Public number: The top of the Web front
• Blog Park: http://www.cnblogs.com/lvonve/
• csdn:https://blog.csdn.net/lvonve/

Here I will start with the Web front End 0 Foundation, step-up learning web-related knowledge points, during the period will also share some fun projects. Now let's go to the Web Front end learning Adventure tour!

Introduction of CSS31 and CSS3

CSS3 is an upgraded version of CSS (cascading style sheet) technology that includes modules such as box models, list modules, hyperlinks, language modules, backgrounds and borders, text effects, multi-column layouts, and more.

2. New Features

CSS3 has a number of new features, such as rounded corners, graphical boundaries, block shadows and text shadows, transparent effects using RGBA, gradient effects, custom fonts using @font-face, multi-background graphics, text or image warping (rotate, zoom, tilt, move), multi-column layouts, media queries, and more.

3. Advantages

Reduce development costs and maintenance costs

Before the advent of CSS3, in order to achieve a rounded effect, the developer often needed to add additional HTML tags, using one or more images to complete, while using CSS3 only needed a label that could be done using the Border-radius attribute in CSS3.

Improve page performance

Many CSS3 technologies are "substitutes" for images by providing the same visual effect, in other words, by reducing the amount of extra tag nesting and the number of images used in web development, meaning that users will download fewer content and page loads will be faster.

4, compatibility issues

Browsers have a low level of support for CSS3, and sometimes different browsers need to add different prefixes.

Chrome (Google browser):-webkit-
Safari (Apple browser):-webkit-
Firefox (Firefox):-moz-
LE (ie browser):-ms-
Opera (open Gate Browser):-o-

Second, selector

CSS3 has added many ways to find elements flexibly, greatly improving the efficiency and accuracy of finding elements. The CSS3 selector is compatible with most of the selectors available in jquery.

1. Attribute Selector

The so-called property selector is the lookup of an element based on the value of a property of the specified name .

1 E[attr] : Find the specified e-tag with the attr attribute.

/*查找拥有style属性的里标签*/li[style] {}

2 E[attr=value] : Find the e-label with the specified attr attribute and the value of the property.

/*查找拥有class属性并且值为Red的li标签*/li[class=red] {}

3 E[attr*=value] : Find the e-label that owns the specified attr attribute and the value of the property contains (can be anywhere ) value

li[class*=red] {}

4 E[attr^=value] : Find the e-label that has the specified attr attribute and the property value begins with value

li[class^=red] {}

5 E[attr$=value] : Find the e-label that owns the specified attr attribute and the value of the property is open

li[class$=red] {}

2. Pseudo-Class Selector

Previously learned pseudo-class selector:,, a:hover , a:link a:activea:visited

Pseudo-Class selector: gets the structure pseudo-class of an element in relation to its parent element or sibling element's position.

2.1, Brother structure pseudo-class

+: Gets the adjacent element of the current element that satisfies the condition
~: Gets the sibling element of the current element that satisfies the condition

/*下面这句样式说明查找 ：添加了.first样式的标签的相邻的li元素要求：1.必须相邻。2.必须是指定类型的元素*/.first + li{    color: blue;}/*下面样式查找添加了.first样式的元素的所有兄弟li元素*/.first ~ li{    color: pink;}

2.2. Pseudo-class relative to parent element

2.2.1, finding the first element and the last element (no filtering)

E:first-child: Finds the first E element in the parent element of the E element.

E:last-child: Finds child elements of the last specified type in the parent element of the E element

/*下面这句样式查找：li的父元素中的第一个li元素1.相对于当前指定元素的父元素2.查找的类型必须是指定的类型*/li:first-child{  color: red;}li:last-child{  background-color: skyblue;}

Note: The search does not limit the type of elements found, that is, if the first element is not an e element, it cannot be found , and it will not filter out elements outside the e element when searching.

2.2.2, find first element and last element (with filter)

E:first-of-type: Finds the first E element in the parent element of the E element.

E:last-of-type: Finds child elements of the last specified type in the parent element of the E element

/*查找的时候限制类型  first-of-type*//*1.也是相对于父元素2.在查找的时候只会查找满足类型条件的元素，过渡掉其它类型的元素*/li:first-of-type{  color: red;}li:last-of-type{  color: orange;}

2.2.3, finding a single element or multiple elements (no filtering)

E:nth-child(index): Finds the element at the specified index position (1-based index)

E:nth-child(even): Find an element with an even location index

E:nth-child(odd): Find an element with an odd position index

Similar to the above, the following is calculated backwards:

E:nth-last-child(xxx)

li:nth-child(5){  background-color: lightblue;}li:nth-child(even){  background-color: blue;}li:nth-child(odd){  background-color: red;}

2.2.4, finding a single element or multiple elements (with filtering)

li:nth-of-type(even){  background-color: orange;}li:nth-of-type(odd){  background-color: pink;}

2.2.5, finding multiple elements at the beginning or end

No filtering: E:nth-child(n) : n follows a linear change, with values 0, 1, 2, 3, 4 、... However, when the argument is less than or equal to 0 o'clock, the selection is invalid.

There are filters:E:nth-of-type(n)

No filter reverse:E:nth-last-child(n)

There is a reverse filter:E:nth-last-of-type(n)

Example:

/*想为前面的5个元素添加样式*//*n:默认取值范围为0~子元素的长度.但是当n<=0时，选取无效0>>51>>4...4>>15>>0*/li:nth-of-type(-n+5){  font-size: 30px;}li:nth-last-of-type(-n+5){  font-size: 30px;}

Ps:n is a variety of forms: nth-child (2n), Nth-child (2n+1), Nth-child (-n+5), etc.

2.2.6, null: There is no content, not even a space

li:empty{  background-color: red;}

2.2.7, anchor chain connection pseudo-class

E:target: You can add a style to the anchor target element and call this pseudo-class style when the target element is triggered as the target of the current anchor.

/*h2为锚点，在被触发时将h2的字体改为红色*/h2:target{    color: red;}

3. Pseudo element Selector

A pseudo-element is called a pseudo-element because it is not a real DOM, but it can be viewed as a DOM element, and its usage is the same as the actual DOM element, but it does not appear in the DOM tree.

Since it is a pseudo-element, you cannot use JS to get it.

CSS has a series of pseudo-elements, such as,,, and ::before ::after so on, as ::first-line ::first-letter detailed in this article: Before and: use of after elements.

3.1, E::before,e::after

• is an inline element that needs to be converted into a block: display:block or it can be float:left/right used position .
• You must add content, even if you do not set the contents, or it content:"" will not work.
• E:after, E:before in the old version is pseudo-class, in the new version is a pseudo-element, because in the new version e:after, E:before will be automatically recognized as E::after, E::before, according to pseudo-elements to treat, so that the purpose is to do compatible processing.
• E::before: Defines the content and style defined by the content property before the contents of an element are inserted.
• E::after: Defines the content and style of the content property definition after the contents of an element are inserted.

Attention:

• IE6, IE7, and IE8 (weird mode quirks mode) do not support this pseudo-element
• CSS2 E:before or E:after, is a pseudo-class, and there is no concept of pseudo-elements, CSS3 the concept of pseudo-elements e::before and e::after, and belong to the pseudo-elements, pseudo-class no longer exist E:before or E: After pseudo-class

Example:

<!     DOCTYPE html>

3.2, E:first-letter

Select the first letter of the text (in English) or the text (Chinese)

/*设置首字下沉*/p::first-letter {  font-size: 40px;  float: left;}

3.3, E::first-line

Select the first line of text

PS: If set at the same time:: First-letter, then:: First-line cannot set the first letter or text (except the color).

3.4, E::selection

Sets the style of the selected text.

Note: You cannot change its size, but you can change the color.

p::selection {  background-color: orange;}

Learn the Web from scratch CSS3 (i) CSS3 overview, Selector