In this note, tag = element

The selector

Ordinary selector

The selector describe
Tag name {} Selects all elements of the tag name
.className{} selectclassAttribute values forclassNameAll the elements of
#idName{} selectidAttribute values foridNameThe only element of
Selector 1, selector 2, selector N{} Selector grouping: Select elements corresponding to multiple selectors at the same time
* {} Wildcard selector: Selects all elements of a web page
Selector 1 selector 2 selector N{} Intersection (compound) selectors: Select elements that satisfy multiple selectors
Ancestor element Descendant element {} Descendant element selector: Selects all specified descendant elements of the ancestor element, including descendants
Parent element > child element {} Child element selector: Selects all specified child elements of the parent element, including children and no grandchildren,IE6The following browsers do not support it

Pseudo class selector

  • Selector: hover {}
    • The style of the mouse hover over the element
    • IE6Does not support<a>Labels other than labels are used
  • Selector: active {}
    • The style of the element when the mouse clicks
    • 6 is not supported<a>Labels other than labels are used
  • Selector: the link {}
    • The style of the element is not accessed
    • Generally used only<a>Hyperlink tag
  • Selector: visited {}
    • The style of the element after access (font color only)
    • Generally used only<a>Hyperlink tag
  • Selector: focus {}
    • The style of the element when it gets focus
  • Selector: before {}
    • Specifies the style of the element before specifying it
  • Selector: after {}
    • The style of an element when specified
    • IE6Does not support
  • Selector: : selection {}
    • Note the double colon
  • Selector: : - moz - selection {}
    • FireFoxspecial
    • Styles the selected content
  • Selector: first - letter {}
    • The style of the first letter of the label content
    • Note: Not underline
  • Selector: first - line {}
    • The style of the first line of the tag content
  • Selector: before {}
    • General andcontentProperty to set content for the previous position of the element, which cannot be selected
  • Selector: after {}
    • General andcontentProperty to set content that cannot be selected for positions after the element

Property selector

  • Tag name [Attribute name]{}
    • Selects all elements that have the attribute name

Example: The title property:

The title value serves as the prompt text that appears when the mouse hovers over the element

​ p[title]:

Select all

elements that have the title attribute set

  • Tag name [Attribute name =some]{}
    • Selects all elements that have the attribute name and value some

Ex. : p/title = ‘hello’

Select all

elements that have the title attribute set and whose value is ‘hello’

  • Tag name [Attribute name ^=some]{}
    • Select to have the property name and the property valuesomeIs for all elements starting with
  • $=some {}
    • Select to have the property name and the property valuesomeIs all elements at the end
  • Tag name [Attribute name *=some]{}
    • Select has the property name and the property value containssomeAll elements of

Pseudo-classes of child elements

Internet Explorer 8, Internet Explorer 6 and below are not supported

  • (Parent >) Child :first-child{}

    Indicates that selectors can be used in combination

    Select the first (positional) child of the parent element

  • (Parent >) Last-child {}

    Selects the last (positional) child of the parent element

  • Child elements: the NTH - child (num) {}

    Select the num (positional) child of the parent element

    The num parameter is usually a number

    Num Special value:

    Even: Selects all the even (positional) children

    Odd: Selects all the odd-th (positional) child elements

  • Child elements: first - of - type {}

    Selects the first child of all that child element type of the parent element

  • Child elements: the last - of - type {}

    Selects the last child of the child type of all the parent elements

  • Child elements: the NTH - of - type (num) {}

    Selects all the num child of the child element type of the parent element

    Go to the first X elements num=-n+X

  • Child elements: the NTH - last - of - type (num) {}

    Same as above, just counting backwards

Sibling element selector

  • Element 1+ element 2{}

    You can pick element 2 right after element 1

    Element 1 and element 2 are siblings of each other

  • Element 1~ element 2{}

    You can pick all elements 2 after element 1

    Element 1 and element 2 are siblings of each other

No pseudo class

  • Removes elements from selected elements

  • Selector 1:not(selector 2){}

Removes elements in selector 1 that meet the criteria for selector 2

Selector priority

When using different selectors, select the same element and set the same style, the preference of the selector determines the display effect.

Priority rules:

Inline style priority 1000

The id selector priority is 100

Classes and pseudo-classes have priority 10

Element selector priority 1

The wildcard selector priority is 0

Inherited style priorities have no precedence

