CSS权威指南之选择器补充

最新推荐文章于 2022-09-04 22:30:15 发布

yi把菜刀

最新推荐文章于 2022-09-04 22:30:15 发布

阅读量206

点赞数

分类专栏： CSS 前端学习

本文链接：https://blog.csdn.net/VAEaaaa/article/details/111877272

版权

前端学习同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

1.给拥有两种类属性的标签内加css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .urgent.waring {
            color: rgb(201, 9, 9);
        }
    </style>
</head>
<body>
    <p class="urgent waring">abcdefghijk</p>
    <p class="urgent">1234567</p>
</body>
</html>

运行结果:
在这里插入图片描述
只有同时含有 urgent 和 waring 的类才能使文字颜色变化

2.属性选择器：

给同时具有 href 和 title 两个属性的 a 元素编写样式：

a[href][title] {
    font-weight:bold;
    }

同理如果想把href的值为xxx和title的值为xxx的 a 元素选择出来则为：

        a[href="http://www.w3.org/"][title="W3C Home"] {
            font-size: 700;
        }

两者使用方法类似

根据部分属性选择：

形式	说明
[foo 丨= “bar”]	选择的元素有foo属性，且其值以bar和一个英文破折号(U+002D)开头,例如：foo=" bar-xxx",foo=“barxxx” 或者就是bar本身
[foo ~=“bar”]	选择的元素有foo属性，且其值是包含bar这个词的一组值，常用于匹配以空格分隔的一组词(差不多相当于有多个类)
[foo *=“bar”]	选择的元素有foo属性，且其值包含子串bar
[foo ^=“bar”]	选择的元素有foo属性，且其值以bar开头
[foo $=“bar”]	选择的元素有foo属性，且其值以bar结尾

例子:

    <span class="barren rocky">123</span>
    <span class="cloudy barren">456</span>
    <span class="life-bearing cloudy">789</span>

span[class~="barren"] {
font-style:italic;
}

此例将类中含有 barren 值的标签选择出来并且设置为斜体

3.不区分大小写的标识符：

在属性选择器的最后加上一个不起眼的 i，就可不区分大小写：
例如：

plaent[ type*= “rock” i] ，就可以不区分rock的大小写来搜索属性值为rock的标签

注意：有些浏览器不兼容此用法

4.选择紧邻同胞元素：

假设你想装饰紧跟在一个标题后面的段落，或者为紧跟在一个段落后面的列表设定特殊的外边距。若想选择同一个父元素紧跟在另一个元素后面的元素，要使用紧邻同胞连接符，即
一个加号： +
与子元素连接符类似，加号两侧可以有空格，也可没有。

若想把紧跟在 h1 元素后面段落§的上外边距清掉，则这样写：

h1 + p { margin-top: 0;}

注意：若结构为：

    <h1>1234</h1>
    <div>111</div>
    <p>2394</p>

则此紧邻同胞连接符无效，因为紧跟着 h1 的标签为 div 而不是 p

注意： 兄弟标签的父元素必须是同一个(必须是亲兄弟)

5.选择后续同胞：

这个连接符用：
波浪号：~

表示，选择一个元素后面同属于一个父元素的另一个元素(不需要是紧邻的同胞元素即可)
例：

<h2>标题2</h2>
    <p>skyblue</p>
    <ol>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ol>
    <p>pointer</p>
    <ol>
        <li>44</li>
        <li>55</li>
        <li>66</li>
    </ol>

使用了后续同胞连接符后：

h2 ~ol { font-style: italic; }

结果：将h2后面与它同属一个父级的ol元素的文本倾斜，因为有两个ol在h2后面，并且都同属一个父级，所以两个有序列表的文本都倾斜了。

6.拼接伪类：

CSS允许把伪类拼接(串联)在一起。
例如：

        a:link:hover {
            color: red;
        }
        a:visited:hover {
            color: gray;
        }

此例译为：
把有鼠标悬停其上的未访问的链接显示为红色;
把有鼠标悬停其上的已访问的链接显示为灰色。

此外，还可以分别为其他语言（例如德语）下的未访问的链接和已访问链接指定悬停样式：

        a:link:hover:lang(de) {
            color: red;
        }
        a:visited:hover:lang(de) {
            color: maroon;
        }

:lang() 的括号内表明是哪种语言。

