CSS——选择器（包括神器:nth-child）

最新推荐文章于 2024-06-18 09:03:18 发布

会飞的荷兰豆

最新推荐文章于 2024-06-18 09:03:18 发布

阅读量5.8k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/soyanzhong/article/details/78615611

版权

CSS 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1、基本的选择器：
通用元素选择器——*{…}
id选择器(略)
类选择器(略)
标签选择器——a{ color:xxx; }

2、组合型选择器：
A、同一级别多元素选择器——使用”,”隔开。
如：h1,a,div{…}，表示被h1标签，a标签及div标签里括起的内容所使用的样式

B、后代选择器——使用空格来隔开。
如：a li{….}，表示的是匹配a标签下的所有li标签
C、子元素选择器——使用>来隔开
如：a>li{…}，表示匹配a标签下的所有li标签。
二者的区别：后代选择器可以匹配到子子孙孙，而子元素选择器只匹配到儿子那一代而已。也就是说，如果使用的是后代选择器，那么如果<li>中还存在<li>时，那么这些<li>标签页一样会被匹配到。而子元素匹配器则不会
e.g.

<a>
    <ol>
        <li>（ 子选择器和后代选择器均可以匹配到）
            <ul>
                <li></li>（只有后代选择器可以匹配到）
            </ul>
        </li>
    </ol>
</a>

D、相邻兄弟选择器——使用”+”号链接要选的相邻兄弟元素
要满足该选择器需要两个条件：一是相邻（相邻的意思即是下一个标签），二是同级别（兄弟）
如：h1 + p{….}匹配的是和h1标签最近的的p标签
e.g.

<html>
<head>
<style type="text/css">
h1 + p {color:red}
</style>
</head>
<body>
<h1>This is a heading.</h1>
    <a><p>This is paragraph.</p></a>(非兄弟，所以没变红)
    <p>This is paragraph.</p>(非相邻，所以也没变红)
</body>
</html>

再比如：

li + li {font-weight:bold;}

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>(变粗）
    <li>List item 3</li>(变粗）
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>(变粗）
    <li>List item 3</li>(变粗）
  </ol>
</div>

效果：上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。这是因为兄弟选择器，匹配的是它的兄弟，二不是它自己本身

E.普通兄弟选择器，用“~”号隔开
如：p~a{xxx},表示和p标签同一级的所有a标签。(无论a标签和p标签是否相邻，只要是同级别的就行)
eg.

<style type="text/css">
p~a {color:red}
</style>
</head>
<body>
     <p>123</p>
     <h1>456</h1>
     <a>11234</a>(同级别，变红)
     <div>
         <a>789</a>(非同级别，未变红)
    </div>
    <a>jjjj</a>(同级别，变红)
</body>
</html>

3、属性选择器——用“[]”括起来，格式为：E[attr]
如：input[name]{xxx}——获取到的是所有具有name属性的input
还可以给属性赋值变成：
input[name=test]——获取到的是具有name属性，而且name属性的值为
test的input

E[attr *=value]——匹配属性attr的值包含value的元素
当然还可以不写上标签，直接写属性变成：
[attr]——匹配所有含有attr属性的标签

上面的各类选择器可以进行一些组合：
I、两个类选择器在一起，表示要同时含有这两个class值得标签
如：
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
效果为： class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景

II、类选择器和标签选择器组合.
div.mytest{…}表示选择class值为mytest的div标签。

值得注意的是：类选择器和标签选择器组合在一起时，选择哪种选择器在前面很重要
如：
p.test{xxx}——表示的是class为test的p标签
.test p{xxxx}——则表示class为test下的p标签
这两种写法的含义是不同的
eg.
这里写图片描述

4、:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论(!!!!)元素的类型。
注意：这里是不论元素的类型哦，同时注意元素的小标是从1开始，不是从
如：
p:nth-child(2)
{
background:#fff;
}
表示将匹配p标签下的第二个子元素

“`

会飞的荷兰豆

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
CSS——选择器（包括神器:nth-child）

1、基本的选择器：通用元素选择器——*{…} id选择器(略) 类选择器(略) 标签选择器——a{ color:xxx; }2、组合型选择器： A、同一级别多元素选择器——使用”,”隔开。如：h1,a,div{…}，表示被h1标签，a标签及div标签里括起的内容所使用的样式B、后代选择器——使用空格来隔开。如：a li{….}，表示的是匹配a标签下的所有li标签 C、子元素选择
复制链接

扫一扫

专栏目录