国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端基礎-CSS的各種選擇器的特點以及CSS的三大特性

番茄西紅柿 / 946人閱讀

摘要：一基本選擇器二后代選擇器子元素選擇器三兄弟選擇器四交集選擇器與并集選擇器五序列選擇器六屬性選擇器七偽類選擇器八偽元素選擇器九三大特性一基本選擇器選擇器作用根據指定的名稱，在當前界面中找到對應的唯一一個的標簽，然后設置屬性格式名稱屬性值注意點

  • 一、 基本選擇器
  • 二、 后代選擇器、子元素選擇器
  • 三、 兄弟選擇器
  • 四、 交集選擇器與并集選擇器
  • 五、 序列選擇器
  • 六、 屬性選擇器
  • 七、 偽類選擇器
  • 八、 偽元素選擇器
  • 九、 CSS三大特性

一、 基本選擇器

1、id選擇器

#1、作用：
根據指定的id名稱，在當前界面中找到對應的唯一一個的標簽，然后設置屬性

#2、格式
id名稱 {
    屬性：值;
}

#3、注意點：
1、在企業開發中如果僅僅只是為了設置樣式，通常不會使用id，在前端開發中id通常是留給js使用的
2、每個標簽都可以設置唯一一個id，id就相當于人/標簽的身份證，因此在同一界面內id絕不能重復
3、引用id一定要加#
4、id的命名只能由字符、數字、下劃線組成，且不能以數字開頭，更不能是html關鍵字如p，a，img等
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id選擇器title>
    <style>
        #p1 {
            color: red;
        }
        #p2 {
            color: green;
        }
        #p3 {
            color: blue;
        }
    style>
head>

<body>
<p id="p1">大多數人的帥，都是浮在表面的，是外表的帥p>
<p id="p2">而多多，不僅具備外表帥，內心更是帥了一逼p>
<p id="p3">多多就是我，我就是多多p>
body>

html>
id選擇器實例

2、類選擇器

#1、作用：根據指定的類名稱，在當前界面中找到對應的標簽，然后設置屬性

#2、格式：
.類名稱 {
    屬性：值;
}

#3、注意點：
1、類名就是專門用來給某個特定的標簽設置樣式的
2、每個標簽都可以設置一個或多個class（空格分隔），class就相當于人/標簽的名稱，
因此同一界面內class可以重復
3、引用class一定要加點.
4、類名的命名規則與id的命名規則相同
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>類選擇器title>
    <style>
        .p1 {
            color: red;
        }
        .p2 {
            color: green;
        }
        .p3 {
            color: blue;
        }
    style>
head>

<body>
<p class="p1">大多數人的帥，都是浮在表面的，是外表的帥p>
<p class="p2">而多多，不僅具備外表帥，內心更是帥了一逼p>
<p class="p3">多多就是我，我就是多多p>
body>

html>
類選擇器實例

3、標簽選擇器

#1、作用：根據指定的標簽名稱，在當前界面中找到所有該名稱的標簽，然后設置屬性

#2、格式：
標簽名稱 {
    屬性：值;
}

#3、注意點：
1、只要是HTML的標簽都能當做標簽選擇器
2、標簽選擇器選中的是當前界面中的所有標簽,而不能多帶帶選中某一標簽
3、標簽選擇器，無論嵌套多少層都能選中
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標簽選擇器title>

    <style type="text/css">
        p {
            color: red;
        }
    style>
head>
<body>
    <p>多多美麗的外表下其實隱藏著一顆騷動的心p>
    <ul>
        <li>
            <ul>
                <li>
                    <ul>
                        <li>
                            <p>這顆心叫做七巧玲瓏心，男人吃了會流淚，女人吃了會懷孕p>
                        li>
                    ul>
                li>
            ul>
        li>
    ul>

body>
html>
標簽選擇器

4、通配符選擇器

#1、作用：選擇所有標簽

#2、格式：
* {
    屬性：值；
}
#3、注意點：
1、在企業開發中一般不會使用通配符選擇器
    理由是：
    由于通配符選擇器是設置界面上所有的標簽的屬性，
    所以在設置之前會遍歷所有的標簽
    如果當前界面上的標簽比較多，那么性能就會比較差
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符選擇器title>

    <style type="text/css">

        * {
            color: red;
        }

    style>
head>
<body>
    <h1 >我是標題h1>
    <p >我是段落p>
    <a href="#">我是超鏈接a>
body>
html>
通配選擇器實例

二、 后代選擇器、子元素選擇器

1、后代選擇器

#1、作用：找到指定標簽的所有后代（兒子，孫子，重孫子、、、）標簽，設置屬性

#2、格式：
    標簽名1 xxx {
        屬性：值;
    }

#3、注意：
1、后代選擇器必須用空格隔開
2、后代不僅僅是兒子，也包括孫子、重孫子
3、后代選擇器不僅僅可以使用標簽名稱，還可以使用其他選擇器比如id或class
4、后代選擇器可以通過空格一直延續下去

"en">

    "UTF-8">
    后代選擇器

    


    
我是body下的段落1

    
    
"id1" class="part1">
        
我是div下的段落1

        
我是div下的段落2

        
    

    
我是body下的段落2
后代選擇器實例

2、子元素選擇器

#1、作用：找到制定標簽的所有特定的直接子元素，然后設置屬性

#2、格式：
    標簽名1>標簽名2 {
        屬性：值;
    }

先找到名稱叫做"標簽名稱1"的標簽，然后在這個標簽中查找所有直接子元素名稱叫做"標簽名稱2"的元素

#3、注意：
1、子元素選擇器之間需要用>符號鏈接，并且不能有空格
    比如div >p會找div標簽的所有后代標簽，標簽名為">p"
2、子元素選擇器只會查找兒子，不會查找其他嵌套的標簽
3、子元素選擇器不僅可以用標簽名稱，還可以使用其他選擇器,比如id或class
4、子元素選擇器可以通過>符號一直延續下去

"en">

    "UTF-8">
    后代選擇器

    


    
我是body下的段落1

    
    
"id1" class="part1">
        
我是div下的段落1

        
我是div下的段落2

        
    

    
我是body下的段落2
子元素選擇器

三、 兄弟選擇器

1、相鄰兄弟選擇器，CSS2推出

#1、作用：給指定選擇器后面緊跟的那個選擇器選中的標簽設置屬性

#2、格式
選擇器1+選擇器2 {
    屬性：值;
}

#3、注意點：
1、相鄰兄弟選擇器必須通過+號鏈接
2、相鄰兄弟選擇器只能選中你緊跟其后的那個標簽，不能選中被隔開的標簽
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟選擇器title>

    <style type="text/css">
        h1+p {
            font-size: 50px;
        }   /* 相鄰兄弟解釋器*/  

    style>
head>
<body>
    <h1 >我是標題1h1>
    
    <p>我是段落p>
    <p>我是段落p>
    <p>我是段落p>
    <p>我是段落p>
    <p>我是段落p>
    <p>我是段落p>
    <p>我是段落p>
    <p>我是段落p>
    <p>我是段落p>
    <h1>我是標題2h1>
    <p>我是段落p>

body>
html>
相鄰兄弟解釋器演示

2、通用兄弟選擇器，CSS3推出

#1、作用：給指定選擇器后面的所有選擇器中的所有標簽設置屬性

#2、格式：
選擇器1~選擇器2 {
    屬性：值;
}

#3、注意點：
1、通用兄弟選擇器必須用~來鏈接
2、通用兄弟選擇器選中的是指選擇器后面的某個選擇器選中的所有標簽
無論有沒有被隔開，都可以被選中
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用兄弟選擇器title>

    <style type="text/css">

        h1~p {
            color: red;
        }    
   /*通用兄弟選擇器*/

    style>
head>
<body>
    <h1 >我是標題1h1>
    
    <p>我是段落p>
    <p>我是段落p>
    <p>我是段落p>
    <p>我是段落p>
    <p>我是段落p>
    <p>我是段落p>
    <p>我是段落p>
    <p>我是段落p>
    <p>我是段落p>
    <h1>我是標題2h1>
    <p>我是段落p>

body>
html>
通用兄弟解釋器實例

四、 交集選擇器與并集選擇器

1、交集選擇器

#1、作用：給所有選擇器選中的標簽中，相交的那部分標簽設置屬性

#2、格式：
    選擇器1選擇器2 {
        屬性：值;
    }

#3、注意：
1、選擇器與選擇器之間沒有任何鏈接符號
2、選擇器可以使用標簽名稱、id、class
3、交集選擇器在企業開發中并不多見，了解即可
   因為：p.part1 完全可以用.part1取代
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代選擇器title>

    <style type="text/css">
        p.part1 {
            color: red;
        }
        p#p1{
            font-size: 100px;
        }
    style>
