CSS選擇器總結(jié)

CSS選擇器

一鸭限、基本選擇器

1.1呼股、標(biāo)簽選擇器

  • 標(biāo)簽屬性和值用:隔開阳啥,定義多個(gè)屬性的時(shí)候使用;隔開

  • 標(biāo)簽選擇器作用于html標(biāo)簽

    /* 標(biāo)簽{屬性:值} */
    div{
      font-size: 28px;
    }
    

1.2沸移、類選擇器

  • 類選擇器是被通過class的方式調(diào)用

  • 一個(gè)標(biāo)簽可以同時(shí)調(diào)用多個(gè)類選擇器,用空格隔開

  • 多個(gè)標(biāo)簽可以同時(shí)調(diào)用同一個(gè)類選擇器

      /* .類名{} */
      .demo{
        font-family: microsoft yahei;
        font-size: 28px;
      }
    /* ********************************************* */
      /*通過class調(diào)用荣回,調(diào)用多個(gè)用空格隔開 */
      <div class="demo">調(diào)用類標(biāo)簽示例</div>
    

1.3遭贸、id選擇器

  • 一個(gè)id選擇器在一個(gè)Html中只能被調(diào)用一次

  • 一個(gè)標(biāo)簽不能同時(shí)調(diào)用多個(gè)id選擇器

      /* #id選擇器的名稱 */
      #idname{
        color: green;
      }
      /* ********************************************* */
      <p id="idname">id選擇器調(diào)用示例<p>
    

1.4、通配符選擇器

  • 給html中所有標(biāo)簽使用相同的樣式
  /* *{} */
  *{
    color:#FF0000;
  }

二心软、復(fù)合選擇器

復(fù)合選擇器就是兩個(gè)以上的選擇器通過不同的方式連接在一起

2.1壕吹、交集選擇器

  • 既使用了標(biāo)簽選擇器又使用了類選擇器或者id選擇器

      <!-- 標(biāo)簽+類(id)選擇器{} -->
        .classname{
          font-size: 28px;
        }
        div.classname{
            color: red;
        }
        div#idname{
          background-color: #990000
        }
    

2.2、后代選擇器

  • 后代選擇器用來選擇元素或元素組的后代

  • 選擇器之間用空格空開

      /* 選擇器+空格+選擇器{} */
      div span{
        color:red;
      }
    

2.3糯累、子代選擇器

  • 類似于后代選擇器算利,但只能作用于直接子一代

  • 選擇器之間用>隔開

        div>span{
          color: color.rgb(255, 0, 0);
        }
    

2.4、并集選擇器

  • 并集選擇器是各個(gè)選擇器用逗號(hào)連接而成泳姐,任何選擇器都行
  /* 選擇器,選擇器,選擇器{} */
  .choise1,#choise2,div{
    font-size: 30px;
    background-color: color.rgba(255, 0, 0, 0.5);
  }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市暂吉,隨后出現(xiàn)的幾起案子胖秒,更是在濱河造成了極大的恐慌,老刑警劉巖慕的,帶你破解...
    沈念sama閱讀 217,657評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件阎肝,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡肮街,警方通過查閱死者的電腦和手機(jī)风题,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來嫉父,“玉大人沛硅,你說我怎么就攤上這事∪葡剑” “怎么了摇肌?”我有些...
    開封第一講書人閱讀 164,057評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)仪际。 經(jīng)常有香客問我围小,道長(zhǎng)昵骤,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,509評(píng)論 1 293
  • 正文 為了忘掉前任肯适,我火速辦了婚禮变秦,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘框舔。我一直安慰自己蹦玫,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,562評(píng)論 6 392
  • 文/花漫 我一把揭開白布雨饺。 她就那樣靜靜地躺著钳垮,像睡著了一般。 火紅的嫁衣襯著肌膚如雪额港。 梳的紋絲不亂的頭發(fā)上饺窿,一...
    開封第一講書人閱讀 51,443評(píng)論 1 302
  • 那天,我揣著相機(jī)與錄音移斩,去河邊找鬼肚医。 笑死,一個(gè)胖子當(dāng)著我的面吹牛向瓷,可吹牛的內(nèi)容都是我干的肠套。 我是一名探鬼主播,決...
    沈念sama閱讀 40,251評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼猖任,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼你稚!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起朱躺,我...
    開封第一講書人閱讀 39,129評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤刁赖,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后长搀,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體宇弛,經(jīng)...
    沈念sama閱讀 45,561評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,779評(píng)論 3 335
  • 正文 我和宋清朗相戀三年源请,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了枪芒。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,902評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡谁尸,死狀恐怖舅踪,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情症汹,我是刑警寧澤硫朦,帶...
    沈念sama閱讀 35,621評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站背镇,受9級(jí)特大地震影響咬展,放射性物質(zhì)發(fā)生泄漏泽裳。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,220評(píng)論 3 328
  • 文/蒙蒙 一破婆、第九天 我趴在偏房一處隱蔽的房頂上張望涮总。 院中可真熱鬧,春花似錦祷舀、人聲如沸瀑梗。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽抛丽。三九已至,卻和暖如春饰豺,著一層夾襖步出監(jiān)牢的瞬間亿鲜,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評(píng)論 1 269
  • 我被黑心中介騙來泰國打工冤吨, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蒿柳,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,025評(píng)論 2 370
  • 正文 我出身青樓漩蟆,卻偏偏與公主長(zhǎng)得像垒探,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子怠李,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,843評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 基本選擇器 * 通用選擇器圾叼,匹配任何元素 E 標(biāo)簽選擇器,匹配所有使用E標(biāo)簽的元素 .class class選擇器...
    瘋狂的潛水員閱讀 608評(píng)論 0 2
  • 1捺癞、class 和 id 的使用場(chǎng)景? id:指定標(biāo)簽的唯一標(biāo)識(shí)id選擇器褐奥,使用#name定義(name為id名,...
    zh_yang閱讀 456評(píng)論 0 1
  • 問題1 :id和class的應(yīng)用場(chǎng)景 id:指定標(biāo)簽的唯一標(biāo)識(shí)翘簇,每個(gè)ID在文檔中必須是唯一的 class:指定標(biāo)簽...
    hellowade閱讀 959評(píng)論 0 0
  • jQuery 的選擇器可謂之強(qiáng)大無比,這里簡(jiǎn)單地總結(jié)一下常用的元素查找方法 $("#myELement") 選擇i...
    JamHsiao_aaa4閱讀 958評(píng)論 0 0
  • 1.元素選擇器 p{ color: orange } 2.選擇器分組與聲明分組 h1,h2,h3,h4,h5,h6...
    星月西閱讀 319評(píng)論 0 0