CSS3 - 속성 선택자 - 코드 세계

1. 클래스 또는 id 선택자를 사용하지 않고 속성 선택자를 사용하십시오.

예: 첫 번째 입력을 선택합니다.

<input type="text" value="请输入用户名">
<input type="text">

css3 설정 선택:

/*应用范围必须是input 需要具有valuer这个属性,才可以选择这个元素*/
input[value]{
    color: pink;
}

2. 속성 선택기는 = 값의 특정 요소를 선택할 수도 있습니다.

예: 첫 번째 입력을 선택합니다.

<input type="text" name="" id="">
<input type="password" name="" id="">

css3 설정 선택:

/*不局限于input,div[class=a]或者其他标签也可以*/
input[type=test]{
    color: pink;
}

3. 속성 선택기는 속성 값의 시작 부분에서 일부 요소를 선택할 수 있습니다.

예: 클래스가 icon으로 시작하는 div를 선택합니다.

<div class="icon1">hello</div>
<div class="icon2">hello</div>
<div class="abcd">hello</div>
<div class="icon3">hello</div>
<div class="icon4">hello</div>

css3 설정 선택:

/*选择首先是div 然后 具有class属性 并且属性名必须是icon开头的*/
div[class^=icon]{
            color:gray
        }

4. 속성 선택기는 속성 값의 끝에서 일부 요소를 선택할 수 있습니다.

예: 클래스가 data로 끝나는 div를 선택합니다.

<div class="icon1-data">hello</div>
<div class="icon2-data">hello</div>
<div class="abcd">hello</div>
<div class="icon3">hello</div>
<div class="icon4">hello</div>

css3 설정 선택:

/*选择首先是div 然后 具有class属性 并且属性名必须是data结尾的*/
div[class$=data]{
            color:gray
        }

5. 속성 선택기는 속성 값에 포함된 일부 요소를 선택할 수 있습니다.

예: 클래스에서 abc를 포함하는 div를 선택합니다.

<div class="icon1abc-data">hello</div>
<div class="icon2abc-data">hello</div>
<div class="abcd">hello</div>
<div class="icon3">hello</div>
<div class="icon4">hello</div>

css3 설정 선택:

/*选择首先是div 然后 具有class属性 并且属性名必须包含abc的*/
div[class*=abc]{
            color:gray
        }

CSS3 - 속성 선택자

추천