第七十节，css选择器

2023-02-14 13:52:57

css选择器

学习要点：
1.选择器总汇
2.基本选择器
3.复合选择器
4.伪元素选择器

本章主要探讨 HTML5中 CSS选择器，通过选择器定位到想要设置样式的元素。目前CSS选择器的版本已经升级至第三代，即 CSS3选择器。CSS3选择器提供了更多、更丰富的选择器方式，主要分为三大类。

一．选择器总汇

本节课主要涉及到三种选择器：基本选择器、复合选择器和伪元素选择器，具体如下：

选择器　　名称　　　　说明　　　　　　 CSS版本

* 　　　　通用选择器　　选择所有元素 2

<type> 　　元素选择器　　　　选择指定类型的元素 1

#<id> 　　 id选择器　　选择指定 id属性的元素 1

.<class> 　　　 class选择器　　选择指定 class属性的元素 1

[attr]系列　　属性选择器　　选择指定 attr属性的元素 2 ~ 3

s1,s2,s3... 分组选择器　　选择多个选择器的元素 1

s1 s2 　　后代选择器　　选择指定选择器的后代元素 1

s1 > s2 　　子选择器　　　　选择指定选择器的子元素 2

s1 + s2 　　相邻兄弟选择器　　选择指定选择器相邻的元素 2

s1 ~ s2 　　　普通兄弟选择器　　　选择指定选择器后面的元素 3

::first-line 　　伪元素选择器　　选择块级元素文本的首行 1

::first-letter 　　伪元素选择器　　选择块级元素文本的首字母 1

::before 　　伪元素选择器　　选择元素之前插入内容 2

::after 　　伪元素选择器选择元素之后插入内容 2

二．基本选择器
使用简单且频率高的一些选择器归类为基本选择器。

1.通用选择器

解释：“*”号选择器是通用选择器，功能是匹配所有 html元素的选择器包括<html>和<body>标签。可以使用如下元素标记测试效果：

    <style type="text/css">

         * {

             border:  1px  solid  red;

         }

    </style>

    <p>段落</p>

    <b>加粗</b>

    <span>无</span>

通用选择器会将所有元素匹配并配置样式，这是把双刃剑，好处就是非常方便，坏处就是将不必要的元素也配置了。目前为止，还不存在所有元素都必须配置的样式，所以，一般来说，不常用。

2.元素选择器

    <style type="text/css">

        p {

            color:  red;

        }

    </style>

    <p>段落</p>

解释：直接使用元素名称作为选择器名即可。

3.ID选择器

    <style type="text/css">

       #abc {

            font-size: 20px;

       }

    </style>

    <p id="abc">段落</p>

解释：通过对元素设置全局属性 id，然后使用#id值来选择页面唯一元素。

4.类选择器

<style type="text/css">

    .abc{

        border:  1px  solid  red;

    }

</style>

<b class="abc">加粗</b>

<span class="abc">无</span>

解释：通过对元素设置全局属性 class，然后使用.class值选择页面一个或多个元素。

也可以使用“元素.class值”的形式，限定某种类型的元素。

b.abc{

    color: #ff272d;

}

<b class="abc">段落</b>

<b class="abc">加粗</b>

<span class="abc">文本</span>

类选择器还可以调用多个样式，中间用空格隔开进行层叠。

.abc{

    color: #ff272d;

}

.def{

    font-size: 20px;

}

<b class="abc">段落</b>

<b class="abc">加粗</b>

<span class="abc , def">文本</span>

5.属性选择器，通过一些标签属性来控制

超链接属性选择器，所需 CSS2版本

[href]{

    color: #ff272d;

}

<a href="http://www.baidu.com">百度</a>

<p><a href="http://www.haosou.com">好搜</a></p>

解释：属性选择器，直接通过两个中括号里面包含属性名即可。当然，还有更多扩展的属性选择器。

匹配属性值的属性选择器，通过一个属性里的一个属性值来控制，所需 CSS2版本

[type="text"]{

    background-color: #fe1c23;

}

<input type="text">

<input type="password">

属性值开头匹配的属性选择器，也就是属性值开头匹配规则才能控制，所需版本 CSS3