注意：别拼接相互排斥的伪类，例如链接不可能既访问又未访问，所以：
a: link:visited 没有任何意义。

7.结构伪类：

CSS中
:root 伪类选择文档的根元素，在HTML中根元素始终是 html，所以其选择html，在HTML文档中可以直接选择HTML元素，而不使用:root伪类，但是这两个选择符的特指度不同(以后介绍)
例子：

:root {
            border: 10px dotted gray;
        }

会出现以下这种情况：
在这里插入图片描述
选择空元素：
使用：
:empty 伪类可以选择任何没有子代的元素，甚至连文本节点都没有(包括文本和空白)。CMS经常生成没有任何内容的空元素，此时就可以使用这个伪类。例如：

        p:empty {
            display: none;
        }

它能禁止显示空段落

注意：你可能想使用：

        *:empty {
            display: none;
        }

使得全部的空的元素都被清除不显示，但是它会匹配HTML文档中的所有空元素例如 img 和 input ，textarea等里面没有放内容的元素，它们也都会被清除

注意： :empty 是唯一一个在匹配时考虑文本节点的CSS选择符。 Selectors Level 3中的起跳选择符(比如同胞选择符都只考虑元素)，完全忽略文本节点。

8.选择唯一的子代：

使用：
xxx:only-child 伪类，他选择的元素是另一个元素的唯一子元素。

有趣的是：
xxx:first-child:last-child 选择的也是 only-child
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a[href] img:only-child {
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <a href="#"><img src="html+css/images/logo.png" alt=""></a>
    <a href="#"><img src="html+css/images/cartoon6.ico" alt="">The two</a>
    <a href="#"><img src="html+css/images/cartoon6.ico" alt=""><em>The three</em></a>

</body>
</html>

效果图：

在这里插入图片描述
如果一个超链接只有一个图像，没有其他子元素：图一和图二因为超链接a唯一子代图像(图二的文字 The two)不算是元素，

注意：本例为 a 超链接中只有img一个元素情况；
若想把html文件中所有标签只有 img 一个元素选出来(标签只有 img一个亲儿子)，则用：

 img:only-child {
            aaa:xxx;
        }

另外当HTML是另外一种情况：

    <a href="#"><span><img src="html+css/images/cartoon6.ico" alt=""></span> The two</a>

虽然img不是 a的亲儿子，但是 img 是 span 元素的亲儿子，而span是属于超链接 a的，所以也可有黑边框。

简述为：图像的父元素自身也可以是链接的后代。

如果想要限制规则，选择的都是a元素的唯一子代图像，则需要加上子元素连接符，改成：

    a[href]>img:only-child {
            border: 2px solid black;
        }

9.选择同胞元素中唯一的图像

用法 :only-of-type
它与 :only-child 之间的区别：
only-of-type 匹配同胞中唯一的那种元素，
而only-child 只匹配完全没有同胞的元素

简单理解为： :only-of-type 可以使用到一个标签内有很多个元素，选择其中唯一的的那个元素例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p:only-of-type {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="">111</a>
        <a href="">222</a>
        <p>333</p>
    </div>

</body>
</html>

效果图为：
在这里插入图片描述
10.结合 :nth-child() 和 :mth-last-child()
你可以使用CSS确定一个列表中有多少个列表项目，然后据此装饰：

        li:only-child {width: 100%;}
        li:nth-child(1):nth-last-child(2),
        li:nth-child(2):nth-last-child(1) {width: 50%;}
        li:nth-child(1):nth-last-child(3),
        li:nth-child(1):nth-last-child(3)~li {width: 33.33%;}
        li:nth-child(1):nth-last-child(4),
        li:nth-child(1):nth-last-child(4)~li{width: 25%;}

在上述事例中，如果列表中只要一个列表项目，宽度为100%；
如果一个列表项目是第一个项目，还是倒数第二个项目，即列表中有两个项目，则宽度为50%；
如果一个列表项目是第一个项目，还是倒数第三个项目，那么后面两个同胞项目的快读为33%；
类似的，如果一个列表项目是第一个项目，还是倒数第四个项目，级列表有四个项目，则后面三个同胞的宽度为25%

yi把菜刀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS权威指南之选择器补充

1.给拥有两种类属性的标签内加css样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
复制链接

扫一扫