CSS 复合选择器

时间：2021-01-14 17:17:34 阅读：32 评论：0 收藏：0 [点我收藏+]

复合选择器是由两个或多个基础选择器构成，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签。
复合选择器主要分为四类：交集选择器、并集选择器、后代选择器、子元素选择器

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为 class 类选择器，两个选择器之间不能有空格，如下图所示：

技术分享图片

比如：p.one选择器的意思是：类名为 one 的段落标签。
用的相对来说比较少，不太建议使用。

并集选择器

并集选择器（css选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class选择器、id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的css样式。

技术分享图片

并集选择器和的意思，即只要通过逗号 "," 隔开的，所有选择器都会执行后面的样式。通常用于集体选择。

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

技术分享图片

子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

子元素选择器

子元素选择器只能作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。注意，符号 > 左右两侧各保留一个空格。

注意：这里的子级标签只能是父级标签的 ”亲儿子“，不能是”孙子、重孙“等。

属性选择器

选取标签中带有某些特殊属性的选择器，称为属性选择器。
获取到拥有该属性的元素

伪元素选择器（CSS3新特性）

E::first-letter 选择文本中的第一个单词或字（如中文、日文等）；
E::first-line 选择文本中的第一行；
E::selection 可改变选中文本的样式；
E::before
E::after

技术分享图片

注意：伪元素选择器是两个冒号 "::"，伪类选择器是一个冒号 ":"。

以上全部内容示例如下：

<!DOCTYPE html>
<html lang="en">
     <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
               /* 标签选择器 */
               h3 {
                    color: palevioletred;
               }

               /* id选择器： "#" */
               #classselect {
                    color: turquoise;
               }

               /* class 类选择器："." */
               .classselect {
                    color: rgb(102, 102, 230);
               }

               /* 交集选择器: 标签选择器.class选择器 */
               span.intersection {
                    font-size: 18px;
                    font-weight: 700;
               }

               /* 并集选择器："," */
               h3,#classselect,.classselect {
                    /* 居中 */
                    text-align: center;
               }

               /* 后代选择器: “空格” */
               .child h4 {
                    color: rgb(228, 198, 65);
                    font-size: 22px;
               }

               /* 
               子元素选择器： ">"
                    子元素选择器 与 后代选择器 的区别：
                         后代选择器 可以选择包含在内的所有子元素，即可以直接跳过儿子去找孙子、重孙等
               */
               div > h3 {
                    color: red;
               }

               /* 属性选择器 */
               div[title] {
                    background-color: #fff;
                    font-size: 18px;
               }
               .attribute[type=text] {
                    display: block;
                    text-align: center;
               }
               /* 从左边开始位置匹配 */
               div[class^=lefthead] {
                    font-size: 14px;
                    background-color: hotpink;
               }
               /* 从右边结束位置匹配 */
               div[class$=rightfooter] {
                    text-align: center;
                    font-size: 14px;
               }
               /* 从任意位置匹配 */
               div[class*=any] {
                    color: limegreen;
               }

               /* 伪类选择器 */
               a:hover {
                    color: salmon;
               }

               /* 伪元素选择器 */
               .first-letter::first-letter {
                    color: rgb(240, 136, 18);
                    font-size: 50px;
               }
               .first-line::first-line {
                    background-color: yellow;
               }
               .selection::selection {
                    color: tomato;
                    background-color: white;
               }

               .before::before {
                    content: "【";
               }
               .after::after {
                    content: "】";
               }
          </style>
     </head>
     <body>
          <h3>标签选择器：h3</h3>
          <div id="idselect">id选择器: #idselect</div>
          <div class="classselect">class选择器：.classselect</div>
          <span class="intersection">交集选择器：span.intersection</span>
          <div class="child">
               <h3>子元素选择器：div > h3 或 .child > h3 </h3>
               <div>
                    <h4>后代选择器: .child div h4 或 .child h4</h4>
               </div>
          </div>

          <div>
               <div class="attribute" title="属性选择器">属性选择器：div[title] 或 .attribute[title]</div>
               <span class="attribute" type="text">属性选择器: .attribute[type=text] 或 span[type=text]</span>
               <div class="lefthead-attribute" >从左边开始位置匹配：div[class^=lefthead]</div>
               <div class="lefthead-attribute" >从左边开始位置匹配：div[class^=lefthead]</div>
               <div class="attribute-lefthead" >从左边开始位置匹配：div[class^=attribute]</div>

               <div class="rightfooter-attribute" >从右边结束位置匹配：div[class$=attribute]</div>
               <div class="attribute-rightfooter" >从右边结束位置匹配：div[class$=rightfooter]</div>
               <div class="attribute-rightfooter" >从右边结束位置匹配：div[class$=rightfooter]</div>

               <div class="attribute-any-position" >从任意位置匹配：div[class*=any]</div>
               <div class="attribute-position-any" >从任意位置匹配：div[class*=any]</div>
               <div class="any-attribute-position" >从任意位置匹配：div[class*=any]</div>

               <h3>伪类选择器：一个冒号":"</h3>
               <a class="hover" href="#">链接伪类选择器: LVHA（:link  :visited  :hover  :active）</a>
               <div class="first-child">结构伪类选择器：CSS3新特性（:first-child  :last-child  :nth-child(n)  :nth-last-child(n) ）</div>
               <div class="target">目标伪类选择器: （:target）</div>

               <h3>伪元素选择器：两个冒号"::"</h3>
               <p class="first-letter">伪元素选择器：选中文本中的第一个单词或字符（:first-letter）</p>
               <div class="first-line">
                    <p>伪元素选择器：选中文本中的第一行（:first-line）</p>
                    <p>伪元素选择器</p>
               </div>
               <p class="selection">伪元素选择器：可以改变选中文本的样式；即当鼠标拖动所选文字时，样式会变成自己所设置的</p>

               <div class="before after">
                    before|after：在旧版本中E:before和E:after是伪元素；而在CSS3中两个冒号表示的才是伪元素，所以统一以 E::before和E::after 为准。
                    before和after 是在盒子 div 的内部前面 或 内部后面 插入。
               </div><br>

               <div>通配符选择器：用" * "表示，匹配页面中的所有标签，会自动清除HTML的默认边距。</div>
          </div>
     </body>
</html>

View Code

页面效果如下：

技术分享图片

CSS 复合选择器

原文：https://www.cnblogs.com/Chestnut-g/p/14273537.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)