零基础学前端开发之CSS3深入选择器

﹏ヽ暗。殇╰゛Y 2022-09-11 12:28 238阅读 0赞

**知识点：**

1.并集选择器（多个）

2.交集选择器（组合选择器）

3.子代选择器

4.后代选择器

5.属性选择器

6.结构伪类选择器

7.伪元素选择器

8.案例作业

**1.并集选择器**

语法：

选择器1，选择器2，选择器n{共同的属性1：值1;...n;}

含义：

将选择器1，选择器2，选择器n，共同的属性，一次性，统一设置。

优点：

可以节省我们的代码，提高工作效率。
    
    h1,h2,p{font-size: 18px;color: red;}
    当多个标签的样式一样的时候，可以使用“，”隔开，这样这些标签定义的样式，就一模一样。

<!DOCTYPE html>
    <html lang="en">
    
    <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> /* 1.并集选择器 */ h1, h2 { text-align: center; } </style>
    </head>
    
    <body>
        <h1>静夜思</h1>
        <hr>
        <h2>作者：李白</h2>
        <p>窗前明月光</p>
        <p>看着心发慌</p>
    </body>
    
    </html>

**2.交集选择器**

既要符合选择器1的特点，也要符合选择器2的特点；

优点：

可以精确定位到某个网页元素。

精确定位：

如何写这个标签；
    
    选择器1选择器2{属性：值;}
    
    p.yuebing{color:blueviolet;
    			font-weight: bolder;}
    这种定义，表示：类样式是yuebing的p标签。它既符合p的样式规则，又符合yuebing的样式规则。
    font-weight:课设置加粗或细；span:小区域的标签，比p段落范围小。

<!DOCTYPE html>
    <html lang="en">
    
    <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> h1, h2 { text-align: center; } p { font-size: 28px; } .content { color: green; } /* 颜色也变一下 */ /* 精确定位 */ p.content { font-size: 36px; color: red; } .a { color: blue; } .b { font-size: 72px; } </style>
    </head>
    
    <body>
        <h1>新时代.悯码农</h1>
        <hr>
        <h2>张Sir</h2>
        <p>锄禾日当午</p>
        <p>代码真辛苦</p>
        <p class="content">跟着老张学</p>
        <p class="a b">一点不辛苦</p>
        <div class="content">简介，写字间里面的新时达.........</div>
    </body>
    
    </html>

**3.子代选择器**

父子关系；兄弟关系；

父元素下的子元素，如何进行修饰，进行查找定位.

格式：

父元素>子元素{样式声明；}

