CSS-选择器7-属性

作者: Java小工匠 | 来源:发表于2017-06-11 12:09 被阅读0次

CSS-选择器7-属性
CSS-属性&&选择器
00.CSS基础知识回顾
选择器
html5选择器
HTML5-Day3
css选择器
CSS：选择器、继承、权重、文本标签、列表、单位、颜色
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属性效果演示

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS2属性选择器</title>
    <style type="text/css">
        [title~="hello"]{
            color: red;
        }
        [title|="test"]{
            border: 1px solid blue;
            width: 100px;
        }
    </style>
</head>
<body>
   <!--不能匹配单词的一部分-->
   <div title="helloworld">helloworld</div>
   <!--可以匹配-->
   <div title="hello world">hello world</div>
   <!--不能匹配单词的一部分-->
   <div title="hello-world">hello-world</div>
   <!--不能匹配-->
   <div title="testinfo">testinfo</div>
   <!--不能匹配-->
   <div title="test info">test info</div>
   <!--可以能匹配-->
   <div title="test-info">test-info</div>
</body>
</html>

运行效果：

image.png

3、CSS3属性效果演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3属性选择器</title>
    <style type="text/css">
        /*选择class属性以div开始的元素*/
       [class^=div]{
            width: 200px;
            border: 1px solid red;
            margin: 5px;
        }
        /*选择class属性以div开始的元素*/
        [class$=div]{
            border: 1px solid blue;
            width: 300px;
        }
        /*选择class属性包含div字符的元素*/
        [class*=div]{
            color: red;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <div class="div4">div4</div>
    <div class="mydiv">myDiv</div>
    <p class="divP">divP</p>
</body>
</html>

运行效果