Detailed explanation of CSS selector properties: id, class and attribute selectors

CSS (Cascading Style Sheets) is a markup language used to define web page styles. It defines web page layout, colors, fonts and other visual effects. In CSS, a selector is a pattern used to locate and select HTML elements to be styled. Selector attributes include id, class, attribute selector, etc., which represent different selection methods. This article explains these three selector properties in detail and provides specific code examples.

1. id selector

The id selector selects elements by assigning a unique id attribute to a specific element. The value of the id attribute must be unique within the HTML document. In CSS, the id selector uses the # symbol plus the value of the id attribute to select elements.

For example, add the id attribute to a <div> element and use the id selector to style it: <pre class='brush:php;toolbar:false;'>&lt;div id=&quot;myDiv&quot;&gt;这是一个示例&lt;/div&gt;</pre><pre class='brush:php;toolbar:false;'>#myDiv { color: red; font-size: 16px; }</pre><p>The above code demonstrates the use of an id selector Example. The id selector <code>#myDiv selects the <div> element with an id attribute value of "myDiv" and sets its text color to red and font size to 16 pixels. By specifying a unique id attribute value, we can select and style specific elements. <h2 id="class-selector">2. class selector</h2> <p>The class selector selects elements by assigning the same class name to one or more elements. In CSS, the class selector uses the <code>. symbol followed by the class name to select elements.

For example, add the same class name to two <p></p> elements and use the class selector to style them:

<p class="myClass">这是第一个段落</p>
<p class="myClass">这是第二个段落</p>

.myClass {
  background-color: yellow;
  padding: 10px;
}

The above code demonstrates a class Example of selector. The class selector .myClass will select all elements with the class name "myClass" and set their background color to yellow, adding 10 pixels of padding. By specifying the same class name, we can select a group of elements and style them uniformly.

3. Attribute Selector

Attribute selector selects elements by selecting elements with a specific attribute or attribute value. In CSS, attribute selectors use square brackets [] followed by the attribute name (optional: you can also add the attribute value) to select elements.

For example, to select an <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Detailed explanation of CSS selector properties: id, class and attribute selectors" > element with a title attribute:

<img src="/static/imghwm/default1.png"  data-src="image.jpg"  class="lazy" alt="图片" title="这是一个图片">

img[title] {
  border: 1px solid black;
}

The above code demonstrates an example of an attribute selector. The attribute selector img[title] selects all <img alt="Detailed explanation of CSS selector properties: id, class and attribute selectors" > elements that have a title attribute and adds a black 1-pixel border to them. We can also further specify specific attribute values, such as img[title="This is a picture"], so that only those with the title attribute value of "This is a picture" will be selected element.

To sum up, id, class and attribute selector are three commonly used CSS selector properties. By using them appropriately, we can select and style specific elements in web pages. Hopefully the specific code examples provided in this article will help you better understand and use these selector properties. If you have more questions about CSS selectors, you can check out the relevant documentation or tutorials for further in-depth learning and mastery.