1.元素关系选择器

1）子选择器（只选择子代）：div>p,div的子标签p。当使用>符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系，区别于后代选择器（所有后代，不只限于子代）

2）相邻兄弟选择器：相邻兄弟选择器 a+b，选择a后面紧邻的b元素，一般用于图片后面的文字介绍

3）通用兄弟选择器：a~b,选择a元素之后的所有同层级b元素，即使中间被隔开；行内元素不换行，块级元素换行。

2.序号选择器

1) :first-child 选择第一个子元素，是选取属于其父元素的首个子元素的指定选择器

2) :last-child 最后一个子元素，匹配属于其父元素的最后一个子元素

3) :nth-child(3) 第三个子元素，：nth-child()可以写成an+b的形式，表示从b开始每a个选一个，注意不能写b+an，2n+1等价于odd,是奇数（匹配属于其父元素的下标为奇数的子元）；2n等价于even，是偶数（配属于其父元素的下标为偶数的子元素）。

4) :nth-of-type(3) 第三个某类型子元素。将选择同种标签指定序号的子元素

:last-of-type匹配属于其父元素的特定类型的最后一个子元素；

5) :nth-last-child（3）倒数第三个子元素。匹配属于其父元素的第N个子元素的每个元素，从最后一个子元素开始计数，不论子元素的类型。不论子元素的类型可以理解为，计数时，不按类型，但是显示的时候，还是要看的

