HTML——CSS3新属性

CSS3新属性

※属性选择器

一、概念

1.属性选择器
①E[att]选择具有att属性的E元素
②E[att=“val”]选择具有att属性且属性值等于val的E元素
③E[att^=“val”]匹配具有att属性且属性值以val开头的E元素
④E[att$=“val”]匹配具有att属性且值以val结尾的E元素
⑤E[att*=“val”]匹配具有att属性且值中含有val的E元素

二、不借助类或者id选择器，利用属性选择器选择

<div class="one">
    <input type="text" value="duyidao">
    <input type="text">
</div>

选择必须是input，但是同时具有value这个属性的元素

.one input[value] {
        background-color: pink;
    }

效果

三、选择属性=值的某些元素

<div class="two">
     <input type="text" name="" id="">
     <input type="password" name="" id="">
</div>

选择属性为text的元素。重点！！！务必掌握

.two input[type=text] {
            border-color: pink;
 }

效果

四、属性选择器可以选择属性值开头的某些元素

<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>

选择首先是div，然后具有class属性并且属性值必须