Mojoportal learning-Understanding CSS in article Translation

Sorry for the poor translation.

 

CSS Selector

Learn 2 things

CSS is easy to repeat several times until this concept is deeply rooted in the hearts of the people. This article will be helpful to you.

The two most important aspects of CSS are selector and rule.

The selector is used to select the object to be stylized. The rules in braces are as follows:

P {border: Solid Thin black ;}

Element selector:

P {border: Solid Thin black;} // select all paragraphs

Input [type = text] {border: Solid Thin black;} // Add Borders to all text boxes

Input [type = select] {border: Solid Thin black;} // Add Borders to all the drop-down menus

 

Div input [type = text] {border: Solid Thin black;} // select the text box at the specified position

Body {}-all body Elements

Div {}-All layer elements

H1 {}-All H1 elements. For example:

Div H2 {}-All H2 elements in a layer.

"Class and ID selectors class and ID Selector

These two selectors are the most common selectors.

For example, I have a layer, as shown below:

<Div class = "productwrapper">
Some additional markup about a product goes here
</Div>

. Productwrapper {border: Solid Thin black;} // specify a layer with the productwrapper Class Name

The ID selector is similar to an object.

<Div id = "divmyproduct">
Some additional markup about a product goes here
</Div>

 
# Divmyproduct {border: Solid Thin black ;}

In mojoportal and other content management systems, we generally do not use ID selectors because IDs are generated immediately by the system.

We can use the ID selector in layout. Master, which is not recommended in other places. The ID selector is not discussed below.

Class selector Discussion

You can apply multiple classes to one element.

Example:

<Div class = "panelwrapper survey">
Some additional markup produced by the survey features goes here
</Div>

This class has two class names separated by spaces.

. Panelwrapper {border: Solid Thin black ;}
. Survey {color: red ;}

Both styles will be applied to the previous Div.

In mojoportal, we use multiple classes of CSS names. If the survey control is loaded on the page, the DIV class name can be panelwrapper survery.

If the HTML content control is loaded on the page, the DIV class name can be panelwrapper htmlmodule. This means that we can use the. panelwrapper selector to apply the same style,

The other part uses different CSS styles.

. Settingrow input [type = text] {width: 300px ;}

Make all textbox contain the CSS class named settingrow and the width is PX.

If we want to set more details, we find that the class name of the layer is class = "panelwrapper survey"

So we made a more specific setting, as shown below:

. Survey. settingrow input [type = text] {width: 300px ;}

Now, our settings only work for the survey module.

The class selector does not care about the element types.

Div. Cool {} // layer element with the class name Cool

P. Cool {} // The section element of the class named Cool

The section element in the layer of the Div. Cool P {} class named Cool

Div. Cool P. Cool A {} // super join in the section named cool in the layer named Cool

Div. Cool P. Cool span a {}// the class name is cool, and the class name is cool in the Section, and the super connection in the span

"Descendant Selector

Li ul {} // All ul contained in Li

Ul ul {} // All ul contained in UL

Ul Li ul Li a {}// connection in the Li Element

You only need to include it in it, whether or not it is included in other elements.

"Attribute selectors attribute Selector

P [class = Cool] {}

Equivalent:

P. Cool {}

A [title] {color: green;} // set the color of the hyperlink with title to green.

A [href = "http://www.mojoportal.com"] {font-size: larger;} // the font of the specific connection

"Selecting children select a subset

Div> {}
You can use
 
Div A {}. If you want to set the connection directly contained under the DIV without any connection, write it as div> {}
 
 
"Selecting adjacent sibling Elements
 
H2 + P {margin-top: 2px ;}
 
Select only the section element on the right of the H2 element (that is, the H2 element exists on the left of the section element)
 
"Pseudo Selector
 
: Focus {} All elements with focus
 
: Hove {} elements passing by the mouse
 
Example:

A: link {color: # 6297bc ;}
A: visited {color: # 6297bc ;}
A: hover {color: #72a545 ;}
A: active {color: # 6297bc ;}

"Applies the same rules to more than one selector.
 
H1, H2, H3 {color: green ;}
 
Div. Cool ul a,. verycool p {}