<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>2.属性选择器</title> <style type="text/css">
/*요소 선택기*/
ul {
padding: 0;
margin: 0;
width: 450px;
border: 1px dashed #666;
padding: 10px 5px;
}
ul:after { /*子块撑开父块*/
content:''; /*在子元素尾部添加空内容元素*/
display: block; /*并设置为块级显示*/
clear:both; /*清除二边的浮动*/
}
li {
list-style: none; /*去掉默认列表项样式*/
float: left; /*左浮动*/
width: 40px; /*设置宽度*/
height: 40px; /*设置高度*/
line-height: 40px; /*文本垂直居中*/
text-align: center; /*文本水平居中*/
border-radius: 50%; /*设置边框圆角*/
background: skyblue; /*背景色天蓝*/
margin-right: 5px; /*每个球之间的右外边距*/
}/*속성 이름을 기준으로 선택: ID 속성 등*/
*[id] { /*等价于: li[id]*/
/*background-color: red;*/
}/*속성 이름 및 값 선택 방법: 예를 들어 class="green"*/
li[class="green"] {
/*background-color: lightgreen;*/
}/*클래스 속성 값에 지정된 단어가 포함된 요소를 선택합니다*/
li[class ~= "red"] {
background-color: brown;
}/ *문자 'ph'로 시작하는 클래스 스타일 요소 선택*/
li[class ^= "ph"] {
background-color: coral;
}/*'s'로 끝나는 클래스 스타일 요소 선택*/
li[class $= "s"] {
background-color: lime; /*青绿*/
}/*속성 선택 문자 'e'를 지정하는 값 클래스 스타일 요소에 포함됨:;*/
li[class *= "e"] {
background-color: yellowgreen; /*234背景为黄绿色*/
}
</style>
</head>
<body>
<ul>
<li id="item1">1</li>
<li>2</li>
<li class="green red">3</li>
<li>4</li>
<li>5</li>
<li id="item2">6</li>
<li>7</li>
<li class="php css">8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>위 내용은 CSS 속성 선택기 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
