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

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

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

    
    
    


    
 标记选择器(直接使用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

魔法映像企业网站管理系统

技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作

下载

    
    
    


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

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

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

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

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

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

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

second.css

立即学习“前端免费学习笔记（深入）”；

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

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

second.html

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

    

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

second.css

立即学习“前端免费学习笔记（深入）”；

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

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

second.css

立即学习“前端免费学习笔记（深入）”；

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

    

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

second.css

立即学习“前端免费学习笔记（深入）”；

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

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

second.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

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

second.css

立即学习“前端免费学习笔记（深入）”；

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

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

css 类选择器和id选择器

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

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