码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-04-28 18:29:41      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:focus   nbsp   size   strong   blog   meta   焦点   htm   put   

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属性选择器

标签:focus   nbsp   size   strong   blog   meta   焦点   htm   put   

原文地址:http://www.cnblogs.com/kaiwen1/p/6782550.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!