CSS3複雜選擇器的詳解-css教學-PHP中文網

首頁

web前端

css教學

CSS3複雜選擇器的詳解

高洛峰

Mar 24, 2017 am 11:22 AM

css3

今天把影片裡的CSS3複雜選擇器部分看完了，來整理一下學到的知識點。

1、兄弟選擇器：同一位置級別，可稱為兄弟元素

a、相鄰兄弟選擇器：next
#緊緊接在【目前元素之後的】(一個)，指定選擇器的元素
　　　　　語法：透過「+」作為結合符
eg: 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
符合某元素【後面所有】的滿足指定選擇器的兄弟元素
語法：使用「~」作為結合符
eg：p~p{} ->匹配p後面所有的p

2、屬性選擇器：使用元素所附帶的屬性，用於選擇器當中，作為選擇元素的條件
語法：[屬性相關內容]
eg：[id] ->具備id屬性的所有元素
p[id] -> ;具備id屬性的p元素
a、[id],p[id]
b、p[id][class] ->既具備id又具備class的p元素
c、p[id="p1"] ->id值為"p1"的p元素
d、p[class~="value"]
e、p[class^=" b"] ->符合class屬性值以b開始的p標記
f、p[class*="b"] ->符合class屬性值中包含b的p標記
g、p[ class$="b"] ->符合class屬性值以b結尾的p標記

<!-- 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
偽類別：多數用在表單元素上
   1
偽類：多數用在表單元素上
   1偽類：多數用在表單元素上    1
偽類：多數用在表單元素上
、:enabled ->符合每個啟用的元素
2、:disabled ->符合每個已停用的元素
3、:checked ->符合已選取的表單元素(只選取的表單元素(只選取適用於checkbox,radio)
c、結構偽類別

1、

:first-child ->符合屬於其父元素中的第一個子元素 2、; last-child ->符合屬於其父元素中的最後一個子元素
3、:empty ->符合沒有子元素的元素(文字內容或空格也算子元素) 4、: only-child ->符合屬於其父元素中的唯一子元素 d、否定偽類別：符合非指定選擇器的元素
語法：: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;
}

登入後複製

#######################################################44 、偽###元素選擇器###：配對出來的都是文字內容### a、###:first-letter### ->符合首字### b、###:first -line### -> 符合首行### 以上兩個選擇器，行內元素無效，行內區塊、區塊層級可以### c、::selection ->用於歐賠使用者選取的文字樣式(火狐似乎不相容)###

<!-- 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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn