CSS selector property guide: id, class, and attribute selectors

CSS Selector Property Guide: id, class and attribute selectors

CSS (Cascading Style Sheets) is used to describe how elements on a web page are rendered and laid out of a language. In CSS, selectors are used to select specific HTML elements and then apply style rules.

This article will focus on three common selector attributes: id, class and attribute selector, and provide specific code examples.

1. id selector

The id selector is used to select elements with a specific id attribute, which needs to be unique in HTML. In CSS, the syntax for an id selector is to precede the selector name with a # symbol. The following is an example:

<div id="header">这是网页的页眉</div>

#header {
  background-color: blue;
  color: white;
}

The above code represents a div element with the id "header", whose background color is blue and the text color is white.

2. class selector

class selector is used to select elements with specific class attributes. One element can have multiple class attributes, and multiple elements can share the same class attribute. In CSS, the syntax for a class selector is to add the . symbol before the selector name. The following is an example:

<p class="highlight">这是一个高亮的段落</p>

.highlight {
  background-color: yellow;
  font-weight: bold;
}

The above code represents a p element with class "highlight". Its background color is yellow and the text is bold.

3. Attribute selector

The attribute selector is used to select elements with specific attributes, and can be selected based on the attribute value. In CSS, the syntax for attribute selectors comes in many forms. Here are a few examples:

• Select elements with specific attributes:

<a href="#">这是一个链接</a>

a[href] {
  color: blue;
}

The above code means to select all a elements with href attributes and change their text color Set to blue.

• Select elements with specific attributes and attribute values:

<input type="text" value="请输入用户名">

input[type="text"] {
  width: 200px;
}

The above code means to select all input elements whose type attribute is "text" and set their width is 200px.

• Select elements starting with a specific attribute value:

<img src="/static/imghwm/default1.png"  data-src="images/logo.png"  class="lazy" alt="Logo">
<img src="/static/imghwm/default1.png"  data-src="images/banner.jpg"  class="lazy" alt="Banner">

img[src^="images/"] {
  border: 1px solid gray;
}

The above code means to select all img elements whose src attribute value starts with "images/" and add them A gray border.

Summary:

By using id, class and attribute selectors, we can select elements on the web page more precisely and apply specific styles to them. In actual development, flexible use of these selectors can improve the reusability and maintainability of CSS.

The above is a brief introduction to the CSS selector property guide and provides corresponding code examples. I hope it will be helpful for everyone to understand and use CSS selectors!

The above is the detailed content of CSS selector property guide: id, class, and attribute selectors. For more information, please follow other related articles on the PHP Chinese website!