What are css brackets

css brackets are attribute selectors. HTML element styles with specific attributes are not just class and id; and IE7 and IE8 need to declare "!DOCTYPE" to support attribute selectors, while IE6 and lower versions Attribute selectors are not supported.

The operating environment of this tutorial: Windows 7 system, CSS3 version, Dell G3 computer.

Recommended: css video tutorial

What are css brackets?

css brackets are attribute selectors.

HTML element styles with specific attributes are not just class and id.

Note: IE7 and IE8 need to declare!DOCTYPE to support attribute selectors! IE6 and lower versions do not support attribute selectors.

Attribute Selector

The following example turns all elements containing the title blue:

Example

[title]
{
    color:blue;
}

Attributes and values Selector

The following example changes the border style of the title title='runoob' element:

Example

[title=htmlcn]
{
    border:5px solid green;
}

Selector for attributes and values ​​- multi-value

The following is an example of an element style that contains a title attribute with a specified value. Use (~) to separate the attribute and value:

Example

[title~=hello] { color:blue; }

The following is an element with a lang attribute that contains a specified value. Example of style, use (|) to separate attributes and values:

Example

[lang|=en] { color:blue; }

Form style

Attribute selector style does not need to use the form of class or id:

Example

input[type="text"]
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}
input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
}

The above is the detailed content of What are css brackets. For more information, please follow other related articles on the PHP Chinese website!