CSS3 복합 선택기에 대한 자세한 설명-CSS 튜토리얼-php.cn

CSS3 복합 선택기에 대한 자세한 설명

高洛峰

풀어 주다： 2017-03-24 11:22:24

원래의

1601명이 탐색했습니다.

오늘 영상에서 CSS3 콤플렉스 선택자 부분을 모두 시청하고, 배운 지식 포인트를 정리해보겠습니다.

1. 형제 선택자: 동일한 위치 수준에서 형제 요소라고 할 수 있습니다.

a, 인접 형제 선택자: 다음
[현재 요소](1) 바로 다음, 선택기를 지정하는 요소
구문: "+"를 공액자로 사용
예: p+p ->p 바로 다음 p 요소

<!-- demo.html -->
<html>
    <head>
        <title></title>
    </head>
    <body>
        <p>这是第一个段落</p>
　　  <div id="d1">这是一个div</div>
　　  <span>这是一个span</span>
        <p class="p1">这是第二个段落</p>
　　  <b>Hello World</b>
　　  <p class="p2">这是第三个段落</p>
    </body>
</html>

/*demo.css*/
div+p{
    background: yellow;
}
#d1+p{
    background: red;
}
span+.p1{
    background: blue;
}

로그인 후 복사

b, 범용 형제 선택기: next_all
지정된 선택기를 만족하는 특정 요소의 [모든 후속] 형제 요소와 일치
구문: "~"를 다음과 같이 사용합니다. 접합자
예: p~p{} -> p 뒤의 모든 p 일치

2, 속성 선택기 : 선택기에서 선택 조건으로 사용되는 속성이 첨부된 요소를 사용합니다. 요소
구문: [속성 관련 콘텐츠]
예: [id] -> id 속성이 있는 모든 요소
p[id] -> ;id 속성이 있는 p 요소
a, [id ],p[id]
b, p[id][class] ->id와 클래스가 모두 있는 p 요소
c, p[id="p1"] -> ID 값이 "p1"
인 p 요소 d, p[class~="value"]
e, p[class^=" b"] -> 클래스 속성 값이 있는 p 태그
와 일치합니다. b f, p[class*="b"]로 시작 -> 클래스 속성 값에 b g, p[ class$="b"]가 포함된 p 태그
와 일치 -> b

<!-- demo.html -->　　　　　
 <html>
     <head>
         <title></title>
     </head>
     <body>
        <p class="clear p1 myself">
        这是第四个段落
        </p>
        <div class="userContent">
        文本内容
        </div>
     </body>
</html>

/*demo.css*/
p[class]{
color: #e4393c;
}
p[class~=&#39;p1&#39;]{
background-color: #cd2c2d;
color: #fff;
}
div[class ^= "us"]{
background-color: #bfb;
}
div[class$="t"]{
background-color: #bfb;
color: #333;
}

로그인 후 복사

3. 의사클래스 선택기
a. 대상의사 클래스 : 활성 HTML 앵커
를 강조 표시합니다. 구문: :target
b. 요소 상태 의사 클래스: 주로 양식 요소에 사용됩니다
1 , :enabled -> 활성화된 모든 요소와 일치합니다
2. :disabled -> 비활성화된 모든 요소와 일치
3. :checked -> 선택한 양식 요소와 일치(체크박스, 라디오에만 적용 가능)
c. 구조적 의사 클래스
1. :first-child -> 상위 요소에 속하는 첫 번째 하위 요소
와 일치합니다. 2.: last-child -> 상위 요소
의 마지막 하위 요소와 일치합니다. 3. :empty -> 요소(텍스트 내용 또는 공백도 하위 요소로 계산됩니다.)
4.: only-child -> 상위 요소에 속하는 유일한 하위 요소
와 일치합니다. 음수 의사 클래스: 요소가 아닌 요소와 일치합니다. -지정된 선택기
구문::not(selector)

<!-- demo01.html 目标伪类 -->
 <html>
     <head>
         <title></title>
     </head>
     <body>
    <a href="#Tom">猫和老鼠(Tom and Jerry)</a>
    <a href="#Atongmu">铁臂阿童木</a>
    <a href="#BlackCat">黑猫警长</a>
    <br>
    <a name="Tom">第一部：Tom and Jerry</a>
    <p style="height: 500px;">Tom and Jerry</p>
    <div id="Atongmu" style="height: 500px;">我是阿童木</div>
    <div id="BlackCat" style="height: 500px;">I am Mr Black Cat</div>    
     </body>