[href^="http"] {

    color:  orange;

}

<a href="http://www.jxiou.com">百度</a>

<a href="www.haosou.com">好搜</a>

属性值结尾匹配的属性选择器。也就是属性值结尾匹配规则才能控制，所需版本 CSS3

[href$=".com"] {

    color:  orange;

}

<a href="http://www.jxiou.cn">百度</a>

<a href="http://www.haosou.com">好搜</a>

属性值包含指定字符的属性选择器。也就是标签属性值包含了指定的字符就受控制，所需版本 CSS3

[href*="jxiou"] {

    color: #fe1c23;

}

<a href="http://www.jxiou.cn">百度</a>

<a href="http://www.haosou.com">好搜</a>

属性值具有多个值时，匹配其中一个值的属性选择器。所需版本 CSS2

[class~="edf"] {

    font-size:  50px;

}

<p class="abc">这是一段文本</p>

<p class="edf">这是另外一段文本</p>

属性值具有多个值且使用“-”号连接符分割的其中一个值的属性选择器，所需版本 CSS2

[lang|="en"] {

    color:  red;

}

<p class="abc">这是一段文本</p>

<p class="edf">这是另外一段文本</p>

<i  lang="en-us">HTML5</i>

三．复合选择器
将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器。

1.分组选择器

解释：将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用 ID选择器、类选择器、属性选择器混合使用。

p,b,i,span {

    color:  red;

}

<p>这是一段文本</p>

<b>这是另外一段文本</b>

<i>HTML5</i>

2.后代选择器

解释：选择<p>元素内部所有<b>元素。不在乎<b>的层次深度。当然，后代选择器也可以混合使用 ID选择器、类选择器、属性选择器。

p b {

    color:  red;

}

<p>这是另外<b>一段</b>文本</p>

<i>HTML5</i>

3.子选择器

解释：子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一级的元素，不可以再往下选择。

ul > li{

    border:  1px  solid  red;

}

<ul>

    <li>我是儿子

        <ol>

            <li>我是孙子</li>

            <li>我是孙子</li>

        </ol>

    </li>

    <li>我是儿子</li>

    <li>我是儿子</li>

</ul>

4.相邻兄弟选择器

解释：相邻兄弟选择器匹配和第一个元素相邻的第二个元素。

p + b {

    color:  red;

}

<p>这是一段文本</p>

<b>这是另外一段文本</b>

5.普通兄弟选择器

解释：普通兄弟选择器匹配和第一个元素后面的所有元素。

p ~ b {

    color:  red;

}

<p>这是一段文本</p>

<span>文本</span>

<b>这是另外一段文本</b>

四．伪元素选择器

伪选择器分为两种第一种是下节伪类选择器，还有一种就是伪元素选择器。这两种选择器特性上比较容易混淆，在 CSS3中为了区分，伪元素前置两个冒号（::），伪类前置一个冒号（:）。

1.::first-line块级首行

解释：块级元素比如<p>、<div>等的首行文本被选定。如果想限定某种元素，可以加上前置 p::first-line。

p::first-line {

    color:  red;

}

<p>当梁宇方决意不出席铂尔曼酒店十五周年庆酒会的时候，他的父亲，也是酒店董事长的梁泽，以及总经理梁宇青，正殷殷期盼着能够在这个酒会上正式将他介绍出来。无心接班的宇方竟然藏身在马场和分别六年的爱马Sky驰骋草原。宇青的突然现身马场令他无所遁行，就这样被压回了酒店准备亮相。但宇方仍不甘示弱，仍伺机逃跑… 小歌星杜允儿来到酒店接周年庆的暖场演唱，向天微义不容辞同行来帮忙，两人仓皇找着</p>

2.::first-letter块级首字母

解释：块级元素的首行字母。

::first-letter {

    color:  red;

}

<p>dfhhfewiogiweoghpwghoiwhg</p>

3.::before文本前插入

解释：在文本前插入内容。

a::before {

    content:  '点击-';

}

<a href="http://www.baidu.com">这里</a>

4.::after文本后插入

解释：在文本后插入内容。

a::after {

    content:  '-请进';

}

<a href="http://www.baidu.com">这里</a>

