当前位置：Gxlcms > css > css选择器有哪些？css选择器使用总结

css选择器有哪些？css选择器使用总结

时间：2021-07-01 10:21:17 帮助过：62人阅读

本篇文章给大家带来的内容是关于css选择器有哪些？css选择器使用总结，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1.选择符(器)使用基本语法
选择符｛ 属性1：属性值1;
属性2：属性值2;
属性3：属性值3;
…..: …….;
}
2.标记选择器(直接使用HTML标签做选择器)
second.html

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>标记选择器</title>
  6.     <link href="second.css" type="text/css"   rel="stylesheet">
  7. </head>
  8. <body>
  9.     <p> 标记选择器(直接使用html标签做选择器)</p>
  10. </body>
  11. </html>

second.css

  1. p{
  2.     font-size:34px;   
  3.     text-align:left;    
  4.     text-transform:uppercase;    
  5.     font-family:黑体,宋体;    
  6.     text-indent:3em;    
  7.     text-decoration:line-through;    
  8.     font-weight:bolder;    
  9.     letter-spacing:0.5em;    
  10.     line-height:3px;    
  11.     margin:34px;    
  12.     padding:23px;
  13.     }

3.类选择器(为每一个标签设置一个类名，CSS可通过类名为标签设置样式，不同标签类名可以相同，相同可以共用同一个样式)-CSS中用标签名.类名或者.类名表示

second.html

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

second.css

  1. .text{
  2.     font-variant:small-caps;/*小型大写字母*/
  3.     font-family:宋体,黑体;    
  4.     font-style:italic;    
  5.     text-transform:lowercase;    
  6.     font-size:35px;    
  7.     text-indent:3em;    
  8.     text-decoration:overline;    
  9.     font-weight:bold;    
  10.     letter-spacing: 1px;    
  11.     line-height:3em;    
  12.     font-variant:small-caps;    
  13.     text-align:right;
  14.     }

4.ID选择器(为每一个HTML标签设置一个唯一的ID，CSS可以通过id来为标签设置样式)
—-CSS中用#id值{ }来表示

second.html

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

second.css

  1. .text{
  2.     font-variant:small-caps;/*小型大写字母*/
  3.     font-family:宋体,黑体;    
  4.     font-style:italic;    
  5.     text-transform:lowercase;    
  6.     font-size:35px;    
  7.     text-indent:3em;    
  8.     text-decoration:overline;
  9.     }
  10. #textp1{
  11.     font-weight:bold;    
  12.     letter-spacing: 1px;    
  13.     line-height:3em;    
  14.     font-variant:small-caps;    
  15.     text-align:right;
  16.     }

5.包含选择器(后代选择器：可跨代,跨标签)：在一个标签里包含另一个标签
second.html

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

second.css

  1. p a{
  2.     
  3.     text-decoration:none;    
  4.     font-size:25px;    
  5.     background-color:pink;
  6.     }
  7. .text{
  8.     font-size:21px;    
  9.     font-style:normal;    
  10.     text-transform:lowercase;    
  11.     text-indent:3em;    
  12.     font-weight:bold;    
  13.     letter-spacing:0.7em;    
  14.     line-height:27px;
  15.     }

6.子选择符（IE浏览器不支持）：中间不能包含其他标签；CSS中用 标签1 >标签2（子标签） 表示

second.html

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

second.css

  1. p>a{
  2.     text-decoration:none;    
  3.     font-family:黑体，宋体;
  4.     }
  5. p{    
  6. font-size: 23px;
  7. }

7.相邻选择器:(CSS样式作用在最后一个标签)常用设置表格的列属性–CSS用标签1+….标签n表示

second.html

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>相邻选择器</title>
  6.     <link href="second.css" type="text/css"   rel="stylesheet">
  7.     </head>
  8.     <body>
  9.     <p  class="text" > 
  10.             子选择器:
  11.             （IE浏览器不支持）：中间不能包含其他标签；CSS中 标签1 >标签2（子标签） 表示 
  12.     </p>
  13.     <p class="text1">
  14.         相邻选择器(CSS样式作用在最后一个标签)常用设置表格的列属性--CSS用标签1+....标签n表示    </p>
  15.         </body>
  16.         </html>

second.css

  1. .text+.text1{
  2.     color:pink;    
  3.     background-color:gray;    
  4.     font-size:34px;
  5.     }

8.并集选择器:多个标签一起设置样式，用逗号隔开

second.css

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>并集选择器</title>
  6.     <link href="second.css" type="text/css"   rel="stylesheet">
  7.     </head>
  8.     <body>
  9.     <p  class="text" > 
  10.             子选择器:
  11.             （IE浏览器不支持）：中间不能包含其他标签；CSS中 标签1 >标签2（子标签） 表示 
  12.     </p>
  13.     <p class="text1">
  14.         并集选择器:多个标签一起设置样式，用逗号隔开    </p>
  15.         </body>
  16.         </html>

second.css

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

9.伪类(元素某一种状态，常用于描述超链接的状态：link(未访问状态); visited(已经访问过的状态);hover(鼠标经过状态);active(正在单击状态)CSS用标签名：状态表示

second.html

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>伪类</title>
  6.     <link href="second.css" type="text/css"   rel="stylesheet">
  7.     </head>
  8.     <body>
  9.     <a href="" class="a1">伪类</a>
  10.     </body>
  11.     </html>

second.css

  1. a:link {
  2.     color:blue;    
  3.     font-size:53px;    
  4.     text-decoration: none;
  5.     }
  6. a:visited {
  7.     color:red;    
  8.     font-size:193px;
  9.     }
  10. a:hover  {
  11.     color:green;    
  12.     font-size:73px;
  13.     }
  14. a:active  {
  15.     color:gray;    
  16.     font-size:183px;
  17.     }

10.伪元素(某个对象中某个元素的状态)CSS中用标签名：伪类表示
常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行])
second.html

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

second.css

  1. p:first-letter{
  2.     font-size:200%;
  3.     }
  4. p:first-line{
  5.     color:red;
  6.     }

11样式优先级：内联选择器>ID选择器>类选择器（伪类，属性）>标记选择器
可以用!important;加大优先级
相关推荐：

css 类选择器和id选择器

CSS之后代选择器与多类选择器

css 标签选择器、id选择器、类选择器实例

以上就是css选择器有哪些？css选择器使用总结的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！