CSS Selector Description_Basic Tutorial-CSS Tutorial-php.cn

CSS Selector Description_Basic Tutorial

WBOY

Release： 2016-05-16 12:08:11

Original

1670 people have browsed it

1. Type selector
body
{
font-size:12px;
}

{
color:blue;
}
Refers to the web page The existing tag type in the tag is used as the selector of the name, as shown above: the size of all text within the body tag is 12px; the color of the text within the paragraph is blue.
2. Group selector
h4,p,span
{
font-size:12px;
}
Indicates that all the text in the h4, p, span tags on the page are 12px size, that is, specify the same style for a group of objects, separated by commas between each tag.
3. Contain the selector
div p
{
font-weight:bold;
}
It means that the text in the p tag inside the div tag is bold. This is An inclusion relationship, each tag is separated by a space, and can be multi-level inclusion.
IV. id and class selectors
id is a style definition for the only element in the page. This style is only used once in the page, that is, the id is not repeated

#myDiv
{
font-size:12px;
}
Class defines a common or frequently used style, a style If it needs to appear multiple times on a page, you can specify the same class for different tags, as shown below: the fonts in the div and p tags are all blue

div>

.red
{
color:blue;
}
5. Combination selectors
Use id or class, and also use tags to combine
h1 #cont
{
}
Represents the h1 tag with id cont
h1 .cont
{
}
Indicates all h1 tags with class cont
6. Pseudo-class selector
Commonly used a tag
a:link
{
}
a:hover
{
}
a:visited
{
}
7. Wildcard selector
*
{
color:blue;
}
The font representing all objects is blue.