Html+css Xiao Kee

The ID selector can specify a specific style for an HTML element that is labeled with a specific ID.

The ID selector is defined as "#".

Note: The id attribute can only appear once in each HTML document.

In modern layouts, ID selectors are often used to establish derived selectors.

#sidebar p {
Font-style:italic;
Text-align:right;
Margin-top:0.5em;
}
The above style will only apply to paragraphs that appear in an element with an ID of sidebar.

This element is probably a div or a table cell, although it may also be a table
Blocks or other block-level elements . It can even be an inline element , such as a <em></em>
or <span>, but such usage is illegal because it is not possible to inline
embedded in Element <span>

A selector, multiple usages
Even if an element labeled Sidebar can only appear once in the document, the ID selector acts as a

A derived selector can also be used many times:

#sidebar p {
Font-style:italic;
Text-align:right;
Margin-top:0.5em;
}

#sidebar H2 {
Font-size:1em;
Font-weight:normal;
Font-style:italic;
margin:0;
line-height:1.5;
Text-align:right;
}

The ID selector can work independently even if it is not used to create a derived selector:

#sidebar {
border:1px dotted #000;
padding:10px;
}

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/54/21/wKioL1R5LcWhtI0fAAAPGQn4Qds458.jpg "/>

In CSS, the class selector is displayed with a dot number :
. Center {Text-align:center}

Note: The first character of the class name cannot use a number! It doesn't work in Mozilla or Firefox.


As with the ID, class can also be used as a derived selector :
. Fancy TD {
Color: #f60;
Background: #666;
}
In the above example, a table cell inside a larger element with the class name fancy will be displayed with a gray background
Orange text. (a larger element called fancy may be a table or div)


Elements can also be selected based on their classes :
td.fancy {
Color: #f60;
Background: #666;
}

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/54/23/wKiom1R5LT_zeYuRAAAPGQn4Qds394.jpg "/>

You can set the style for the HTML element that owns the specified property, not just the class and ID properties.

Note: Only in the rules! DOCTYPE, IE7 and IE8 only support property selectors. In IE6 and lower versions, attribute selection is not supported.


Property Selector
The following example sets the style for all elements with the title property:
[Title]
{
color:red;
}


Properties and Value selectors
The following example sets the style for all elements of title= "W3school":
[Title=w3school]
{
BORDER:5PX solid blue;
}


Properties and value selectors-multiple values
The following example sets the style for all elements that contain the title property of the specified value. Applies to property values separated by spaces:
[Title~=hello] {color:red;}

The property selector is especially useful when styling a form that does not have a class or ID

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/54/21/wKioL1R5LcXwM1t7AAAPGYncjvs556.jpg "/>

Html+css Xiao Kee