Home >Web Front-end >CSS Tutorial >Detailed explanation of the use of CSS attribute selectors (css introductory tutorial)

Detailed explanation of the use of CSS attribute selectors (css introductory tutorial)

(*-*)浩Original: 2019-11-26 13:38:133092browse

Set styles for HTML elements with specified attributes. (Recommended learning: CSS Getting Started Tutorial)

You can set styles for HTML elements with specified attributes, not just class and id attributes.

Note: IE7 and IE8 only support attribute selectors 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 selector

The following example styles all elements with title="W3School":

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

Attribute and value selectors - multiple values

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

[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; }

Setting the style of the form

The attribute selector is special when styling the form without a class or id Useful:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">

</form>
</body>
</html>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What does the CSS class selector look like (code)Next article：What does the CSS class selector look like (code)

See more

Detailed explanation of the use of CSS attribute selectors (css introductory tutorial)

Related articles