head>
<body>
    <p class="part1">我是段落p>
    <p id="p1">我是段落p>
    <p class="part1">我是段落p>
    <p>我是段落p>
    <p>我是段落p>
    <p>我是段落p>

body>
html>
交集選擇器實例

2、并集選擇器

#1、作用：給所有滿足條件的標簽設置屬性

#2、格式：
    選擇器1,選擇器2 {
        屬性：值;
    }

#3、注意：
1、選擇器與選擇器之間必須用逗號來鏈接
2、選擇器可以使用標簽名稱、id、class
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集選擇器title>

    <style type="text/css">
        .part1,h1,a {
            color: red;
        }
    style>
head>
<body>
    <h1>哈哈啊h1>
    <p class="part1">我是段落p>
    <p id="p1">我是段落p>
    <p class="part1">我是段落p>
    <a href="#">我是我a>
    <p>我是段落p>
    <p>我是段落p>
    <p>我是段落p>

body>
html>
并集選擇器實例

五、 序列選擇器

#1、作用：
css3中新推出的選擇器中，最具代表性的的9個，又稱為序列選擇器，
過去的選擇器中要選中某個必須加id或class，學習了這9個后，不用加id或class，
想選中同級別的第幾個就選第幾個

#2、格式
#2.1 同級別
:first-child    p:first-child    同級別的第一個
:last-child    p:last-child    同級別的最后一個
:nth-child(n)                    同級別的第n個
:nth-last-child(n)            同級別的倒數第n個

#2.2 同級別同類型
:first-of-type                    同級別同類型的第一個
:last-of-type                    同級別同類型的最后一個
:nth-of-type(n)                    同級別同類型的第n個
:nth-last-of-type(n)            同級別同類型的倒數第n個

#2.3 其他
:only-of-type                    同類型的唯一一個
:only-child                         同級別的唯一一個
#1、同級別的第一個
#1.1 示范一
p:first-child { 
    color: red;
}
代表：同級別的第一個，并且第一個要求是一個p標簽

<p>我是段落1p>
<p>我是段落2p>
<p>我是段落3p>
<p>我是段落4p>
<p>我是段落5p>
<div>
    <p>我是段落6p>
div>

這樣的話第一個p和div中的第一個p都變成紅色，

#1.2 示范二
p:first-child {
    color: red;
}
代表：同級別的第一個，并且第一個要求是一個p標簽

<h1>w我是標題h1>
<p>我是段落1p>
<p>我是段落2p>
<p>我是段落3p>
<p>我是段落4p>
<p>我是段落5p>
<div>
    <p>我是段落6p>
div>

這樣的話只有div中的第一個p變紅，因為在有在div內同一級別的第一個才是p

注意點：
    :fist-child就是第一個孩子，不區分類型

#2、同級別的最后一個
p:last-child {
    color: red;
}
代表：同級別的最后一個，并且最后一個要求是一個p標簽

<h1>我是標題h1>
<p>我是段落1p>
<p>我是段落2p>
<p>我是段落3p>
<p>我是段落4p>
<p>我是段落5p>
<div>
    <

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2220.html

相關文章

  • 前端基礎入門二（CSS）

    摘要：輸入的時候少按一個鍵瀏覽器兼容問題比如使用的選擇器命名，在是無效的能良好區分變量命名變量命名是用不要純數字中文等命名，盡量使用英文字母來表示。選擇器和類選擇器最大的不同在于使用次數上。當需要設置英文字體時，英文字體名必須位于中文字體名之前。 回顧上一節HTML 思維導圖 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...

    Lorry_Lu 評論0 收藏0

  • CSS基礎知識整理

    摘要：語法基礎語法規則由兩個主要部分構成選擇器以及一條或多條聲明。語法名屬性屬性值屬性屬性值屬性屬性值選擇器選擇器用于描述一組元素的樣式，也叫做類選擇器。后代選則器又稱為包含選擇器，以空格分隔，子元素選擇器只能選擇作為某元素子元素的元素。 1 什么是CSS？ CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表），主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高...

    Edison 評論0 收藏0

  • 前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

    li21 評論0 收藏0

  • 前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

    AaronYuan 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<