HTML CSS 选择器

id重温

•1.<a herf '#' xxx> </a>#占位符，以后跳转到哪里不确定，所以在herf后面加了#，但是如果不加‘herf’，就会没链接效果。
•2.图片必须放img文件夹里。css文件夹放css文件等。

•3.<a href="http://www.baidu.com" id="down">联系我们可以靠id进行位置选择

•4.id属性在同一个网页只能有一个，不能重名，因为id唯一。
但是也可以用name，但是区别在于name可以重名，有重复，但是id唯一。

•4.<a href="#">回到顶部</a>
自动跳到顶部

style 样式

内部样式表

定义：也可以将CSS样式编写到head中的style标签里，称为内部样式表

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
    p{
        color: red;
        float-size:20px 
    }
    </style>
    

</head>
<body>
    <p>hello world</p>


</body>
</html>

最推荐样式，外部样式表：

<link rel="stylesheet" type="text/css" href="style.css" />

内联样式

style 内联样式，只对元素有作用。
定义：可以将CSS样式编写到元素的style属性当中，这种样式称为内联样式

GHGHGe.png

css.png

1、多个样式；链接。
2、缺点：不复用，所以不推荐。
3、CSS和html分开写，所以不推荐。
结果：内部样式表（推荐不是最推荐）
推荐外部样式表
4、 <style type='text/css'>兼容低版本浏览器
5、 css里面不能加html语法标签
6、 / / css 注释
7、选择器声明块。
p{color：red；}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS</title>
        <!-- 
            也可以将CSS样式编写到head中的style标签里，称为内部样式表
            将样式表编写的style标签中，然后通过CSS选择器选中指定元素
            然后可以同时为这些元素一起设置样式，这样可以使样式进一步的复用
            将样式表编写到style标签中，也可以使表现和结构进一步分离，它也是我们推荐的使用方式
        <style type="text/css">
            p{
                color:red;
                font-size:40px;
            }
        </style>
        -->
        
        <!-- 
            还可以将样式表编写到外部的CSS文件中，然后通过link标签来将外部的CSS文件引入到当前页面中
            这样外部文件中的CSS样式表将会应用到当前页面中
            将CSS样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表在不同的页面中使用
            最大限度地使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入
            可以利用浏览器的缓存，加快用户访问的速度，提高了用户体验
            所以在开发中我们最推荐使用的方式就是外部的CSS文件
        -->
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <!-- 
            可以将CSS样式编写到元素的style属性当中，这种样式称为内联样式
            内联样式只对当前的元素中的内容起作用，内联样式不方便复用
            内联样式属于结构与表现耦合，不方便后期的维护，不推荐使用的
        <p style="color:red;font-size:40px;">床前明月光，疑是地上霜</p>
        <p style="color:red;font-size:40px;">举头望明月，低头思故乡</p>
        -->
        <p>举头望明月，低头思故乡</p>
        <p>举头望明月，低头思故乡</p>
        <p>举头望明月，低头思故乡</p>
    </body>
</html>

快捷键

！tab 出来结构
h1 直接补全
ctrl 回车下一行
ctrl shift 回车上一行
h28出8个h2
ctrl alt 上下箭头多行选择
ul>(li>a)4 >包含
ctrl shift d 复制
p#p$*4 #（id）
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
ctrl shfit k 删除

块

**块元素独占一行 div p h1-h6 ui li等
内联元素（行内元素）只占自身大小，不独占一行 span a img iframe

用块包含内联而不能内联包含块除了 a（除了包含自己）可以包含任意元素
p不能包含别的块。 div等别的块可以包含别的块div等·别的块**

常用选择器：

元素选择器:标签名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
    
    p{
        color: red;
        float-size:20px 
    }

    </style>
    
</head>
<body>
    <p>hello world</p>


</body>
</html>

id选择器:#id属性值{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
    
    #p1{
        color: red;
        float-size:20px 
    }

    </style>
    
</head>
<body>
    <p id="p1">hello world</p>


