Some of the most basic selectors in CSS

Source: Internet
Author: User

There are four different selectors in CSS


① class selector, also known as class selector
. class Selector
{
Property Name: property value;
...
}
/* Class Selector */
Ss
{

Font-weight:bold;
font-size:16px;
}
②id Selector
#id选择器名
{
Property Name: property value;
}
/*id Selector */
#id1
{

font-size:40px;
}
③html element Selector
HTML element name
{
Property Name: property value;
}
④ Wildcard Selector

Retrieves or sets an outer patch of the object. The default value is 0 0.
If you provide all four parameter values, the upper-right-bottom-left order is used for four-sided. If only one is provided, it will be used for all four sides. If two is provided, the first one is for top-down, and the second is for left-right. If three is provided, the first one is used on, the second one is for left-right, and the third is for the next.
*{
margin-top:0px; top margin is 0
margin-left:0px; left margin is 0
margin:10px 30px 20px 40px
Experienced programmers, as follows
margin:0px;
padding:0px;
}
Wildcard Selector
The selector can use all HTML elements, but it has the lowest priority
*{
Property Name: property value;
... ...
}


Simply put, selectors are created in CSS and used in Web pages (html,jsp,php,asp.net).
Priority of four selectors
ID selector >class Selector >html selector > wildcard Selector

Parent-Child selector is a combination of four selectors
/ * Parent/Child selector * /
Modify the span under ID1 (spaces must be added in the middle)
#id1 span{
color:red;
Font-style:italic;
}
#id1 span span{
Color:green;
}
#id1 span span a{
Color:blue;
}
through the above summary
① Parent-child selectors can have multiple levels (but not more than three layers in real-world development)
② Parent-child selectors have a strict hierarchical relationship
③ Parent-child selectors are not limited to what type of selector
can be the ID selector class selector ....
#id1 span span a
. S1 #id span
div #id. S2
1, ID selector and class selector can have parent-child selector
2. An element can have both an ID selector and a class selector
3. The ID selector has higher precedence than class selector
4, an element has a maximum ID selector, but can have more than one class selector
when an element is decorated by more than one class selector, each class selector is separated by a space
use the following method
< element class= "class selector 1 class selector 2"/>html section
when two class selectors collide, the class selector that is written in the CSS file will prevail
5, in the CSS file if there are more than one class/ID selectors, they all have the same part, we can put the same CSS style together
/ * The public part of each class selector is extracted separately, and the benefit is that you can reduce the redundancy of the CSS file * /
extract the same parts from each selector, write one separately, and separate the selectors with commas
6, the CSS file itself will be downloaded from the server to local browser, to display the effect

Some of the most basic selectors in CSS

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.