首頁 > 文章 > web前端 > css選擇器有哪些？ css選擇器使用總結

css選擇器有哪些？ css選擇器使用總結

不言原創: 2018-08-18 14:40:021991瀏覽

這篇文章帶給大家的內容是關於css選擇器有哪些？ css選擇器使用總結，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

1.選擇符號(器)使用基本語法
選擇符｛屬性1：屬性值1;
屬性2：屬性值2;
屬性3：屬性值3;
…..: …….;
}
2.標記選擇器(直接使用HTML標籤做選擇器)
second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>标记选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
</head>
<body>
    <p> 标记选择器(直接使用html标签做选择器)</p>
</body>
</html>

second.css

p{
    font-size:34px;   
    text-align:left;    
    text-transform:uppercase;    
    font-family:黑体,宋体;    
    text-indent:3em;    
    text-decoration:line-through;    
    font-weight:bolder;    
    letter-spacing:0.5em;    
    line-height:3px;    
    margin:34px;    
    padding:23px;
    }

3.類別選擇器(為每一個標籤設定一個類別名，CSS可透過類別名稱為標籤設定樣式，不同標籤類別名稱可以相同，相同可以共用同一個樣式)-CSS中以標籤名稱.類別名稱或.類別名稱表示

second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>类选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
</head>
<body>
    <p  class="text"> 类选择器(为每一个标签设置一个类名，CSS可通过类名为标签设置样式，不同标签类名可以相同，
    相同可以共用同一个样式)---CSS中用标签名.类名或者.类名表示    </p>
</body>
</html>

second.css

.text{
    font-variant:small-caps;/*小型大写字母*/
    font-family:宋体,黑体;    
    font-style:italic;    
    text-transform:lowercase;    
    font-size:35px;    
    text-indent:3em;    
    text-decoration:overline;    
    font-weight:bold;    
    letter-spacing: 1px;    
    line-height:3em;    
    font-variant:small-caps;    
    text-align:right;
    }

4.ID選擇器(為每個HTML標籤設定一個唯一的ID，CSS可以透過id來為標籤設定樣式)
—-CSS中用#id值{ }來表示

second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>ID选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" id="textp1"> ID选择器(为每一个HTML标签设置一个唯一的ID，CSS可以通过id来为标签设置样式)
    ----CSS中用#id值{ }来表示    </p>
    </body>
    </html>

second.css

.text{
    font-variant:small-caps;/*小型大写字母*/
    font-family:宋体,黑体;    
    font-style:italic;    
    text-transform:lowercase;    
    font-size:35px;    
    text-indent:3em;    
    text-decoration:overline;
    }
#textp1{
    font-weight:bold;    
    letter-spacing: 1px;    
    line-height:3em;    
    font-variant:small-caps;    
    text-align:right;
    }

5.包含選擇器(後代選擇器：可跨代,跨標籤)：在一個標籤裡包含另一個標籤
second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>包含选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" id="textp1">  <a href="#" class="link">ID选择器</a>
        (为每一个html标签设置一个唯一的ID，CSS可以通过id来为标签设置样式)
     ----CSS中用#id值{ }来表示    </p>
     </body>
     </html>

second.css

p a{
    
    text-decoration:none;    
    font-size:25px;    
    background-color:pink;
    }
.text{
    font-size:21px;    
    font-style:normal;    
    text-transform:lowercase;    
    text-indent:3em;    
    font-weight:bold;    
    letter-spacing:0.7em;    
    line-height:27px;
    }

6.子選擇符（IE瀏覽器不支援）：中間不能包含其他標籤；CSS中以標籤1 >標籤2（子標籤）表示

second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>子选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" id="textp1"> 
             <a href="#" class="link">子选择器</a>
            （IE浏览器不支持）：中间不能包含其他标签；CSS中 标签1 >标签2（子标签） 表示 
    </p>
    </body>
    </html>

second.css

p>a{
    text-decoration:none;    
    font-family:黑体，宋体;
    }
p{    
font-size: 23px;
}

7.相鄰選擇器:(CSS樣式作用在最後一個標籤)常用設定表格的列屬性–CSS用標籤1 ….標籤n表示

second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>相邻选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" > 
            子选择器:
            （IE浏览器不支持）：中间不能包含其他标签；CSS中 标签1 >标签2（子标签） 表示 
    </p>

    <p class="text1">
        相邻选择器(CSS样式作用在最后一个标签)常用设置表格的列属性--CSS用标签1+....标签n表示    </p>
        </body>
        </html>

second.css

.text+.text1{
    color:pink;    
    background-color:gray;    
    font-size:34px;
    }

8.並集選擇器:多個標籤一起設定樣式，用逗號隔開

second.css

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>并集选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" > 
            子选择器:
            （IE浏览器不支持）：中间不能包含其他标签；CSS中 标签1 >标签2（子标签） 表示 
    </p>

    <p class="text1">
        并集选择器:多个标签一起设置样式，用逗号隔开    </p>
        </body>
        </html>

second.css

.text,.text1{
    color:pink;
    background-color:gray;    
    font-size:34px;}

9.偽類別(元素某一種狀態，常用於描述超連結的狀態：link(未存取狀態); visited(已經造訪過的狀態);hover(滑鼠經過狀態);active(正在點選狀態)CSS用標籤名：狀態表示

second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>伪类</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <a href="" class="a1">伪类</a>
    </body>
    </html>

second.css

a:link {
    color:blue;    
    font-size:53px;    
    text-decoration: none;
    }
a:visited {
    color:red;    
    font-size:193px;
    }
a:hover  {
    color:green;    
    font-size:73px;
    }
a:active  {
    color:gray;    
    font-size:183px;
    }

10.偽元素(某個物件中某個元素的狀態)CSS中用標籤名：偽類別表示
常用的有(first-letter[作用於文字首字]，first-line[作用於文字首行])
second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>伪类</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p>伪元素(某个对象中某个元素的状态)CSS中用标签名：
 伪元素常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行])  
 <br>伪元素(某个对象中某个元素的状态)CSS中用标签名：
 伪元素常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行])    </p>
 </body>
 </html>

second.css

p:first-letter{
    font-size:200%;
    }
p:first-line{
    color:red;
    }

11樣式優先權：內嵌選擇器>ID選擇器>類別選擇器（偽類，屬性）>標記選擇器
可以用!important;加大優先權
相關建議：

css 類別選擇器與id選擇器

#CSS之後代選擇器與多類別選擇器

css 標籤選擇器、id選擇器、類別選擇器實例

以上是css選擇器有哪些？ css選擇器使用總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css css3 html 对象选择器伪类伪元素

陳述：

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

上一篇：css的盒子模型屬性有哪些？ css盒子模型相關屬性的介紹下一篇：css的盒子模型屬性有哪些？ css盒子模型相關屬性的介紹

看更多