</body>
</html>

类选择器：

.class属性值{}
id能完成class也可以完成，但是反过来不行。
 可以设置多个样式，class=‘p2 hello’
可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
    
    .p1{
        color: yellow;
        float-size:20px 
    }
    .p2{
        color: yellow;
        float-size:20px 
    }
    </style>
    
</head>
<body>
    <p class="p1  p2" >hello world</p>


</body>
</html>

选择器分组（并集选择器）

应用：多个选择器完成统一一样color ,size,背景

作用：通过选择器分组可以同时选中多个选择器对应的元素
选择器1，选择器2，选择器3{}
demo(多个选择器完成统一一样背景)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
    
    p1,p2{
        color: yellow;
        float-size:20px;
        background: red; 
    }

    </style>
    
</head>
<body>
    <p class="p1" >hello world</p>
    <p1>hello world</p>
    <p2>hello world</p>


</body>
</html>

通配选择器

所有东西都使用这个样式
*{}
demo(背景在内的全屏变红)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
    
    *{
        color: yellow;
        float-size:20px;
        background: red; 
    }

    </style>
    
</head>
<body>
    <p class="p1" >hello world</p>
    <p1>hello world</p>
    <p2>hello world</p>


</body>
</html>

复合选择器（可以选中同时满足多个元素）（交集选择器）

选择器1选择器2选择器N{}
（一般是class的）
id不建议使用复合选择器，本来就是唯一的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
    
    p1.a{
        color: yellow;
        float-size:20px;
        background: red; 
    }

    </style>
    
</head>
<body>
    <p class="p1" >hello world</p>
    <p1 class = 'a'> hello world</p1>
    <p2>hello world</p2>

</body>
</html>

demo(all chooser)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>常用选择器</title>
   <style type="text/css">
       为页面中的所有的p元素，设置一个字体颜色为红色*/
       
           元素选择器
               作用：通过元素选择器可以选择页面中的所有指定元素
               语法：标签名{}
       
       p{
           color: red;
       }
       h1{
           color: red;
       }

       
           id选择器
               作用：通过元素的id属性值选中唯一的一个元素
               语法：#id属性值{}
       
       #p1{
           font-size: 20px;
       }

       
           类选择器
               作用：通过元素的class属性值选中一组元素
               语法：.class属性值{}
       
       .p2{
           color: red;
       }
       .hello{
           font-size: 50px;
       }

       为id为p1的元素，class为p2的元素，还有h1，同时设置一个背景颜色为黄色*/
       
           选择器分组（并集选择器）
               作用：通过选择器分组可以同时选中多个选择器对应的元素
               语法：选择器1,选择器2,选择器N{}
       
       #p1,.p2,h1{
           background-color: yellow;
       }

       
           通配选择器
               作用：可以用来选中页面中的所有的元素
               语法：*{}
       
       *{
           color: red;
       }

       为拥有class为p3的span元素设置一个背景颜色为黄色
       
           复合选择器（交集选择器）
               作用：可以选中同时满足多个选择器的元素
               语法：选择器1选择器2选择器N{}
       
       span.p3{
           background-color: yellow;
       }
       
       对于id选择器来说，不建议使用复合选择器
       p#p1{
           background-color: red;
       }
       
   </style>
</head>
<body>
   <h1>悯农</h1>
   <p>床前明月光</p>
   <p>床前明月光</p>
   <p id="p1">床前明月光</p>
   <!-- 
       我们可以为元素设置class属性
       它和id属性类似，只不过class属性可以重复
       拥有相同class属性值的元素，我们说他们是一组元素
       可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
    -->
   <p class="p2 hello">床前明月光</p>
   <p class="p2">床前明月光</p>
   <p class="p2">床前明月光</p>
   <p>床前明月光</p>

   <p class="p3">床前明月光</p>
   <span class="p3">疑是地上霜</span>
</body>
</html>

子元素和后代元素选择器

    <div id="d1">
        <span>我是div标签中的span</span>
        <p><span>我是p标签中的span</span></p>
    </div>