</html>

/*demo01.css*/
a:target,div:target{
    background-color: #bfb;
    font-size: 20pt;
}

로그인 후 복사

<!-- demo02.html 结构伪类 -->　　　　　
 <html>
     <head>
         <title></title>
     </head>
     <body>
    <div id="d1"></div>
    <div id="d2">
        <p>This is a p</p>
    </div>
    <div id="d3">
        This id d3
    </div>
    <div id="d4">
        <b>first</b>
        <b>second</b>
        <b>third</b>
        <b>last</b>
    </div>    
     </body>
</html>

/*demo02.css*/
div{
    width: 100px;
    height: 100px;
}
b{
    display: block;
}
div:empty{
    background-color: #bfb;
}
p:only-child{
    background-color: #fbf;
}
b:first-child{
    font-size: 2em;
    color: #fbb;
}
b:last-child{
    font-size: 3em;
    font-weight: normal;
    color: #bbf;
}

로그인 후 복사

<!-- demo03.html 伪元素状态伪类 -->
  <html>
      <head>
          <title></title>
      </head>
      <body>
         用户名称：<input type="text"><br>
    用户昵称：<input type="text" disabled value="请输入您的昵称">
    <br>
    性别：<input type="radio" name="rdoGender">男
              <input type="radio" name="rdoGender">女 
      </body>
 </html>
 
 /*demo03.css*/
 input:enabled{
    color: red;
}
input:disabled{
    border: 1px solid #f00;
}
input[name=rdoGender]:checked{
    background-color: #bfb;
}

로그인 후 복사

<!-- demo04.html 否定伪类 -->
  <html>
      <head>
          <title></title>
      </head>
      <body>
         <div>
        用户名称：<input type="text"><br>
        用户密码：<input type="password"><br>
        <input type="submit" value="提交">
        <input type="button" value="按钮">
    </div>
      </body>
 </html>
 
 /*demo04.css*/
input:not(:last-child){
    border: 1px solid #f00;
}

로그인 후 복사

4 , 유사 요소 선택기 : 일치하는 모든 텍스트 콘텐츠는
:first-letter<입니다. 🎜> -> 첫 번째 문자와 일치 b.
:first -line -> 첫 번째 줄과 일치 위의 두 선택기, 인라인 블록 및 블록 수준은 유효하지 않습니다. be
c, ::selection -> Oupian 사용자가 선택한 텍스트 스타일에 사용됩니다. (Firefox는 호환되지 않는 것 같습니다.)

<!-- demo.html 为元素选择器 -->
  <html>
      <head>
          <title></title>
      </head>
      <body>
         <p>
        风风雨雨适合于独行，且手中无伞，不打伞有不打伞的好处。湿是我的湿，冷是我的冷，即便化作雨点般的小，那么小也是我的小。
    </p>
    <span>
        风风雨雨适合于独行，且手中无伞，不打伞有不打伞的好处。湿是我的湿，冷是我的冷，即便化作雨点般的小，那么小也是我的小。
    </span>
      </body>
 </html>
 
 /*demo.css*/
p{
    width: 200px;
    border: 1px solid #bfb;
    margin: 10% auto;
    text-indent: 5px;
}
span{
    /*float: right;*/
    /*display: inline-block;*/
    position: absolute;
    top: 300px;
    left: 500px;
    
}
p:first-letter{
    font-size: 20pt;
    color: #fbb;
}
p:first-line{
    font-style: italic;
}
span:first-line{
    font-style: italic;
    background-color: #ffb;
}
p::selection{
    background-color: #bbf;
    color: #fbf;
}

로그인 후 복사

위 내용이 영상에서 배운 내용입니다. 혹은 부족한 점은 시청자 여러분께서 제때 지적해 주시고 바로잡아 주셨으면 좋겠습니다. .

오늘은 블로그를 오픈한지 이틀째 되는 날입니다. 저의 성장을 기록하고자 순전히 공부노트로 여기에 올리는 글입니다.

위 내용은 CSS3 복합 선택기에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!