Detailed explanation of CSS attribute selectors

Set styles for HTML elements with specified attributes. You can style HTML elements that have specified attributes, not just the class and id attributes. This article mainly introduces you to the relevant knowledge of CSS attribute selectors. Friends who are interested should take a look at it. I hope it can help you.

Note: IE7 and IE8 support attribute selectors only when !DOCTYPE is specified. In IE6 and lower, attribute selection is not supported.

Attribute Selector

The following example sets the style for all elements with the title attribute:

[title]
{
color:red;
}

Attribute and value selectors

The following example sets the style for all elements with title="W3School":

[title=W3School]
{
border:5px solid blue;
}

Attribute and value selectors - multiple values

The following example sets a style for all elements that contain a title attribute with a specified value. Applies to attribute values ​​separated by spaces:

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

The following example styles all elements with a lang attribute that contains the specified value. Applies to attribute values ​​separated by hyphens:

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

Styling the form

The attribute selector is used without This is especially useful when styling the form of class or id:

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

CSS Selector Reference Manual

Related recommendations:

css attribute selector - select elements based on the name attribute value of the html element

Read and write css attributes of HTML elements

jQuery setting CSS attributes example introduction_jquery

The above is the detailed content of Detailed explanation of CSS attribute selectors. For more information, please follow other related articles on the PHP Chinese website!