上图总结：祖先元素。span -->p div

后代元素选择器（只选择后代的元素兄弟不包含）

•作用：选中指定元素的指定后代元素
•语法：祖先元素后代元素{}
•结果：只要是祖先元素的都变。二个的话就都变，用
•id选择就可以只选择一个
•选择器越短越好 3个一下

demo(二个都变)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
    
    div span{
        color: yellow;
        float-size:20px;
        background: red; 
    }

    </style>
    
</head>
<body>
    
    <div>
        <span>
        走走走
        </span>
        <p>
            <span>
                ggggo
            </span>
        </p>
    </div>

</body>
</html>

子元素选择器

（选中父元素指定的子元素）
父元素 > 子元素（只能其子，孙不可以）ie6不支持

demo(只变第一个走，因为只有走为子元素。go为孙子)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
    
    div > span{
        color: yellow;
        float-size:20px;
        background: red; 
    }

    </style>
    
</head>
<body>
    
    <div>
        <span>
        走走走
        </span>
        <p>
            <span>
                ggggo
            </span>
        </p>
    </div>

</body>
</html>



demo（all）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素和后代元素选择器</title>
    <style type="text/css">
        /*为div中的span设置一个颜色为绿色*/
        /*
            后代元素选择器
                作用：选中指定元素的指定后代元素
                语法：祖先元素 后代元素{}
        */
        #d1 span{
            color: greenyellow;
        }

        /*选中id为d1的div中的p元素中的span元素*/
        #d1 p span{
            font-size: 50px;
        }

        /*为div的子元素span设置一个背景颜色为黄色*/
        /*
            子元素选择器
                作用：选中指定父元素的指定子元素
                语法：父元素 > 子元素
            IE6及以下的浏览器不支持子元素选择器
        */
        div > span{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <!-- 
        元素之间的关系
            父元素：直接包含子元素的元素
            子元素：直接被父元素包含的元素
            祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
            后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
            兄弟元素：拥有相同父元素的元素叫做兄弟元素
     -->
    <div id="d1">
        <span>我是div标签中的span</span>
        <p><span>我是p标签中的span</span></p>
    </div>
    <div>
        <span>我是body标签中的span</span>
    </div>
</body>
</html>

伪类选择器（：开头的）

（链接（如百度和不知名网站）看过的和没看过的样式设置）

•：link 没访问过的链接普通链接
•：visted 访问过的链接（只能设置颜色为了保护隐
私 ie6可以设置背景颜色其他的不行）
（通过历史记录所以判断访问没访问）
•：hover 鼠标移入的状态别的标签也可以
•：active 超链接被点击的状态 i6不支持a以外的
伪类状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
    
        a:link{
            color: red;
        }
        a:visted{
            color: yellow;
        }
        a:hover{
            color: yellow;
        }
        a:active{
            color: yellow;
        }
    

    </style>
    
</head>
<body>
    
    <a class='abc' href="http://www.baidu.com">访问过的链接</a>
</body>
</html>

•input 设置文本输入框 ie6不支持
光标放到文本框，获取焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
    
    input:focus{
        background: yellow
    }

    </style>
    
</head>
<body>
    
    <input type="text">
</body>
</html>

•：：selection选中元素（选中元素原来字体能改变样式）
：：-moz-selection 兼容火狐浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
    
    p::selection{
        background-color: yellow;
    }

    </style>
    
</head>
<body>
    
    <p>选择内容会变色</p>
</body>
</html>

demo(all)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
        
            伪类专门用来表示元素的一种特殊的状态
            比如：访问过的超链接、普通的超链接、获取焦点的文本框
            当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
        
        
            为没访问过的链接设置一个颜色为绿色
                :link   表示普通的链接（没访问过的链接）
        
        a:link{
            color: yellowgreen;
            font-size: 50px;
        }
        
            为访问过的链接设置一个颜色为红色
                :visited    表示访问过的链接
            浏览器是通过历史记录来判断一个链接是否访问过
            由于涉及到用户的隐私问题，所以使用:visited伪类只能设置字体的颜色
        
        a:visited{
            color: red;
        }
        
            :hover  表示鼠标移入的状态
        
        a:hover{
            color: skyblue;
        }
        
            :active 表示超链接被点击的状态
        
        a:active{
            color: black;
        }

        
            :hover和:active也可以为其它元素设置
            IE6中，不支持对超链接以外的元素设置:hover和:active
        
        p:hover{
            background-color: gold;
        }
        p:active{
            background-color: orange;
        }

        /*文本框获取焦点以后，修改背景颜色为黄色*/
        input:focus{
            background-color: yellow;
        }

        
            为p标签中选中的内容使用样式可以使用::selection伪类
            注意：这个伪类在火狐中需要采用另一种方式编写
        
        /*兼容大部分浏览器的*/
        p::selection{
            background-color: orange;
        }
        兼容火狐的
        p::-moz-selection{
            background-color: orange;
        }
    </style>
</head>
<body>
    <a class="abc" href="http://www.baidu.com">访问过的链接</a>
    <br /><br />
    <a class="bcd" href="http://www.baidu123456.com">没访问过的链接</a>

    <p>我是一个段落</p>

    <!-- 使用input可以创建一个文本输入框 -->
    <input type="text" />
</body>
</html>

伪元素，位置

•p：first-letter变第一个字
•p: first-line 第一行变
•p:before 是<p>和第一个字之间 centent‘’ 会显示在<p>和第一个字之间，并且选不中。
•p:after

demo

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>伪元素</title>
   <style type="text/css">
       使用伪元素来表示元素中的一些特殊的位置*/
       为p中第一个字符来设置一个特殊的样式*/
        p:first-letter{
           color: red;
           font-size: 20px;
       } 
       为p中的第一行设置一个背景颜色为黄色*/
        p:first-line{
           background-color: yellow;
       } 
       
       :before表示元素最前边的部分
       一般它都需要结合content这个样式一起使用
       通过content可以向before或after的位置添加一些内容

       :after表示元素最后边的部分
       
       p:before{
           content: "我会出现在整个段落的最前边";
           color: green;
       }
       p:after{
           content: "我会出现在整个段落的最后边";
           color: orange;
       }
   </style>
</head>
<body>
   <p>
       秋夜 —鲁迅
　　在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。
　　这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地眨着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。


   </p>
</body>
</html>

属性选择器

xx属性值 p属性
<p titke='xx'>（在鼠标到文字上，可显示提示文字）

p[属性名]选取含有指定元素的元素
p[title ^=‘ab’]以指定内容开头的元素
p[title $=‘c’]以指定内容结尾的元素
p[title *=‘c’]包含

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style type="text/css">
        
        为所有具有title属性的p元素，设置一个背景颜色为黄色
        属性选择器
            作用：可以根据元素中的属性或属性值来选取指定元素
            语法：
                [属性名] 选取含有指定属性的元素
                [属性名="属性值"] 选取含有指定属性值的元素
                [属性名^="属性值"] 选取属性值以指定内容开头的元素
                [属性名$="属性值"] 选取属性值以指定内容结尾的元素
                [属性名*="属性值"] 选取属性值包含指定内容的元素
        p[title]{
            background-color: yellow;
        }
        
        为title属性值是hello的元素设置一个背景颜色为黄色
        p[title="hello"]{
            background-color: yellow;
        }
        
        为title属性值以ab开头的元素设置一个背景颜色为黄色
        p[title^="ab"]{
            background-color: yellow;
        }
        
        为title属性值以c结尾的元素设置一个背景颜色
        p[title$="c"]{
            background-color: yellow;
        }
        
        为title属性值包含c的元素设置一个背景颜色*/
        p[title*="c"]{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <!-- 
        title属性，这个属性可以给任何标签指定
        当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
     -->
    <p title="hello">我是一个段落</p>
    <p>我是一个段落</p>
    <p title="abbc">我是一个段落</p>
    <p title="abccd">我是一个段落</p>
    <p title="abc">我是一个段落</p>
</body>
</html>

子元素选择器

选中第一个p标签（第一行就给是）
只要是子元素，不论父元素是谁都可以
body>p：fist-child 只选择 body下的
p：fist-child 不写p相当于* （全家人去拍）

p：last-child （只认最后一个）
p：nth-child（3）表示第几个从1开始查询只要父类第三个就可以（odd奇数 even偶数用于隔行变色）
fist-of-type只要是第一的的就变黄（大儿子小儿子去排）
last-of-type只要是最后的的就变黄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
    /*当p不是第一个元素时，执行无结果*/
    p:first-child{
        background-color: yellow;
    }

    p:last-child{
            background-color: yellow;
        }
        /*当p不是最后一个元素时，执行无结果*/
    
    p:nth-child(even){
        background-color: yellow;
    }
    /*p:last-of-type{
            background-color: yellow;
        }*/

    </style>
    
</head>
<body>

    <p>我是一个p标签</p>
    <span>我是span</span>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <span>我是span</span>
    <p>我是一个p标签</p>
    <!-- <div>
        <p>我是一个p标签</p>
    </div> -->
</body>
</html>

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style type="text/css">
        
        为第一个p标签设置一个背景颜色为黄色
        :first-child 可以选中第一个子元素
        :last-child 可以选中最后一个子元素
        :nth-child 可以选中任意位置的子元素
            该选择器后边可以指定一个参数，指定要选中第几个子元素
            even 表示偶数位置的子元素
            odd 表示奇数位置的子元素

        body>p:first-child{
            background-color: yellow;
        }
        p:last-child{
            background-color: yellow;
        }
        p:nth-child(even){
            background-color: yellow;
        }
        
        
        :first-of-type
        :last-of-type
        :nth-of-type
            和child类似，只不过child是在所有的子元素中找
            而type是在当前类型的子元素中找
        
        p:first-of-type{
            background-color: yellow;
        }
        
        p:last-of-type{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <span>我是span</span>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <span>我是span</span>
    <!-- <div>
        <p>我是一个p标签</p>
    </div> -->
</body>
</html>

兄弟元素选择器

span + p{} span后面紧挨着他的p。不挨着也会执行没结果。
span ~ p{} 选中后面所有的兄弟元素不用挨着他的，只要后面的就可以。

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟元素选择器</title>
    <style type="text/css">
        
        为span后的一个p元素设置一个背景颜色为黄色
        后一个兄弟元素选择器
            作用：可以选中一个元素后紧挨着的指定的兄弟元素
            语法：前一个 + 后一个
        span + p{
            background-color: yellow;
        }
        
        
        选中后边的所有兄弟元素
            语法：前一个 ~ 后边所有
        
        span ~ p{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <span>我是一个span</span>
    <div>我是div</div>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
</body>
</html>

否定伪类

把p都设置除了某个
p：not（.hello）剔除指定的
p：not（.#p1）去除id=‘p1’的

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>否定伪类</title>
    <style type="text/css">
        
        为所有的p元素设置一个背景颜色为黄色，除了class值为hello的
        否定伪类：
            作用：可以从已选中的元素中剔除出某些元素
            语法：
                :not(选择器)
        
        p:not(.hello){
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p class="hello">我是一个p标签</span>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
</body>
</html>

样式的继承

（类似儿子继承父亲）
父类变了，子类也变（设置给父类，子类也会有）
背景相关的不会继承
透明（为了露出底层）

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式的继承</title>
    <style type="text/css">
        body{
            font-size: 30px;
        }
    </style>
</head>
<body>
    
    像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承
    利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式

    但是，并不是所有的样式都会被子元素所继承，比如：背景、边框、定位相关的样式都不会被继承
     
    <div style="background-color: yellow;">
        <p>
             我是p标签中的文字
             <span>我是span中的文字</span>
        </p>
    </div>
    <span>我是p元素外的span</span>
</body>
</html>

选择器的优先级

（权重）

内联样式 1000（因为权限高，所以不推荐用它。但是想用它，在别的元素后面加 !important这样最高优先级，要避免这二种）

id选择器 100

类和伪类 10

元素选择器 1

通配 * 0

继承样式没有优先级

多种元素优先级可以相加。

一样的优先级，选择后面的，前面的被覆盖。

并集选择器是单独计算的。（div只算div 不能和p比）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级</title>
<style type="text/css">
.p1{
background-color: yellow;
}
p{
background-color: red;
}
#p2{
background-color: yellowgreen;
}
p#p2{
background-color: red;
}
/*
当使用不同的选择器，选中同一个元素时，并且设置相同的样式时，这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定，优先级高的优先显示

    优先级的规则
        内联样式，优先级1000
        id选择器，优先级100
        类和伪类，优先级10
        元素选择器，优先级1
        通配*，优先级0
        继承的样式，没有优先级

    当选择器中包含多种选择器时，需要将多种选择器的优先级相加，然后再比较
    但是注意，选择器优先级计算不会超过他的最大的数量级
    如果选择器的优先级一样，则使用靠后的样式
    并集选择器的优先级是单独计算的
        div, p, #p1, .hello{}

    可以在样式的最后添加一个!important，则此时该样式将会获取一个最高的优先级，将会优先于所有的样式显示，甚至超过内联样式，但是在开发中，尽量避免使用!important
    */
    *{
        font-size: 50px;
    }
    p{
        font-size: 30px;
    }
    .p3{
        color: green;
    }
    .p1{
        color: yellow;
        background-color: skyblue !important;
    }
</style>

</head>
<body>
<p class="p1 p3" id="p2" style="background-color: orange;">
我是一个段落
<span>我是p标签中的span</span>
</p>
</body>
</html>

a的伪类

active 放在hover前面 active被覆盖了没用了
lvha的顺序写。
简记：爱与恨。

demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a的伪类</title>
<style type="text/css">
/*
涉及到a的伪类一共有四个
:link
:visited
:hover
:active
而这四个选择器的优先级是一样的
*/
a:link{
color: yellowgreen;
}
a:visited{
color: red;
}
a:hover{
color: orange;
}
a:active{
color: cornflowerblue;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a>

<a href="http://www.baidu123456.com">未访问过的链接</a>
</body>
</html>

1.plate (plate 元素)
2.bento (bento 元素)
3.#fancy （id 元素）
4.plate apple (后代元素)
5.#fancy pickle后代元素选择器
6..small,plate apple类选择器
7.orange.small
8.bento orange
9.plate,bento,div
10.*通配选择器sz
11.plate *后代元素选择器 .plate 中所有，不是包含
12.plate+apple兄弟元素选择器
13.bento~pickle兄弟元素选择器
14.plate>apple子元素选择器
15.orange:first-child子元素选择器
16.apple:only-child,pickle:only-child
17.apple:last-child,pickle:last-child子元素选择器
18.plate:nth-child(3)子元素选择器
19.bento:nth-last-child(4)子元素选择器
20.apple:first-of-type子元素选择器
21.plate:nth-of-type(even)子元素选择器
22.plate:nth-of-type(3),plate:nth-of-type(5)
23.apple:only-of-type子元素选择器只有苹果
24.orange.small:last-of-type,apple.small:last-of-type
25.bento:empty 子元素选择器子元素为空
26.apple.not(.small) 否定伪类去除small类

QQ截图20180807202525.png

最后编辑于：2018.08.07 22:37:32

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,126评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,254评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,445评论 0赞 341
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,185评论 1赞 278
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,178评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,970评论 1赞 284
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,276评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,927评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,400评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,883评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,997评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,646评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,213评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,204评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,423评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,423评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,722评论 2赞 345

HTML CSS 选择器

推荐阅读更多精彩内容