이 글의 목표:
1. CSS3에서 속성 선택기의 여러 사용법을 숙지하세요.
질문:
1 다음 효과를 얻으려면 div+css를 사용해야 하지만 모든 CSS 파일은 속성 선택기를 사용해야 합니다. 요소 스타일을 설정하려면
 "159169399485948CSS3 속성 선택기의 여러 용도(코드 예)")
추가 지침:
1. 전체 div 너비는 850이고 페이지 중앙에 표시되어야 합니다.
2 제목 크기는 28이며 굵게 표시됩니다.
3. 다른 글꼴 크기는 14px입니다
4. 연예인 가십을 클릭하고 tobagua.html로 이동하고, 군사 뉴스를 클릭하여 toaffairs.html로 이동하세요
1. 이 경우에는 추가 자료가 필요하지 않으므로 자료 준비 단계를 생략할 수 있습니다
2. index.html을 만들고 구조를 작성합니다.
아이디어 분석:
1. 타겟은 왼쪽과 오른쪽 두 부분으로 나누어져 있습니다. 각 부분은 뉴스 목록을 표시하지만 각 뉴스의 카테고리가 다르며 일부 스타일도 다릅니다
2.
3. f15가 포함된 뉴스의 색상도 별도로 설정해야 합니다
4. 두 부분의 제목도 별도로 설정해야 하므로 속성을 통해 일치시킬 수 있도록 일부 속성을 설정합니다. 선택기
5. 각 부분은 목록이므로 ul을 사용할 수 있지만 두 ul은 모두 플러시되므로 부동이므로 외부 컨테이너가 여전히 부동 요소를 래핑할 수 있도록 해야 합니다. , 마침내 부동 소수점을 지우기 위해 명확한 요소를 추가해야 합니다
분석에 따르면 다음 코드를 생각해 냈습니다
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
</head>
<body>
<div container="true">
<div left="true">
<span title="true"><a href="tobagua.html">明星八卦</a></span>
<ul>
<li class="news lxr">->林心如女儿小海豚正面照被公开颜值撞脸年轻时的霍建华，太美了 </li>
<li class="news">->倪萍还是胖点好，瘦下来后太显老了，一点精神没有穿衣也不好看！ </li>
<li class="news">->汪小菲晒儿女沙滩上顽皮玩耍，儿子长高不少，女儿一身泥被指酷似奶奶张兰 </li>
<li class="news">->伊能静给婆婆安排了个小次卧, 走进秦妈妈的表情变化让人心疼! </li>
</ul>
</div>
<div right="true">
<span title="true"><a href="toaffairs.html">军事新闻</a></span>
<ul>
<li class="affairs news f15">->F15E成为首型接收B61-12核弹的战斗机 </li>
<li class="affairs news">->越南的骑兵警队，马略矮了点啊 </li>
<li class="affairs news">->美军运输机降落时冲出跑道后撞墙起火 4人受伤 </li>
<li class="affairs news">->不到一个月又出事：美军F-35降落时起落架折断 </li>
</ul>
</div>
<div class="clear"> </div>
</div>
</body>
</html>로그인 후 복사
3. 스타일을 작성하고 CSS 파일 폴더를 만들고 내부에 새 index.css를 만듭니다. , 내부에 스타일을 작성하는 방법은 다음과 같습니다. 분석 아이디어는 다음과 같습니다.
컨테이너 컨테이너의 모든 하위 요소
1. 각 스타일은 일치 설정을 사용해야 하기 때문에 아이디어는 먼저 컨테이너=true 속성을 가진 요소를 가져온 다음 가장 일반적인 패딩 및 여백과 같은 몇 가지 일반적인 스타일을 설정하는 것입니다. 이렇게 설정하지 않으면 기본 패딩을 알 수 없기 때문입니다. 일부 요소의 경우 로직 작성에 집중할 수 있도록 패딩과 여백을 0
으로 통합했습니다. 따라서 index.css에 다음 코드를 추가합니다.
div[container =true] *{
padding:0;
margin:0;
}로그인 후 복사
container Container
1. 요구 사항, 가장 바깥쪽 컨테이너 너비는 850이고 중앙에 있어야 하며 상단, 하단, 왼쪽 및 오른쪽에 패딩이 있고 회색 테두리가 있으며 기본 글꼴 크기는 14px입니다. 컨테이너 컨테이너는 무엇입니까? 컨테이너 속성 = true
그러므로 index.css에 다음 코드를 추가하세요.
div[container =true] {
width: 850px;
margin: 0 auto;
font-size: 14px;
border: 1px solid lightgray;
padding: 10px;
}로그인 후 복사
2 제목에 대한 공개 스타일 설정
1 제목은 가운데 정렬되어야 하므로 글꼴 크기는 28px로 표시됩니다. 굵게 표시된 것은 모두 title=true라는 속성을 가진 요소입니다
그러면 index.css에 다음 코드를 추가하세요. ：
span[title=true] {
text-align: center;
font-size: 28px;
font-weight: bold;
}로그인 후 복사
2개의 제목 연결에 대한 별도의 설정
1. title은 red
2. 군 타이틀 색상은 blue
3. bagua 문자열을 포함하는 href 속성은 왼쪽의 타이틀 연결, toaffairs로 시작하는 href 속성은 오른쪽 제목 연결
*= 포함을 의미합니다. , ^=는 시작을 의미합니다.
다음 코드를 index.css에 추가하세요.
a[href *=bagua] {
color: rgb(234, 84, 23);
}
a[href ^=toaffairs] {
color: green;
}로그인 후 복사
왼쪽 및 오른쪽 부동 div 설정
1 왼쪽 div가 필요합니다. 왼쪽 div는 왼쪽에 있는 div입니다. ? 사실은 left 속성이 true인 div입니다
2. 오른쪽 div는 오른쪽으로 플로팅해야 하는데 오른쪽에 있는 div는 무엇인가요? 부동 div를 지우는 데 사용되는 true
3은 실제로 클래스가 clear
로 끝나는 클래스입니다. 참고: $=는
로 끝나는 것을 의미합니다. 따라서 index.css에 다음 코드를 추가하세요.
div[left =true] {
float: left;
}
div[right =true] {
float: right;
}
div[class $= clear] {
clear: both;
float: none;
width: 0;
height: 0;
}로그인 후 복사
li settings
1.li는 검은색 점을 포함하지 않으므로 list-style:none
2. 속성 클래스에 뉴스 문자열이 포함된 요소는 li
3입니다. 효과에 따라 위쪽, 아래쪽 사이에 일정한 간격이 있습니다. , left and right
다음 코드를 index.css에 추가하세요.
li[class =news] {
list-style: none;
height: 42px;
line-height: 42px;
padding:3px 10px;
}로그인 후 복사
Ruby Lin의 제목 설정이 포함되어 있습니다
1. 이 제목의 색상은 흙빛 노란색이고 글꼴은 굵게 표시됩니다
2. lxr로 끝나는 속성은 Ruby Lin의 제목이므로 $=
[class $=lxr]{
color:peru;
font-weight: bold;
}로그인 후 복사
를 사용하면 f15
1에 대한 제목 설정이 포함됩니다. 제목 색상은 파란색이고 글꼴은 굵게 표시됩니다.
2. f15 문자열은 대상의 제목이므로 *=
[class*=f15]{
color:blue;
font-weight: bold;
}로그인 후 복사
를 사용하세요. 그게 다입니다. CSS의 전체 내용은 다음과 같습니다.
div[container =true] *{
padding:0;
margin:0;
}
div[container =true] {
width: 850px;
margin: 0 auto;
font-size: 14px;
border: 1px solid lightgray;
padding: 10px;
}
span[title=true] {
text-align: center;
font-size: 28px;
font-weight: bold;
}
a[href *=bagua] {
color: rgb(234, 84, 23);
}
a[href ^=toaffairs] {
color: green;
}
div[left =true] {
float: left;
}
div[right =true] {
float: right;
}
div[class $= clear] {
clear: both;
float: none;
width: 0;
height: 0;
}
li[class *=news] {
list-style: none;
height: 42px;
line-height: 42px;
padding:3px 10px;
}
[class $=lxr]{
color:peru;
font-weight: bold;
}
[class*=f15]{
color:blue;
font-weight: bold;
}로그인 후 복사
그런 다음 index.html에 index.css를 추가합니다
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div container="true">
<div left="true">
<span title="true"><a href="tobagua.html">明星八卦</a></span>
<ul>
<li class="news lxr">->林心如女儿小海豚正面照被公开颜值撞脸年轻时的霍建华，太美了 </li>
<li class="news">->倪萍还是胖点好，瘦下来后太显老了，一点精神没有穿衣也不好看！ </li>
<li class="news">->汪小菲晒儿女沙滩上顽皮玩耍，儿子长高不少，女儿一身泥被指酷似奶奶张兰 </li>
<li class="news">->伊能静给婆婆安排了个小次卧, 走进秦妈妈的表情变化让人心疼! </li>
</ul>
</div>
<div right="true">
<span title="true"><a href="toaffairs.html">军事新闻</a></span>
<ul>
<li class="affairs news f15">->F15E成为首型接收B61-12核弹的战斗机 </li>
<li class="affairs news">->越南的骑兵警队，马略矮了点啊 </li>
<li class="affairs news">->美军运输机降落时冲出跑道后撞墙起火 4人受伤 </li>
<li class="affairs news">->不到一个月又出事：美军F-35降落时起落架折断 </li>
</ul>
</div>
<div class="clear"> </div>
</div>
</body>
</html>로그인 후 복사
:
지금까지 필요한 결과를 얻었습니다
요약:
1.
A=B와 같은 속성 선택기의 여러 사용을 설명했습니다. 이는 A 속성 값이 B 문자열과 동일함을 의미합니다
A*=B는 A 속성 값에 B 문자열이 포함되어 있음을 의미합니다.
A$=B는 A 속성 값이 B 문자열로 끝나는 것을 의미합니다.
A^=B는 A 속성 값이 B 문자열로 시작한다는 의미입니다.
위 내용은 CSS3 속성 선택기의 여러 용도(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
