CSS3 속성 선택기의 여러 용도(코드 예)
이 글의 목표:
1. CSS3에서 속성 선택기의 여러 사용법을 숙지하세요.
질문:
1 다음 효과를 얻으려면 div+css를 사용해야 하지만 모든 CSS 파일은 속성 선택기를 사용해야 합니다. 요소 스타일을 설정하려면
추가 지침:
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>컨테이너 컨테이너의 모든 하위 요소
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은 red2. 군 타이틀 색상은 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:none2. 속성 클래스에 뉴스 문자열이 포함된 요소는 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
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;
}<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7652
15
1393
52
91
11
73
19
37
110
순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? (코드 예)
Jun 28, 2022 pm 01:39 PM
순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? 이 기사에서는 SVG 및 CSS 애니메이션을 사용하여 물결 효과를 만드는 방법을 소개합니다. 도움이 되길 바랍니다.
CSS를 능숙하게 사용하여 다양한 이상한 모양의 버튼 구현(코드 포함)
Jul 19, 2022 am 11:28 AM
이 글에서는 CSS를 활용하여 자주 나타나는 다양한 모양의 버튼을 쉽게 구현하는 방법을 알려드리겠습니다. 도움이 되셨으면 좋겠습니다.
공간을 차지하지 않고 CSS에서 요소를 숨기는 방법
Jun 01, 2022 pm 07:15 PM
두 가지 방법: 1. 표시 속성을 사용하여 요소에 "display:none;" 스타일을 추가합니다. 2. 요소를 숨기려면 위치 및 상단 속성을 사용하여 요소의 절대 위치를 설정하세요. 요소에 "position:absolute;top:-9999px;" 스타일을 추가하세요.
CSS3에서 레이스 테두리를 구현하는 방법
Sep 16, 2022 pm 07:11 PM
CSS에서는 border-image 속성을 사용하여 레이스 테두리를 만들 수 있습니다. border-image 속성은 이미지를 사용하여 테두리를 생성할 수 있습니다. 즉, 배경 이미지를 레이스 스타일로 지정하기만 하면 됩니다. "border-image: url(이미지 경로)은 이미지 테두리 너비가 안쪽으로 반복되는지 여부입니다.
CSS3에서 마우스를 클릭하여 이미지를 확대하는 방법
Apr 25, 2022 pm 04:52 PM
구현 방법: 1. ":active" 선택기를 사용하여 그림에 대한 마우스 클릭 상태를 선택합니다. 2. 변환 속성과 scale() 함수를 사용하여 그림 확대 효과를 얻습니다. 구문은 "img:active {transform; : scale(x축 배율, y축 배율);}".
텍스트 캐러셀과 이미지 캐러셀도 순수 CSS를 사용하여 구현할 수 있다는 것이 밝혀졌습니다!
Jun 10, 2022 pm 01:00 PM
텍스트 회전판과 이미지 회전판을 만드는 방법은 무엇입니까? 누구나 가장 먼저 생각하는 것은 js를 사용할지 여부입니다. 실제로 순수 CSS를 사용하여 구현하는 방법도 모두에게 도움이 되기를 바랍니다.
CSS3에서 애니메이션 회전 속도를 설정하는 방법
Apr 28, 2022 pm 04:32 PM
CSS3에서는 "animation-timing-function" 속성을 사용하여 애니메이션 회전 속도를 설정할 수 있습니다. 이 속성은 애니메이션이 순환을 완료하는 방법을 지정하고 애니메이션의 속도 곡선을 설정하는 데 사용됩니다. 애니메이션 타이밍 기능: 속도 속성 값;}".
CSS3 애니메이션 효과에 변형이 있나요?
Apr 28, 2022 pm 02:20 PM
CSS3의 애니메이션 효과에는 변형이 있습니다. 애니메이션 속성은 애니메이션 스타일을 설정하는 데 사용됩니다. 변형 속성은 변형 스타일을 설정하는 데 사용됩니다.