::selection解释：当选择文字时触发选择。CSS3版本下的选择器。

::selection{

    color: red;

}

<p>dfeihfhfowiqhfwqhfwpoqfjwqhf</p>

伪类选择器

学习要点：
1.伪类选择器总汇
2.结构性伪类选择器
3.UI伪类选择器
4.动态伪类选择器
5.其他伪类选择器

本章主要探讨HTML5中CSS选择器中的伪类选择器，和伪元素选择器一样，面向某种共同特征来选择元素。

一．伪类选择器总汇

伪类选择器分为四种类型：结构性伪类、UI伪类、动态伪类和其他伪类选择器，具体如下：

选择器　　名称　　　　　　　　说明　　　　　　　　　　　　CSS版本

:root 　　　　根元素选择器　　　　选择文档中的根元素 3

:first-child 　　子元素选择器　　　　　　　　选择元素中第一个子元素 2

:last-child 　　子元素选择器　　选择元素中最后一个子元素 3

:only-child 　　　子元素选择器　　　　　　　　选择元素中唯一子元素 3

:only-of-type 　　　　子元素选择器　　　　　　　　选择指定类型的唯一子元素 3

:nth-child(n) 　　子元素选择器　　　　　　　　　选择指定N个子元素 3

:enabled 　　 UI选择器　　　　　　　　选择启用状态的元素　　　 3

:disabled 　　 UI选择器　　　　　　　　选择禁用状态的元素　　　 3

:checked 　　 UI选择器　　　　　　　　选择被选中input勾选元素 3

:default 　　 UI选择器　　　　　　选择默认元素　　　　 3

:valid 　　 UI选择器　　　　　　　　验证有效选择input元素　　　 3

:invalid 　　　　UI选择器　　　　　　　　　验证无效选择input元素　　　 3

:required 　　 UI选择器　　　　　　　　有required属性选择元素　　 3

:optional 　　 UI选择器　　　　　　　　无required属性选择元素　　　 3

:lin 　　　　动态选择器　　　　　　　　未访问的超链接元素 1

:visited 　　　　动态选择器　　　　　　　　已访问的超链接元素　　　 1

:hover 　　　　动态选择器　　　　　　　　悬停在超链接上的元素　　　2

:active 　　　　动态选择器　　　　　　　　激活超链接上的元素　　　 2

:foucs 　　　　动态选择器　　　　　　　　获取焦点的元素　　　　 2

:not 　　　　其他选择器　　　　　　　　否定选择的元素　　　　 3

:empty 　　其他选择器　　　　　　　　选择没有任何内容的元素　 3

:lang 　　　　其他选择器　　　　　　　　选取包含lang属性的元素　　 2

:target 　　　　其他选择器　　　　　　　　选取URL片段标识指向元素　 3

二．结构性伪类选择器

结构性伪类选择器能够根据元素在文档中的位置选择元素。这类元素都有一个前缀（:）。

1.根元素选择器

解释：匹配文档中的根元素，基本不怎么用，因为总是返回<html>元素。

:root{

    border: 1px solid red;

}

<p>文本</p>

2.子元素选择器

解释：选择第一个子元素。

ul > li:first-child {

    color: red;

}

<ul>

    <li>列表1</li>

    <li>列表2</li>

    <li>列表3</li>

</ul>

解释：选择最后一个子元素。

ul > li:last-child {

    color: red;

}

<ul>

    <li>列表1</li>

    <li>列表2</li>

    <li>列表3</li>

</ul>

解释：选择只有一个子元素的那个子元素。

ul > li:only-child {

    color: red;

}

<ul>

    <li>列表1</li>

    <li>列表2</li>

    <li>列表3</li>

</ul>

<ul>

    <li>列表1</li>

</ul>

解释：选择只有一个指定类型的子元素的那个子元素。也就是一个元素下的子元素只有一个的匹配

div > p:only-of-type {

    color: red;

}

<div>

    <p>这是段落</p>

    <p>这是另外一段落</p>

</div>

<div>

    <p>这是段落</p>

    <span>这是一个区域</span>

</div>

3.:nth-child(n)系列

解释：选择子元素的第二个元素。

ul > li:nth-child(2) {

    color: red;

}

