CSS选择器总结

元素选择器

直接通过元素去选择,简单直接但是面对复杂结构无法处理。

<style>
	
</style>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1 {
		color:silver;
	}
	//选中了所有h2标签
    </style>
</head>
<body>

    <h1 class="one">我是一个标题</h1>
    
</body>



选择器分组

当我们需要多个元素拥有相同的属性的时候,我们可以将这些元素的选择器设置为一组,来共同设定。

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1 , p , body , table , div{
		color:red;
	}
	//h1 , p , body , table , div将这些元素的字体颜色设置成red
    </style>
</head>
<body>
    <h1 class="one">我是一个标题</h1>
    <h2 class="one">我也是一个标题</h2>
    <p class="one">我是一个段落</p>
    <table border="1px">
        <option>我是一个表格</option>
        <tr>
            <th></th>
        </tr>
    </table>
    <div>我是一个div</div>
</body>



类选择器


1.普通类选择器

简单来说就是将一类元素设置相同的属性
用( . + 类名)去设置元素属性

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .one{
            color: brown;
            background-color: blue;
        }
        //这样就选中了class为one的所有元素
    </style>
</head>
<body>

    <h1 class="one">我是一个标题</h1>
    <h2 class="one">我也是一个标题</h2>
    <p class="one">我是一个段落</p>

</body>



2. 结合元素选择器如下

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p.one{
            color: cadetblue;
        }
    </style>
</head>
<body>

    <h1 class="one">我是一个标题</h1>
    <p class="one">我是一个段落</p>
</body>

p.one解释为其 class 属性值为 one 的所有段落,注意这里没有空格


3. 我们还可以将一个标签设置多个class去进行选择

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .one.tow.three{
            color: cadetblue;
        }
    </style>
</head>
<body>
    <p class="one two">我第一个段落</p>
    <p class="one two three">我第二个段落</p>
    <p class="two three">我第三个段落</p>
</body>

如果我们只想将第二个p标签的样式改变,我们必须同时选中.one.two.three
如果我们单独写.one.two将会将第一个和第二个p都选择
如果我们单独写.two.three将会将第二个和第三个p都选择


这样选择器的书写格式:通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素



ID选择器

id是给特定的某个元素设置样式,id是唯一的,在HTML文档中id选择器只会被使用一次

id选择器不能结合使用

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #one{
            color: cadetblue;
        }
    </style>
</head>
<body>
    <p id="one">我第一个段落</p>
</body>



属性选择器

根据元素的属性选择一类元素

[id]:具有id属性的元素
[id = "one"]:具有id属性并且属性为one的元素
[class = "one"]具有class属性并且仅等于one的元素
[class~="one"]:选择具有class属性的,并且class属性中有one的元素
[class^="o"]:选择具有class属性的,并且class属性中以o开头的元素
[class$="e"]:选择具有class属性的,并且class属性中以e结尾的元素
[class*="o"]:选择具有class属性的,并且class属性中包含o的元素

伪类选择器:

div class= "one
.one
格式: :伪类名称

  • 选择伪类:

:first-child 该标签的父元素,的第一个孩子
:last-child 该标签的父元素,的最后一个孩子
:nth-child(num/odd/even) odd选择所有奇数 even选择所有偶数

  • 状态伪类:

    :link 未点击状态
    :hover 鼠标悬停状态
    :active 鼠标按下状态
    :visited 点击之后状态

    书写顺序:link ->visited ->hover ->active

伪元素选择器:

格式:::伪元素名称

::first-letter

 		
.span{
 	color:red;
}

:frist-letter{
     color:red;
}

<p>hello</p>
<p><span class:"frist-letter">h<span>ello</p>
//两者相互等价,伪元素选择器底层相当于给需要改动的元素添加span去更改样式
//所以添加的是inline为行内元素
        

综合练习

<!DOCTYPE html>
<html lang="en">

<head>
	<style>
        
    </style>
</head>

<body>
	<div class="t">
        <div class="done1"></div><!-- 1 -->
    </div>
    <div class="t">
        <div>
            <div class="done1"></div><!-- 2 -->
        </div>
    </div>
    <div class="done1"></div><!-- 3 -->
</body>

</html>

空格选择所有后代
’ > '选择直接子节点
’ + '选择紧邻的下一个兄弟节点

  • 当我们想选中1、2、3时,选择器为:div.done1 既是div类名又叫done1的
  • 当我们想选中1、2时,选择器为:div.t div.done1 选择的是类名为t的div的后代类名为done1的标签
  • 当我们想选择1时,选择器为:div.t>div.done1 选择的是类名为t的div的子元素为done1的标签
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值