Detailed explanation of the use of CSS attribute selectors (css introductory tutorial)-CSS Tutorial-php.cn

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

(*-*)浩

Release： 2019-11-26 13:38:13

Original

3045 people have browsed it

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

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

Copy after login

Attribute and value selector

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

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

Copy after login

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

Copy after login

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

Copy after login

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>

Copy after login

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!