You can add one at the end of the style! Important This style will be given the highest priority, above all of the above, but should be avoided in development and not easily modified.

When a selector contains multiple selectors, the priorities of the multiple selectors are added for comparison.

Note: The selector priority calculation does not exceed its maximum order of magnitude

For example, the highest priority 10 in the selector does not add up to more than 99

Note: If the priority of the selectors is the same, the styles set relatively later will be displayed

Note: The priority of union selectors is calculated separately

The priority of the pseudo class

  • :link

  • :visited

  • :hover

  • :active

Same priority

But follow the above order, otherwise overwrite will fail.

Style inheritance

<div style=' '>
	<p></p>
</div>
Copy the code

The p tag inherits some basic div styles, including background, border, and position.

CSS properties

display

  • none

    • Does not display the element, does not occupy the position

  • inline

    • Makes an element an inline element

  • block

    • Turn an element into a block element

  • inline-block

    • Turn an element into an inline block element (you can set the width and height without monopolizing a row)

visibility

  • visible

    • Default value visible

  • hidden

    • Hide but occupy position

overflow

The document flow

By default, all elements are in the document flow.

  • Block elements:
    • An exclusive row, arranged from top to bottom, with a width equal to the width of the parent element and a height separated by the height of the content
  • Inline element
    • Take up only the width and length of the content, arranged from left to right

Handles overflow of child elements within parent elements

  • visible

    • The default value is not processed and overflows

  • hidden

    • The overflow will be hidden

  • scroll

    • The scrollbar is added regardless of overflow

  • auto

    • Add scroll bars in the direction of the overflow

float

  • none

    • By default, elements are arranged in the document stream

  • left

    • Element leaves the document flow and floats to the left (upper left)

  • right

    • Element leaves the document flow and floats to the right (top right)

The floating element

  1. The float stops when it hits the border of the parent element
  2. A floating element does not exceed its siblings, up to one side
  3. Floating elements do not overwrite text within elements in the document flow
  4. After the block element floats, the width and height are stretched by the content
  5. After the inline element is floated, the width and height can be styled

clear

Can be used to clarify the impact of other floating elements on the current element

  • none

    • The default value

  • left

    • Make clear how the floating element on the left affects the current element

  • right

    • Understand the impact of the floating element on the current element

  • both

    • Clear the impact of the elements on the current element (clear the floating element that has the most impact on the current element)

position

Positioning allows you to place elements arbitrarily

  • static

    • Default, element not positioned (not enabled)

  • relative

    • Turn on element relative positioning

  • absolute

    • Enable absolute positioning of elements

  • fixed

    • Open fixed positioning of elements (also a type of absolute positioning)

relative

  1. If you do not set the offset, the element will not change. You can use left, right, top, and bottom to set the offset

  2. Relative positioning offsets an element relative to its original position in the document flow

  3. Relative positioning does not deviate from the document flow, similar to an out-of-body experience

  4. Relative positioning raises the element up a level to override the document flow element

  5. Relative positioning does not change the nature of the element, block is still block, inline is still inline

absolute

  1. Absolute positioning is out of the document flow

  2. Element positions do not change without setting offsets

  3. The location of the ancestor element relative to the nearest one that turned on the location

  4. Absolute positioning raises the element up a level to override the document flow element

  5. Absolute positioning changes the nature of elements so that they become block elements

fixed

Same as above 1245

  1. Always positioned relative to the browser, starting at the top left corner of the page

  2. No longer hidden as scroll bars move (evil ads)

Internet Explorer 6 does not support fixed positioning

If the element hierarchy is the same after positioning is enabled, the structure overwrites the element below it

z-index

A positive integer represents the hierarchy

Elements that do not have positioning enabled cannot use z-index

No parent element can be higher up the hierarchy than a child element

The higher the level, the higher the priority

opacity

Sets the transparency of the element

A value between 0 and 1

0: fully transparent

1: opaque

Internet Explorer 8 and the following are incompatible

Filter :alpha(opacity= percentage)

There is a bug in IE Tester that causes IE6 to fail to display

Table style

  • Border – spacing attributes

    Adjust the distance between table borders and cells

    XXpx

  • Border – the collapse attribute

    You can adjust table borders and cell border merging

    collapse

    After border merging is set, the border-spacing property is automatically invalidated

BFC

Block Formatting Context (not supported in IE6 and below)