<ul>

    <li>列表1</li>

    <li>列表1</li>

    <li>列表1</li>

</ul>

解释：选择子元素倒数第二个元素。

ul > li:nth-last-child(2) {

    color: red;

}

<ul>

    <li>列表1</li>

    <li>列表1</li>

    <li>列表1</li>

    <li>列表1</li>

    <li>列表1</li>

    <li>列表1</li>

</ul>

解释：选择特定子元素的第二个元素。

div > p:nth-of-type(2) {

    color: red;

}

<div>

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

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

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

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

</div>

解释：选择特定子元素的倒数第二个元素。

div > p:nth-last-of-type(2) {

    color: red;

}

<div>

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

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

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

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

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

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

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

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

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

</div>

二．UI伪类选择器

UI伪类选择器是根据元素的状态匹配元素。用于表单的属性值

解释：:enabled选择启用状态的表单元素。如输入框为启用状态的

input:enabled{

    border: 1px solid red;

}

<form>

    <input type="text" disabled> //禁用输入框

    <input type="text">

</form>

:disabled解释：选择禁用状态的元素。如输入框为disabled禁用状态的

input:disabled{

    border: 1px solid red;

}

<form>

    <input type="text" disabled>

    <input type="text">

</form>

:checked解释：选择勾选的input元素。

input:checked{

    background-color: #fe1c23;

}

<form>

    <input type="checkbox">

    <input type="checkbox" checked="checked"> <!--默认勾选-->

</form>

:default解释：从一组类似的元素中选择默认元素。比如input被勾选的即默认的。

input:default{

    display: none;

}

<form>

    <input type="checkbox">

    <input type="checkbox" checked="checked"> <!--默认勾选-->

</form>

:valid和:invalid解释：输入验证合法与不合法显示时选择的元素。

/*合法*/

input:valid {

    border: 1px solid #3cff26;

}

/*不合法*/

input:invalid {

    border: 1px solid #ff272d;

}

<form>

    <input type="text" required>

    <input type="text" required>

    <button>提交</button>

</form>

:required和:optional解释：根据是否具有required属性选择元素。也就是必填项和非必填项控制

/*必填*/

input:required {

    border: 1px solid #ff1822;

}

/*非必填*/

input:optional {

    border: 1px solid #3cff26;

}

<form>

    <input type="text" required>

    <input type="text">

    <button>提交</button>

</form>

三．动态伪类选择器 ,控制超链接

动态伪类选择器根据条件的改变匹配元素。

:link和:visited

解释：:link 表示未访问过的超链接，:visited表示已访问过的超链接。

a:link {

    color: red;

}

a:visited {

    color: orange;

}

<a href="http://www.baidu.com">百度</a>

<a href="http://www.360.com">360</a>

:hover

解释：表示鼠标悬停在超链接上。

a:hover {

    color: #19ff48;

}

<a href="http://www.baidu.com">百度</a>

<a href="http://www.360.com">360</a>

:active

解释：表示鼠标按下激活超链接时。

a:active {

    color: #ff272d;

}

<a href="http://www.baidu.com">百度</a>

<a href="http://www.360.com">360</a>

:focus解释：表示获得焦点时。也就是文本框鼠标点击等待输入文本时

input:focus {

    border: 8px solid red;

}

<input type="text">

四．其他伪类选择器

:not解释：否定选择器，反选。

a:not([href*="baidu"]) {

    color: red;

}

<a href="http://www.baidu.com">baidu</a>

<a href="http://www.360.com">360</a>

<a href="http://www.jxiou.com">叫卖录音网</a>

:empty解释：匹配没有任何内容的元素。

p:empty{

    border: 8px solid red;

}

<b>加粗</b>

<p></p>

<b>加粗</b>

:lang 解释：选择包含lang属性，属性值前缀为en的元素。和属性选择器匹配结果一致。也就是设置语言的选择器

:lang(en){

    color: red;

}

<b>加粗</b>

<p lang="en-us">html5</p>

<b>加粗</b>

:target 解释：定位到锚点时，选择此元素。定位到锚点是受控制

:target{

    color: red;

}

<a id="jx">锚点</a>

码农公寓

相关文章