CSS-选择器7-属性

CSS选择器-系列文章

1、CSS属性选择器

选择器	例子	例子描述	CSS
[attribute]	[target]	选择带有 target 属性所有元素。	2
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。	2
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。注意是以单词为单位的，不能匹配单词的一半	2
[attribute1=value]	[lang1=en]	选择 lang 属性值以 "en" 开头的所有元素。竖线等号 注意是以单词为单位的后面紧跟连接符	2
[attribute^=value]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每个 a 元素。	3
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有 a元素。	3
[attribute*=value]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每个 a 元素。	3

2、CSS2属性效果演示

    
    
    


   
   
helloworld
   
   
hello world
   
   
hello-world
   
   
testinfo
   
   
test info
   
   
test-info

运行效果：

image.png

3、CSS3属性效果演示

    
    
    


    
div1
    
div2
    
div3
    
div4
    
myDiv
    
divP

运行效果

image.png

CSS选择器-系列文章
CSS-选择器8-A与input常用伪类