《CSS学习笔记》- 2.选择器：基本选择器、层次选择器、结构伪类选择器、属性选择器

2、选择器

作用：选择页面上的某一个或者某一类元素

2.1 基本选择器

标签选择器

/* 选择页面上的所有标签 */
h1 {
    color: #ca2c58;
}

类选择器 .className

用于描述一组元素的样式，可以实现复用

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .text{
            color: darkred;
        }
    </style>
</head>
<body>

	<h1 class="text">Title</h1>
	<p class="text">paragraph</p>

</body>

ID选择器 #IDName

可以为标有特定ID的元素指定特定的样式。

注：id必须保证全局唯一！

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #article{
            background: aqua;
        }
    </style>
</head>
<body>

<p id="article">paragraph 2</p>

</body>

2.2 层次选择器

后代选择器

在某个元素后面的所有后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #list li{
            border: 1px solid chartreuse;
        }
    </style>
</head>
<body>

<ul id="list">
    <li>one</li>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
        </ul>
    <li>two</li>
        <ul>
            <li>列表3</li>
            <li>列表4</li>
        </ul>
</ul>

</body>
</html>

子选择器

在某个元素后面的第一代子元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
	<style>
		#list > li{
            border: 1px solid chartreuse;
        }
	</style>
</head>
<body>

<ul id="list">
    <li>one</li>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
        </ul>
    <li>two</li>
        <ul>
            <li>列表3</li>
            <li>列表4</li>
        </ul>
</ul>

</body>
</html>

相邻兄弟选择器

如果需要选择紧接在一个元素之后的另一个元素，而且两者有相同的父元素。只选择相邻之后的第一个元素，不包含嵌套中的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div + p{
            color: red;
        }
    </style>
</head>
<body>

<div>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
</div>
<p>段落4</p>
<p>段落5</p>

</body>
</html>

通用选择器

当前元素向下的所有子元素。不包含当前元素嵌套的子元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div ~ p{
            color: red;
        }
    </style>
</head>
<body>

<div>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
</div>
<p>段落4</p>
<p>段落5</p>

</body>
</html>

2.3 结构伪类选择器

:first-child 选中第一个子元素
:last-child 选中最后一个子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        
        ul li:first-child{
            color: gold;
        }

        ul li:last-child{
            color: #ff114b;
        }
    </style>
</head>
<body>

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>

</body>
</html>

:nth-child(n) 按顺序选中父级元素下的第n个子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*选中 段落1*/
        p:nth-child(2){
            background: gold;
        }
    </style>
</head>
<body>
<!--第1个子元素-->
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>
<!--第2个子元素-->
<p>段落1</p>

</body>
</html>

:nth-of-type(n) 按类型选中第n个子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:nth-of-type(1){
            color: red;
        }
    </style>
</head>
<body>

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>

<p>段落1</p>

</body>
</html>

2.4 属性选择器*

正则表达式：

= ：绝对等于

*= ：包含

^=：以这个开头

$=：以这个结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         /*id=a 的元素*/
        p[id=a]{
            color: red;
        }
        /*包含a的元素*/
        p[id *= a]{
            background: gold;
        }
        /*以b开头的元素*/
        p[id ^= b]{
            color: darkgreen;
        }
        /*i以b结尾的元素*/
        p[id $= c]{
            border: 1px solid black;
        }
    </style>
</head>
<body>

<p id="a">段落1</p>
<p id="b a">段落2</p>
<p id="ac">段落3</p>


</body>
</html>

posted @ 2021-03-09 16:33 仙贝wang 阅读(136) 评论(0) 收藏举报

刷新页面返回顶部

仙贝wang