Those CSS attribute selectors delayed by IE

There are many attribute selectors in CSS2, and in CSS3, many new and great attribute selectors have been added. Why attribute selectors were used less in the past, mainly because the lower version of IE browser is not friendly, but the current version is already very compatible, so let us use attribute selectors happily.

1. Attribute selector

Jingrui Youzhi

Second, the case

1. Select an image with an alt attribute.

img[alt]

2. Select the Submit button.

input[type=submit]{
	border:none;
	background-color:#F36;
	width:200px;
	padding:10px;
	color:#fff;
	cursor:pointer;}

3. Select objects whose class attribute contains the word "box".

<div class="boxbg">1</div>
<div class="bg1 box">2</div>
<div class="box bg2">3</div>

[class~=box]{
	background-color:#999;}

At this time, only the next two divs can be selected, because the box in the class attribute of the first div does not exist as an independent word.

4. Select the element whose class starts with list.

<ul>
        <li class="list-1">1</li>
        <li class="list2">2</li>
        <li class="list">3</li>
</ul>

[class|=list]{
	color:#F36;}

At this point, only the first and third li elements can be selected. The list here must be an independent word or a word with a hyphen "-" after the list.

5. Take case 4 as an example, but using this selector, you can select all elements starting with list.

[class^=list]{
	color:#F36;}

What starts here, whether it is an independent word, a word with a hyphen, or a word mixed with other characters, as long as it starts with list, it can be selected. Different from [class|=list]

6. Select all jpg images

img[src$=".jpg"]  /*这里必须有双引号，把.jpg引起来，或者使用转义字符：img[src$=\.jpg]*/

7. Select the link that contains jenreal in the path

<a href="http://www.jenreal.cn">赵老师web前端开发教学博客</a>
<a href="http://www.jenreal.cn/article/12.html">菁瑞优智</a>
<a href="http://www.jenreal.cn/article/5.html">菁瑞优智</a>

[href*=mrszhao]{
	font-weight:bold;}

For the inclusion at this time, no matter whether mrszhao is an independent word or there is content before and after, as long as there is a substring of mrszhao, it can be selected. Different from [class~=box]. The attribute selector mainly pays attention to two points:

1. Both [attribute|=value] and [attribute^=value] start with value, but one is an independent word and the other is a substring. Both [attribute~=value] and [attribute*=value] contain value, but one is an independent word and the other is a substring.

2. If there are ".", ":", "/" and other special characters in the attribute value, use "" double quotation marks, or use the escape character "\".

The author of the article: Mr. Zhao (Mr. Flying Fish) at the front end of Jingrui Youzhi H5

Those CSS attribute selectors delayed by IE

Guess you like