CSS属性选择器

iheyu

于 2019-12-04 16:19:46 发布

阅读量98

点赞数

分类专栏： html 文章标签： css 属性选择器

本文链接：https://blog.csdn.net/iheyu/article/details/103388714

版权

html 专栏收录该内容

54 篇文章 2 订阅

订阅专栏

1.属性选择器——>基本s[属性]

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器</title>
    <link rel="stylesheet" href="1.css">
    <!--把 1.css的样式引入到 当前的 3.html里面-->
</head>
<body>
    <div>div1
        <p>p2</p>
        <ul>
            <li>
                <p>p3</p>
            </li>
        </ul>
    </div>
    <p title="dudu">p1</p>
</body>
</html>

p[title] {
  background: green;
  color: red;
  font-size:50px;
}

2.属性选择器——>[属性=值]

<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器</title>
    <link rel="stylesheet" href="1.css">
    <!--把 1.css的样式引入到 当前的 3.html里面-->
</head>
<body>
    <div>div1
        <p>p2</p>
        <ul>
            <li>
                <p title="dudu2">p3</p>
                <!--html属性和值 CSS属性和值是一一对应的-->
            </li>
        </ul>
    </div>
    <p title="dudu">p1</p>
</body>
</html>

p[title=dudu2] {
  background: green;
  color: red;
  font-size:50px;
}

3.属性选择器——>[属性~=值](属性里面包含多个值，值与值之间用空格隔开)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器</title>
    <link rel="stylesheet" href="1.css">
    <!--把 1.css的样式引入到 当前的 3.html里面-->
</head>
<body>
    <div>div1
        <p>p2</p>
        <ul>
            <li>
                <p title="dudu2 yu">p3</p>
            </li>
        </ul>
    </div>
    <p title="dudu hang">p1</p>
    <!--只要在属性选择器title的值中 html与css有相同的值"dudu" css里面的效果才会生效-->
</body>
</html>

p[title~=dudu] {
  background: green;
  color: red;
  font-size:50px;
}

4.属性选择器——>[属性^=值](值是以^符号开始的)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器</title>
    <link rel="stylesheet" href="1.css">
    <!--把 1.css的样式引入到 当前的 3.html里面-->
</head>
<body>
    <div>div1
        <p>p2</p>
        <ul>
            <li>
                <p title="dudu2 yu">p3</p>
            </li>
        </ul>
    </div>
    <p title="dudu hang">p1</p>
</body>
</html>

p[title^=dudu] {
  background: green;
  color: red;
  font-size:50px;
}

5.属性选择器——>[属性$=值](值是以$符号结束的)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器</title>
    <link rel="stylesheet" href="1.css">
    <!--把 1.css的样式引入到 当前的 3.html里面-->
</head>
<body>
    <div>div1
        <p>p2</p>
        <ul>
            <li>
                <p title="dudu2 gg">p3</p>
            </li>
        </ul>
    </div>
    <p title="dudu gg">p1</p>
</body>
</html>

p[title$=gg] {
  background: green;
  color: red;
  font-size:50px;
}

iheyu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录