子代选择器：只包含直接儿子层级

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">    
        <title>Document</title>
        <style>
            /* 设置父div father的子元素p的颜色和字体等 */
            .father>p {
                font-size: 18px;
                color: red;
                font-family: '楷体';
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="son">儿子DIV
                <p>孙子p</p>
            </div>
            <p p>儿子p</p>
        </div>
    </body>
    </html>

**4.后代选择器**

祖代元素 后代元素的关系;

语法：

祖代元素  后代元素{样式声明;}

注意：

1.祖代元素和后代元素之间是有空格的；
    
    2.后代元素包括子级元素，孙子级元素，重孙子，玄孙子...
    
    <p>儿子p</p>
        <p>儿子p</p>
        <ul>
            <li>
                <p>重孙女</p>
            </li>
        </ul>

样式代码

body p {
                font-size: 24px;
                color: red;
                border: 1px solid #f00;
            }

<!DOCTYPE html>
    <html lang="en">
    
    <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> /* 祖代：body p p ul 孙子li p body 下面的后代p,都设置了样式。 疑问：后代选择器 子代选择器，谁选择的内容更多？？？ */ body p { font-size: 24px; color: red; border: 1px solid #f00; } </style>
    </head>
    
    <body>
        <p>儿子p</p>
        <p>儿子p</p>
        <ul>
            <li>
                <p>重孙女</p>
            </li>
        </ul>
    </body>
    
    </html>

**5.兄弟选择器**

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（。

选择器+标签

<!DOCTYPE html>
    <html lang="en">
    
    <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> p { background-color: antiquewhite; } /* 类别选择器+标签选择器 兄弟：他们要相邻； +：表示相邻下一个兄弟; ~: 表示后面所有的兄弟； */ /* .zhugong+p { background-color: aquamarine; } */ .zhugong~.xiongdi { background-color: blue; } </style>
    </head>
    
    <body>
        <div>
            <p class="xiongdi">关羽</p>
            <p class="zhugong">刘备</p>
            <p class="xiongdi">张飞</p>
            <p class="xiongdi">吕布</p>
        </div>
    </body>
    
    </html>

**6.属性选择器**

属性选择器，可以根据元素特定的属性来选择元素，这样就不用借助类选择器或者 id选择器。

语法：

E:元素；Element; att:表示attribute 属性;

E \[ att \] 匹配具有 att 属性的 E 元素 例如：input \[ value \]

E \[ att = ‘val’ \] 匹配具有 att 属性且属性值等于 val 的 E元素

E \[ att ~= ‘val’ \] 匹配具有 att 属性且属性值包含 val词 的 E元素

E \[ att ^= ‘val’ \] 匹配具有 att 属性且属性值以 val 开头的 E元素

E \[ att $= ‘val’ \] 匹配具有 att 属性且属性值以 val 结尾的 E元素

E \[ att \*= ‘val’ \] 匹配具有 att 属性且属性值含有 val 的 E元素

注意：^以xx开头 href ^=‘www’

$以xx结尾
    
    		 *包含xx

为了更好的演示：

<div class="demo clearfix">
        <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
        <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
        <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
        <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
        <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
        <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
        <a href="" class="links item" title="open the website" lang="cn">7</a>
        <a href="" class="links item" title="close the website" lang="en-zh">8</a>
        <a href="" class="links item" title="http://www.jd.com">9</a>
        <a href="" class="links item last" id="last">10</a>
    </div>
    
    .demo {
        width: 300px;
        border: 1px solid #ccc;
        padding: 10px;         
    }
      
    .demo a {
        float: left;
        display: block;
        height: 20px;
        line-height: 20px;
        width: 20px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        text-align: center;
        background: #f36;
        color: green;
        margin-right: 5px;
        text-decoration: none;
    }

![在这里插入图片描述][40d243a81b7d4de29f6a62b7eb55e087.png]

**7.结构伪类选择器**

1、同级别（不区分类型）

父元素 E:first-child 父元素中的第一个子元素 E

父元素 E:last-child 父元素中的最后一个子元素 E

父元素 E:nth-child( n ) 父元素中的第 N 个子元素 E

注意：

ul :first-child\{ color:pink; \} // 选择 ul 下的第一个子元素（ 第一个子元素可以使 div，p，span任何子元素）

ul li:first-child\{ color: pink; \} // 选择 ul 下的第一个元素名是 li 的子元素

nth-child( n ) 注意点：（n 可以是数字，关键字和公式）

数字：选择第 n 个子元素，里面数字从 1 开始

关键字： even 偶数，odd 奇数

ul li:nth-child( even ) // 选择 ul 中所有 偶数行的 li 子元素

公式：常见公式如下（如果 n 是公式，则从 0 开始计算，但是第 0 个元素 或者超出了元素的个数会被忽略）

ul li:nth-child( n ) // 从 0 开始 每次加1 往后计算，相当于选择了所有的孩子 这里面必须是 n 不能是其他字母

偶数：2n 奇数：2n+1 5的倍数：5n 从第5个开始（包含第5个）到最后：n+5 前5 个（包含第5 个）：-n + 5

2、同类型（区分类型）

E:first-of-type：指定类型 E 的第一个

E:last-of-type：指定类型 E 的最后一个

E:nth-of-type( n )：指定类型 E 的第 n 个

区别：（两种相反的查找模式）

1.  nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第 n 个孩子，然后看看是否和 E 匹配
    
    nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配 E ，然后再根据 E 找第 n 个孩子

<!DOCTYPE html>
    <html lang="en">
    
    <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> /* ul#father>li:first-child { color: red; } ul#father>li:last-child { color: green; } */ /* n:0 没有；1：第一个; n:从0开始 */ /* #father>li:nth-child(2n) { background-color: #f00; } #father>li:nth-child(2n-1) { background-color: #f0f; } */ /* #father>li:nth-child(4n) { background-color: #f00; } */ /* #father>li:nth-child(2n-1) { background-color: #f0f; } */ /* even:偶数；2n odd:奇数;2n+1 */ /* #father>li:nth-child(even) { background-color: grey; width: 400px; } #father>li:nth-child(odd) { background-color: purple; width: 400px; } */ /* #father>li:first-of-type { color: red; } #father>li:last-of-type { color: yellow; } */ #father>li:nth-child(1) { color: wheat; } /* 区别： #father>p:nth-of-type(1):变色; 先匹配类型，再找序号; 这个也称为小类型判断；按照儿子再分个类型，女儿再排序； #father>li:nth-child(1) 不变色;先寻找序号，再匹配类型; 找的是li,但是实际是p,二者类型不一致，则颜色不变。 所有孩子里面的第一个li; */ </style>
    </head>
    
    <body>
        <ul id="father">
            <p>罗冠中</p>
            <li>关羽</li>
            <li>张飞</li>
            <li>赵云</li>
            <li>马超</li>
            <li>孙尚香</li>
            <li>孙茹</li>
            <li>曹操</li>
            <li>姜维</li>
        </ul>
        <ul id="mather">
            <li></li>
            <li></li>
        </ul>
    </body>
    
    </html>

**8.其他伪类选择器**

选择器 描述  
E:enabled 选择匹配E的所有可用UI元素。  
E:disabled 选择匹配E的所有不可用UI元素。  
E:checked 选择匹配E的所有可用UI元素。  
:empty 选中既没文本也无子元素（空格都不能有）的指定元素  
:not(x) 找到不符合当前选择器的元素

<!DOCTYPE html>
    <html lang="en">
    
    <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> /* border-radius: 5px;圆角矩形 */ /* button:enabled { background-color: salmon; } button:disabled { border-radius: 5px; } input:checked { width: 20px; height: 20px; } */ p:empty { width: 200px; height: 30px; background-color: red; } /* p:not(.nei) 这个表示，找p元素，不包含类别选择器是p的； */ p:not(.nei) { width: 50px; height: 50px; background-color: slateblue; } </style>
    </head>
    
    <body>
        <button type="button">可用按钮</button>
        <button type="button" disabled>禁用按钮</button>
        <input type="checkbox" name="ck_01" value="锦囊" checked>锦囊
        <input type="checkbox" name="ck_02" value="杀">杀
        <p>我是p</p>
        <div>
            <p class="nei">内部p</p>
        </div>
        <hr>
        <div>
            <span>内部span</span>
        </div>
    </body>
    
    </html>

**9.伪元素选择器**

::first-line

选择元素的第一行

::first-letter

::before和::after

这两个主要用来给元素的前面或后面插入内容。

（1）这个最常用的便是是清除浮动了，无需再添加一个空的 div 并应用 clear:both; 样式，只需如下样式即可在元素尾部自动清除浮动。

(2)与"content"配合使用，可以实现许多特效。比如下面样式，当鼠标移动到链接上方，链接左右会出现悬浮方括号。

::selection

用来改变浏览网页选中文的默认效果。::selection 只能设置两个属性：一个就是 background,另一个就是 color 属性。

**10.选择器的权重**

注：一般只有选择器直接选中才会用到权重计算

!importent ------------infinity

权重计算规则

1.  第一等：代表内联样式，如: style=””，权值为1000。
2.  第二等：代表ID选择器，如：\#content，权值为0100。
3.  第三等：代表类，伪类和属性选择器，如.content，权值为0010。
4.  第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
5.  通配符、子选择器、相邻选择器等的。如\*、>、+,权值为0000。
6.  继承的样式没有权值。

比较规则

1.  1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较，前一等级相等才往后比。
2.  无论是行间、内部和外部样式，都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式；ID>class>元素。之所以有这样的错觉，是因为确实行间为第一等的权重，所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后，所以覆盖掉了之前的。
3.  在权重相同的情况下，后面的样式会覆盖掉前面的样式。
4.  通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先。

**11.网址导航表格案例**

![在这里插入图片描述][3af5726f2dee4cb49bd2302384b1ddee.png_pic_center]

11.1 案例

11.2之前html样的，如何转换成css的样式，

CSS3样式代码：

table{text-align: center;border-collapse: collapse;
    			margin:0 auto;width:80%;}
    			td,caption{border: 1px solid #999999;line-height: 50px;}
    			caption{background-color: red;font-weight: bolder;border-bottom:0px;
    			font-size: 28px;border-bottom: 0px;}
    			tr.ji{background-color: antiquewhite;}
    			tr.ou{background-color: azure;}
    			td.bt{font-weight: bolder;font-size: 24px;}

margin:0 auto;上下为0 左右自动适应，这样居中了。

input\{border: none;width:20%\}

[40d243a81b7d4de29f6a62b7eb55e087.png]: /images/20220828/28df1173d1aa4cfda50b91a32d9f6078.png
[3af5726f2dee4cb49bd2302384b1ddee.png_pic_center]: /images/20220828/22db2ca03a204dca820ec4057d3d3285.png