首页 > 代码库 > css简单学习属性3---css属性选择器

css简单学习属性3---css属性选择器

2024-09-18 01:09:41   214人阅读

1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [id*=div] {
            color: lime;
        }
        /*^首字符*/
        [id^=div] {
            color: darkblue;
        }
        /*$结束字符*/
        [id$=ym] {
            color: crimson;
        }
    </style>
</head>
<body>
<div id="mydiv1">示例文本1</div>
<div id="div2">示例文本2</div>
<div id="div3">示例文本3</div>
<div id="div4">示例文本4</div>
<div id="my">示例文本5</div>
</body>
</html>

2:UI伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--鼠标经过有效-->
     input[type="text"]:hover{
         background-color: darkviolet;
        <!--鼠标焦点有效-->
            input[type="text"]:focus{
                background-color: darkviolet;
     }
    </style>
</head>
<body>
<input type="text" name="name">
<input type="text" name="name">
</body>
</html>

 

css简单学习属性3---css属性选择器


联系
我们