CSS——选择器(包括神器:nth-child)

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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值