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

Editor to share with you how many kinds of css3 attribute selector, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Css3 attribute selector includes three kinds: 1, "E [att^ = value]" selector, select the tag named E, and the tag defines the att attribute, and the attribute value contains a substring prefixed with value; 2, "E [att$=value]" selector; 3, "E [att*=value]" selector.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

The attribute selector can select an element based on its attributes and attribute values. Three new property selectors have been added to CSS3: e [at ^ = value], E [att $= value] and E [att*=value], which we will describe in detail below.

E [att^ = value] property selector

The E [att^ = value] attribute selector selects a tag with the name E that defines the att attribute, and the att attribute value contains a substring prefixed with value. It is important to note that E can be omitted. If omitted, it means that any element that meets the criteria can be matched. For example, div [id ^ = section] means that the match contains the id attribute, and the value of the id attribute is a div element that begins with the "section" string.

The following example demonstrates the use of the E [at ^ = value] property selector, as shown below.

Application of the E [att^ = value] property selector p [id ^ = "one"] {color:pink; font-family: "Microsoft Acer"; font-size: 20px;} I often get up early to watch the sunrise. At that time, it was not yet dawn, it was very quiet, and there was only the sound of machines on board.

The sky is still light blue and the color is very light. In the twinkling of an eye, a red glow appeared on the horizon, slowly expanding its scope and strengthening its bright light. I knew the sun was going to rise from the horizon, so I couldn't take my eyes off there.

Sure enough, after a while, a small half of the sun's face appeared in that place. The red was really red, but there was no bright light. The sun seems to be under a heavy load step by step, slowly efforts to rise, finally, finally broke through the clouds, completely jumped out of the sea, the color is very lovely. In an instant, the dark red round thing suddenly emitted an eye-catching light, which made people's eyes ache, and the clouds next to it suddenly shone.

Sometimes the sun walks into the clouds, but its light comes down from the clouds and shines directly onto the water. At this time, it is not easy to tell where the water is and where the sky is, because all I see is a brilliant light.

In the above code, the [at ^ = value] selector "p [id ^ =" one "]" is used. As long as the value of the id attribute in the p element begins with the "one" string, it is selected to render a special text effect.

E [att$=value] attribute selector

The E [att$=value] attribute selector selects a tag with the name E that defines the att attribute, and the value of the att attribute contains a substring with the suffix value. Like the E [att^ = value] selector, the E element can be omitted, which means that any element that meets the criteria can be matched. For example, div [id$=section] indicates that the match contains the id attribute, and the value of the id attribute is an div element that ends with the "section" string.

The following example demonstrates the use of the E [att $= value] property selector, as shown below.

The application of E [att$=value] attribute selector p [id$= "main"] {color: # 0cf; font-family: "Song style"; font-size: 20px;} hope, hope, the east wind is coming, the pace of spring is approaching.

The grass came out of the earth secretly, tender and green. In the garden, in the fields, look, there are a lot of them. Sit, lie down, roll twice, kick a few balls, run a few races, catch a few hide-and-seek. The wind is light and quiet, and the grass is soft.

Peach trees, apricot trees, pear trees, you do not let me, I do not let you, are full of flowers to drive the children. Red is like fire, pink is like Xia, and white is like snow. Flowers with sweet taste, closed eyes, the tree seems to be full of peaches, apricots, pears! Hundreds of bees are buzzing after spending hundreds of them.

"blowing noodles is not cold willow wind", good, like a mother's hand touching you. The wind brings the smell of newly turned earth, mixed with the smell of grass, as well as the fragrance of all kinds of flowers, all brewing in the slightly moist air. The bird placed its nest among the flowers and leaves and cheered up.

In the above code, the [att$=value] selector "p [id $=" main "]" is used. As long as the value of the id attribute in the p element ends with the "main" string, it is selected to render a special text effect.

E [att*=value] attribute selector

The E [att*=value] selector is used to select a tag with the name E, which defines the att attribute, and the value of the att attribute contains a value substring. This selector is the same as the first two selectors, the E element can also be omitted, if omitted, it means that any element that meets the criteria can be matched. For example, div [id*=section] means to match a div element that contains an id attribute, and the value of the id attribute contains a "section" string.

The following example demonstrates the use of the E [att * = value] property selector, as shown below.

The use of E [att*=value] attribute selector p [id*= "demo"] {color:#0ca; font-family: "Song style"; font-size: 20px;} We get the shadow of the lights on the Qinhuai River when it is a midsummer night in April.

After eating a plate of dried shredded bean curd in the tea shop, after two pancakes, so much so that I went to the painting visit parked in front of the Confucius Temple, and lay lazily on the rattan chair. It's so steamy in the south of the Yangtze River, it's still hot. "Let's set sail!" The oars sounded.

The small lantern boat rippled in the river for the first time; to me, the scene was rather hazy and the taste was strange and shy. I will mistake it for a mountain pond of seven miles, but the open windows and holes in the river room reflect the exquisite column stem in the painting, so that I suddenly save where I am …...

It was early sunset, and the river was made up as a touch of rouge. Was it influenced by the sisters of Qingxi? Or do you get the residual fat on their faces? The silent river beat it with its oars, but there was no word at last. The dense embroidery hates the old age, has been melted in the heart of Liubo like honey, even sobbing will disrelish it too much, not to mention mourning.

In the above code, the [att*=value] selector "p [id * =" demo "]" is used. As long as the value of the id attribute in the p element contains the "demo" string, it is selected to render a special text effect.

The above is all the content of the article "how many css3 property selectors are there?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more 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.