6) :nth-last-of-type(3) 倒数第三个某类型子元素。选择属于父元素的特定类型的第N个子元素，从最后一个子元素开始计数

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            border: 1px solid black;
        }
        .box1 p:first-child{
            color: green;
        }
        .box1 p:last-child{
            color: red;
        }
        .box2 p:nth-child(3){
            color: skyblue;
        }
        .box3 p:nth-child(2n+1){
            color: springgreen;
        }
        .box4 p:nth-of-type(3){
            color: chocolate;
        }
        .box4 p:nth-of-type(3){
            color: rgb(136, 50, 79);
        }
        .box5 p:nth-last-child(2){
            color: tomato;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
    <div class="box2">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
    <div class="box3">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
    <div class="box4">
        <p>我是1号p</p>
        <p>我是2号p</p>
        <h3>我是一号h3</h3>
        <h3>我是二号h3</h3>
        <p>我是3号p</p>
        <p>我是4号p</p>
        <h3>我是三号p3</h3>
        <h3>我是四号p3</h3>
    </div>
    <div class="box5">
        <p>我是1号p</p>
        <p>我是2号p</p>
        <p>我是3号p</p>
        <p>我是4号p</p>
    </div>
</body>
</html>

3.属性选择器

CSS3基础语法与盒模型（二）CSS3选择器（2）选择器与伪元素1.元素关系选择器5.层叠性和选择器权重计算

小分析:

1.Element[attribute~=value]选择器用于选取属性值中包含指定词汇的元素。div[class~="s"]选择器选中的是class值列表中包含“s”的元素

2.lement[attribute^="value"]匹配指定属性的指定value值开头的元素，如果class中有多个value值，第一个值中的第一个字母不是指定的值，即使后面的属性中首字母是指定的值，那么也不能匹配上，比如，<div class="one stwo">，第一个值的首字母是"o"，即使后面的值stwo的首字母是“s”，那么也匹配不上.

错题解析：

CSS3基础语法与盒模型（二）CSS3选择器（2）选择器与伪元素1.元素关系选择器5.层叠性和选择器权重计算

4.css3新增伪类

p:empty{}选择空白的p标签。
input:focus{}为当前聚焦的表单元素设置样式。
input:enabled{}为当前可选中的表单元素设置样式
input:disabled{}为当前不可选中的表单元素设置样式
input:checked{}为已经勾选的单选按钮或者复选框设置样式，目前主流的浏览器都能兼容。
:root{}选择根元素(即html元素，:root等价于html），为整个网页设置默认样式

注意：

1、空白和换行不能视为空标签

2、可以给标签加上disabled属性，使它无法被选中

3、还可以用类似input:checked+span这样的方式，给已勾选的input标签的后面的span标签设计样式

4、：root前面不需要加任何东西，等价于直接写html{ }

5.伪元素

1）::before创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置content属性表示其中的内容。
::after伪元素后面添加元素，创建一个伪元素，其将成为匹配选中的元素的最后一个子元素，必须设置content属性表示其中的内容。

CSS3基础语法与盒模型（二）CSS3选择器（2）选择器与伪元素1.元素关系选择器5.层叠性和选择器权重计算

必须设置content属性，哪怕将它置空。

2）::selection 选择内容元素，css伪元素应用于文档中被用户高亮的部分（使用鼠标圈选的部分）

3）::first-letter 会选中某元素中（必须是块级元素）第一行的第一个字母

::first-line 会选中某元素中（必须是块级元素）第一行全部文字

伪元素两冒号

伪类单冒号

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a::before{
            content:'★';
        }
        a::after{
            content:'❤' ;
        }
        .box1{
            width: 400px;
            height: 300px;
            border: 1px solid #000;
        }
        .box1::selection{
            /* 背景颜色 */
            background-color: green;
        }
        .box1::first-letter{
            font-size: 50px;
        }
        .box1::first-line{
            /* 添加下划线 */
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p>
        <a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >我是超级链接</a>
    </p>
    <p>
        <a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >我是超级链接</a>
    </p>
    <p>
        <a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >我是超级链接</a>
    </p>
    <div class="box1">
        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
    </div>
</body>
</html>

CSS3基础语法与盒模型（二）CSS3选择器（2）选择器与伪元素1.元素关系选择器5.层叠性和选择器权重计算

5.层叠性和选择器权重计算

1.含义：CSS3全名叫做“层叠式样式表”，其重要的性质是层叠性。

层叠性，多个选择器可以同时作用于同一个标签，效果叠加。

2.层叠性的冲突处理

Q：如果多个选择器定义的属性有冲突呢？

A：id权重>class权重>标签权重

复杂选择器的权重计算：可以通过id个数，class个数，标签个数的顺序计算出权重

行内样式的优先级>内部样式的优先级

（很多地方都会讲成内部样式优先级比外部样式高，其实是不对的，内部样式和外部样式是具有相同的优先级的，就看谁出现的位置靠后，谁优先。）

3. !Important提升权重

如果我们需要将某个选择器的某条属性提升权重，可以在属性后面写！important (很多公司不允许使用，这会导致不经意的属性冲突）

.spec{
    color:blue ！important ;
}

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 权重（2,0,1） 
        */
        #box1 #box2 p{
            color: red;
        }
        /* 权重（2,1,2） 
        */
        #box1 div.box2 #box3 p{
            color: green;
        }
        /* 权重（0,3,1） 
        */
        .box1 .box2 .box3 p{
            color: blue;
        }
        /* 权重（0,1,1） 
        */
        .list li{
            color: red;
        }
        /* 权重（0,2,1） li.spec交集选择器
        */
        .list li.spec{
            color: springgreen;
        }
    </style>
</head>
<body>
    <div id="box1" class="box1">
        <div id="box2" class="box2">
            <div id="box3" class="box3">
                <p>我是段落</p>
            </div>
        </div>
    </div>
    <ul class="list">
        <li>列表项</li>
        <li class="spec">列表项</li>
        <li class="spec">列表项</li>
        <li>列表项</li>
    </ul>
</body>
</html>

CSS3基础语法与盒模型（二）CSS3选择器（2）选择器与伪元素1.元素关系选择器5.层叠性和选择器权重计算

1.元素关系选择器

2.序号选择器

3.属性选择器

4.css3新增伪类

5.伪元素

5.层叠性和选择器权重计算

继续阅读

【CSS3】设置超链接样式超链接样式

CSS颜色搭配（超级赞的几个网站）ColorSpaceWebGradientsGRADIENT BUTTONSUigradientsCoolHue 2.0EggradientsGradientaMesh GradientCool BackgroundDuotones

分享几个常用的css网站前言一、CSS 参考网站二、CSS 参考网站三、CSS集合，自由调节动画参数，生成代码片段：五、通过做饭，练习 CSS 选择器六、送小青蛙回家，学习 flex 布局总结

HTTP学习笔记（7）—— 确保WEB安全的HTTPS

HTML CSS 的鼠标悬浮，点击的样式当鼠标悬浮时：a:hover当鼠标点击链接时：a:active

推荐一些有用的网站一键分享制作网站小图标插件网站seo 相关的网站地图 api二维码相关

H5测试点

谈谈css的伪类和伪元素

用 Canvas 编织璀璨星空图

HTML5Canvas 酷炫效果

龙珠训练营task04

十大酷炫屌的图像悬停特效

jQuery练习一. 选择器练习二. DOM操作练习三. 事件练习

vue3 transitionvue3 transition组件和vue2 transition组件

layui多任务上传添加进度条