四、选择器进阶

·  阅读 85
四、选择器进阶

四、选择器进阶

一)后代选择器:空格

作用:根据 HTML 标签的嵌套关系,选择父元素后代中满足条件的元素(在选择器1所找到标签的后代(子、孙子、重孙子.)中,找到满足选择器2的标签,设置样式)

选择器语法:选择器1 选择器2{ css } 注意点: 1.后代包括:儿子、孙子、重孙子… 2.后代选择器中,选择器与选择器之前通过空格隔开

祖先元素 后代元素{声明块}

如:

html中:

    <div>
        <section class="zhouxu">
            <p>周而不比,身若飞絮</p>
        </section>
    </div>
复制代码

如果想选中p元素,那么既可以用 .zhouxu>p{@@},也可以用 section p{@@},

还可以用 div p{@@}

二)子代选择器:>

作用:

根据 HTML 标签的嵌套关系,选择父元素子代中满足条件的元素。

(在选择器1所找到标签的子代(儿子)中,找到满足选择器2的标签,设置样式)

格式:父元素>子元素{声明块(属性)}

选择器1>选择器2{ css }

注意:

1.只能一级一级选择,不能跳级;查找非常精确

2.子代只包括:儿子

3.子代选择器中,选择器与选择器之间通过>(大于号)隔开

三)并集选择器:

作用:

同时选择多组标签,设置相同的样式(同时选中多个选择器的内容)(选择器的组合,可以选中多种元素)

选择器语法:选择器1, 选择器2{ cSs }

a,h1,.zhouxu{color: aqua;font-size: 20px;font-weight:bold;}
复制代码

注意点:

  1. 并集选择器中的每组选择器之间由英文逗号'","'分割
  2. 并集选择器中的每组选择器可以是基础选择器或者复合选择器,如有类选择器则在逗号后跟 .类名 即可选中
  3. 并集选择器中的每组选择器通常一行写一个,提高代码的可读性

四)伪类选择器

1. a标签配套的伪类选择器(状态式伪类选择器)

1)a:link

(从未被访问过)(在谷歌浏览器中不生效)

2)a:visited

(被访问过后)

3)a:hover

(鼠标悬停状态\不只可以用于a标签,还可用于其他标签)

4)a:active

(鼠标长按状态)

/* 访问前 */(从未被访问过)
a:link{color: blue}
意为:当未点击链接时,字体显示为蓝色
(当它的属性值为空值时,不生效;即在html中的a元素中,没有输入跳转路径时,此属性不显示)
​
/* 访问后 */
a:visited{color: black}
意为:当点击链接跳转页面后再返回时,文字显示为黑色
​
/* 鼠标移入时 */
a:hover{color: brown}
意为:当鼠标移到该链接上方时,文字显示为棕色(不用点击)
​
/* 鼠标点击时的一瞬间 */
a:active{color: aqua}
意为:当鼠标点击时的一瞬间,该链接文字颜色显示为浅蓝色
复制代码

注意: a:hover 必须在 CSS 定义中的 a:linka:visited 之后,才能生效!a:active 必须在 CSS 定义中的 a:hover 之后才能生效!伪类名称对大小写不敏感。

5)伪类和 CSS 类结合使用:

例1:(同div一起使用时)

在HTML中:

把鼠标移到我上面

在css中:

div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}
​
div:hover {
  background-color: blue;
}
复制代码

意为:原div块中背景色为绿色,当鼠标移动到div块里时(悬停状态),div块的背景色则变为蓝色。

例2:(把鼠标悬停到<div>元素以显示 <p> 元素(类似工具提示的效果)

在html中:

<div>鼠标移到我上面来显示 p 元素
<p>哈哈!我在这里!</p>
</div>
复制代码

在css中:

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
​
div:hover p {
  display: block;
}
复制代码

意为:当鼠标悬停在<div>块区域中时,会显示影藏的<p>段落。

2. first-child/last-child (结构式伪类选择器)

1)普通用法:

如在HTML中:

    <div>
        <p>周而不比,身若飞絮</p>
        <p>周而不比,身若飞絮</p>
        <p>周而不比,身若飞絮</p>
        <p>周而不比,身若飞絮</p>
        <p>周而不比,身若飞絮</p>
    </div>
复制代码

选中其中的第一个p元素:

div>p:first-child { color: blue}
复制代码

选中其中的最后一个p元素:

div>p:last-child {color: blueviolet}
复制代码
2)匹配所有<p>元素中的首个<i>元素:
<p>我爱<i>中国</i>。我爱<i>中国</i></p>
<p>我爱<i>中国</i>。我爱<i>中国</i></p>
    