BFC This attribute can be turned on or off. The default value is off.

When the BFC attribute of an element is enabled, the element has the following properties:

  1. The vertical margin of the parent element does not overlap the child element

  2. Elements with BFC enabled are not overwritten by floating elements

  3. Elements that enable BFC can contain floating child elements

Enable the BFC method

  1. Float the element ———— to spread the parent element, but the parent element loses width, but the lower element moves up

  2. Set element absolute positioning ———— ditto

  3. Setting the element to line-block———— causes the width to be lost

  4. Set element overflow to non-visible ———— with minimal side effects

    It is not supported in IE6, but hasLayout hiding properties can be turned on

Open means

1. Zoom :1 Indicates the zoom factor

2. The parent element opens automatically after setting the width

The styling

Height collapse problem

In the document flow, the child element expands the height of the parent element, but when the child element is set to float, it causes the child element to drop out of the document flow, and the height of the parent element collapses, causing the elements below the parent element to move up, resulting in a chaotic page layout.

  1. Enable BFC or hasLayout

  2. Set Overflow to non-visible

  3. Using the Clear attribute

  4. Add a block element via the After pseudo-class and set the clear property

    .clearfix:after{
    content:"";
    display:block;A
    clear:both;
}
Copy the code

    Advantages: No redundant structure is added

Margin overlap between parent and child elements

Description: If the top border of the child element box2 overlapped with the top border of the parent element box1, the margin-top setting for the child element is passed directly to the parent element

The solution

.box1:before{
	content:"";
	display:table;
}
Copy the code

To sum up, the code can be integrated as

.clearfix:before,.clearfix:after{
    content:"";
    display:table;
    clear:both;
}
.clearfix{// Compatible with IE6 zoom:1;
}
Copy the code

Hack

In some cases, we can use CSS hacks to solve the problem of special code that only needs to be executed in certain browsers and not in other browsers

A CSS Hack is actually a special piece of code that is recognized in some browsers and not in others, a way of setting up special code for some browsers

Conditions hack

This will only be useful for IE10 or below, other browsers will only use it as a comment.

<! --[if IE6]> // indicates that the following code will only execute HTML code blocks in IE6 <! [endif]-->
Copy the code
<! --[if LTE IE6]> // indicates that the following code will only be executed in IE6 and below. [endif]-->
Copy the code

Universal grammar

	<! --[if keyword IE version]> HTML code block <! [endif]-->
Copy the code

keywords

  1. empty

    Is it equal to ==

  2. gt

    Greater than Greater than the version

  3. gte

    Greater than or equal Greater than or equal to the version

  4. lt

    Less than Less than the version

  5. lte

    Less than or equal Less than or equal to the version

  6. !

    Not, equivalent to! =

Attribute hack

Hack a CSS property

grammar

Selector {_ Attribute name: attribute value; * Attribute name: attribute value; // Indicates that the style change is only recognized in IE7 and below0; } selector hack: *HTML is only recognized in IE8 and above. Selector {} // This selector will only be recognized by IE6Copy the code

Web page icon

  1. First turn on thefavicon.icoPut the icon in the root directory.
  2. againhtmlInside,headIntroduce code between.

<link rel = "shortcut icon" href = "favicon.ico" type = "image/x-icon" />

Convert images to ICO icon format at www.bitbug.net

SEO(Search Engine Optimization)

Label optimization

  • Title: Baidu within 28 Chinese characters, Google within 35 Chinese characters

  • Description: Within 120 Chinese characters

    <meta name = "description" content =" description" />

  • Keywords:

    <meta name = "keywords" content =" keywords" />

Logo optimization

The logo begins with an H1 tag, which is intended to raise rights and tell search engines that the location is important.

There is a link in H1, which can be returned to the home page, and a background picture of the size and logo should be connected. · Text (website name) should be placed in the link, in order to include us in the search engine. But the text should not be displayed.

Font-size: 0; I can’t see the text.

Finally give the link a title, so that the mouse over the logo, you can see the prompt text

The fonts icon

  1. www.iconfont.cn/ or https://ic.

  2. Place the Fonts folder in the root directory

  3. Create a new font @font-face

  4. Copy the required structure in demo.html

  5. Add in the class where you want to add the font icon

Append font icon

  1. Import selection.json from the original download package to the download site

  2. Select new ICONS

  3. download