CSS属性选择器——前端复习记录

之前学的时候老师没怎么讲,记录一下。

作用:属性选择器可以根据元素的属性及属性值来选择元素。
CSS属性选择器——前端复习记录_第1张图片·实际使用情况:


<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>属性选择器测试title>
    <style type="text/css">

        dt[class]{
      
            font-size:30px;
        }

        dt[class = "css1"] {
      
            color: green
        }

        dt[class |= "css"] {
      
            color: blue
        }

        dt[class ~= "css2"] {
      
            color: red
        }

        dt[class ^= "css3"] {
      
            color: yellow
        }

        dt[class $= "css3"] {
      
            color: cyan
        }

        dt[class *= "css4"] {
      
            color: cyan
        }

    style>
head>

<body>
<h1>属性选择器测试h1>
<dl>
<dt class>由于本页面所有dt元素都包含属性"class",因此dt[class]对本页面所有dt元素起作用,字体均为30px。dt>
<dt class="css1">我是0dt>
<dd>·由于此元素的属性值="css1",由"css"字段开头,因此  dt[class|="css"] 对此元素均起作用,显示<span style="color:green;">绿色span>dd>
<dt class="css1 css2">我是1dt>
<dd><b>·由于[ attribute |= value ]只能选取属性值为单个单词的元素,且以value字段开头,本元素的属性值为"css1 css2"是两个单词,因此 dt[class |= "css1"] 不起作用b>dd>
<dd>·由于此元素包含了"css2"属性值,因此 dt[class ~= "css2"] 对本元素起作用,显示<span style="color: red">红色。span>dd>
<dt class="css3 css1">我是2dt>
<dd>·由于此元素的属性值以"css3"开头,因此受 dt[class ^= "css3"] 的影响,显示<span style="color:yellow;">黄色span>dd>
<dt class="css1 css3">我是3dt>
<dd>·由于此元素的属性值以"css3"结尾,因此受 dt[class $= "css3"] 的影响,显示<span style="color:cyan;">青色span>dd>
dl>
body>
html>

·最终效果:
CSS属性选择器——前端复习记录_第2张图片

你可能感兴趣的:(前端复习记录,css)