집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3 속성 선택기의 여러 용도(코드 예)

CSS3 속성 선택기의 여러 용도(코드 예)

易达원래의: 2020-06-09 18:05:072688검색

이 글의 목표:

1. CSS3에서 속성 선택기의 여러 사용법을 숙지하세요.

질문:

1 다음 효과를 얻으려면 div+css를 사용해야 하지만 모든 CSS 파일은 속성 선택기를 사용해야 합니다. 요소 스타일을 설정하려면

CSS3 속성 선택기의 여러 용도(코드 예)

추가 지침:

1. 전체 div 너비는 850이고 페이지 중앙에 표시되어야 합니다.

2 제목 크기는 28이며 굵게 표시됩니다.

3. 다른 글꼴 크기는 14px입니다

4. 연예인 가십을 클릭하고 tobagua.html로 이동하고, 군사 뉴스를 클릭하여 toaffairs.html로 이동하세요

1. 이 경우에는 추가 자료가 필요하지 않으므로 자료 준비 단계를 생략할 수 있습니다

2. index.html을 만들고 구조를 작성합니다.

아이디어 분석:

1. 타겟은 왼쪽과 오른쪽 두 부분으로 나누어져 있습니다. 각 부분은 뉴스 목록을 표시하지만 각 뉴스의 카테고리가 다르며 일부 스타일도 다릅니다

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>

CSS3 속성 선택기의 여러 용도(코드 예)

지금까지 필요한 결과를 얻었습니다

요약:

A=B와 같은 속성 선택기의 여러 사용을 설명했습니다. 이는 A 속성 값이 B 문자열과 동일함을 의미합니다

A*=B는 A 속성 값에 B 문자열이 포함되어 있음을 의미합니다.

A$=B는 A 속성 값이 B 문자열로 끝나는 것을 의미합니다.

A^=B는 A 속성 값이 B 문자열로 시작한다는 의미입니다.

위 내용은 CSS3 속성 선택기의 여러 용도(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS3의 배경 이미지는 여러 배경 이미지를 구현합니다(코드 예)다음 기사：CSS3의 배경 이미지는 여러 배경 이미지를 구현합니다(코드 예)