复制代码

如需将其中每句的第一个“中国”字体变红,则:

p i:first-child {color: blue;} 
复制代码
3)匹配所有首个<p>元素中的所有 <i> 元素

在html:

<div>
<p>我爱<i>中国</i>。我爱<i>中国</i></p>
<p>我爱<i>中国</i>。我爱<i>中国</i></p>
</div>
<div>
<p>我爱<i>中国</i>。我爱<i>中国</i></p>
<p>我爱<i>中国</i>。我爱<i>中国</i></p>
</div>
复制代码

在css:

p:first-child i {
  color: blue;
}
复制代码

意为:将每个div中的第一个p元素中的第一个i元素字体颜色改为蓝色。

3.:nth-child()

意为:匹配父元素里的第n个子元素

1)括号里直接写数字:

例:

html中:

    <section>
​
        <p>我自迎接汝</p>
​
        <p>我自迎接汝</p>
​
        <p>我自迎接汝</p>
​
        <p>我自迎接汝</p>
​
        <p>我自迎接汝</p>
​
   </section>
复制代码

css:

p:nth-child(4){color: brown}
复制代码

意为:匹配父元素中的第四个p元素

2)奇数/偶数(odd/even)
p:nth-child(odd){color: brown}
复制代码

意为:匹配父元素中的奇数个p元素(1.3.5.7.9.......)

p:nth-child(even){color: brown}
复制代码

意为:匹配父元素中的偶数个p元素(2.4.6.8......)

3)括号里写公式(an+b)
p:nth-child(3n+1){color: brown}
复制代码

意为:匹配父元素中3n+1数个的p元素(n从0开始,即显示1.4.7.10......)

4.:nth-of-type

意为:匹配父元素中指定类型元素的第n个子元素

如:

HTML中:

    <section>
​
        <h6>我自迎接汝</h6>
​
        <p>我自迎接汝</p>
​
        <p>我自迎接汝</p>
​
        <p>我自迎接汝</p>
​
        <p>我自迎接汝</p>
​
        <p>我自迎接汝</p>
​
        <h6>我自迎接汝</h6>
​
        <p>我自迎接汝</p>
​
        <h6>我自迎接汝</h6>
​
        <h6>我自迎接汝</h6>
​
        <p>我自迎接汝</p>
​
   </section>
复制代码

css中

h6:nth-of-type(3){color: blue}
复制代码

意为:将section中的第三个h6元素颜色设为蓝色

5.:not 不选中

    <div class="notttt">
            <span>01</span>
            <span class="not">02</span>
            <span>03</span>
            <span>04</span>
            <span>05</span>
            <span class="not">06</span>
            <span>07</span>
            <span>08</span>
        </div>
​
复制代码
.notttt>span:nth-child(2n){
    color: #46a7ad;
}
复制代码

显示:

image-20210830110637959.png

.notttt>span:nth-child(2n):not(.not){
    color: #46a7ad;
}
复制代码

显示:

image-20210830110715464.png

五)伪元素选择器

1. :before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容并设置新内容的样式,在选择器中用content属性添加内容。

::before 在之前

如:

B612Kaji_20200520_171945_659.jpg

2. :after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容。

::after 在之后

元素名::after{content:“加在之后”;}

B612Kaji_20200520_171945_659 - 副本.jpg

3. :first-letter 伪元素

"first-letter" 伪元素用于向文本的首字母设置特殊样式:

::first-letter 在首字母

B612.jpg

4. :first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。

::first-line 在第一行(可用于大写首字母)

5. :selection 伪元素

::selection 用户选中的内容(选中之后的效果)

如---------------------------------------------------------------------

<h5>这是一段文本</h5>
复制代码
h5::selection{color:skyblue;}
复制代码

即当用户用鼠标选中h5文字部分时,h5中的字体颜色为天蓝色

六)伪类选择器和伪元素选择器

1.两者的意思:

*伪类选择器:

伪类,就是伪造一个类别,然后为这个类别设置CSS样式。用于定义元素的特殊状态。

(虽然是“伪造”的,但伪类选择器也是css内置的,有固定的选择及其意义)

*伪元素选择器:

伪类元素指的是为被选择的标记(标记中的文本)伪造一个元素,然后为这个伪造的元素设置样式。

2.两者的异同:

1)同:

css伪类选择器和伪类元素都是以冒号开头,

伪类选择器前面用一个冒号。(如,:hover、:first-child........)

伪类元素选择器前面用两个冒号。(如,::frist-letter、::before.......)

2)异:

伪类是通过伪造类,从而为这个类设置样式;

而伪元素是通过伪造元素,从而为这个元素设置样式

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改