css3-属性选择器

作者: AssertDo | 来源:发表于2019-08-26 12:45 被阅读0次

css3-属性选择器
css3-变形
00.CSS基础知识回顾
选择器
html5选择器
HTML5-Day3
css选择器
CSS：选择器、继承、权重、文本标签、列表、单位、颜色
css学习笔记
第二章始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .red{
            color: red;
        }
        .blue{
            color: blue;
        }
        .darkred{
            color: darkred;
        }
        .blueviolet{
            color:blueviolet;
        }
        /*属性选择器：属性是相对于标签而言。所谓属性选择器就是根据指定名称的属性的值来查找元素*/
        /*1.E[attr]:查找指定的拥有attr属性的E标签。如查找拥有style属性的li标签*/
        li[style]{
            text-decoration: underline;
        }

        /*2.E[attr=value]:查找拥有指定的Attr属性并且属性值为value的E标签。如想查找拥有class属性并且值为Red的li标签   =是严格匹配*/
        li[class=red]{
            /*font-size: 30px;*/
        }
        /*3.E[attr*=value]:查找拥有指定的attr属性并且属性值中包含(可以在任意位置)value的E标签*/
        li[class*=red]{
            /*font-size: 30px;*/
        }
        /*4.E[attr^=value]:查找拥有指定的attr属性并且属性值以value开头的E标签*/
        li[class^=blue]{
            font-size: 30px;
        }
        /*5.E[attr$=value]:查找拥有指定的attr属性并且属性值以value开结束的E标签*/
        li[class$=blue]{
            /*font-size: 30px;*/
        }
    </style>
</head>
<body>
<p style="">看看能不能也添加样式</p>
<ol>
    <li class="red" style="">咔咔咔咔咔咔扩</li>
    <li class="blue">嘎嘎嘎嘎嘎过过</li>
    <li class="darkred" style="">得得得得额鹅鹅鹅饿</li>
    <li class="blue">发发发发发发</li>
    <li class="red">法师法师法师法师法师的飞洒发</li>
    <li class="blueviolet">哈哈哈哈哈哈哈哈</li>
</ol>
</body>
</html>