Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use the property selector of CSS

2025-01-15 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use CSS's attribute selector, which is very detailed and has a certain reference value. Friends who are interested must finish reading it!

Styles the HTML element with the specified attribute.

You can style HTML elements that have specified attributes, not just the class and id attributes.

Note: IE7 and IE8 support property selectors only when! DOCTYPE is specified. Attribute selection is not supported in IE6 and earlier versions.

Attribute selector

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

[title]

{

Color:red

}

Property and value selector

The following example styles all elements of the title= "W3School":

[title=hello]

{

Border:5pxsolidblue

}

Property and value Selector-multiple valu

The following example sets the style for all elements that contain the title attribute of the specified value. Applies to property values separated by spaces:

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

The following example sets the style for all elements with the lang attribute that contains the specified value. Applies to property values separated by hyphens:

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

Set the style of the form

The property selector is especially useful when styling a form without 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

}

The above is all the content of the article "how to use the property Selector of CSS". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report