008-元素选择器

选择器的作用：微元素添加样式

（1）全局选择器：可以和任意元素匹配，优先级最低，一般做样式初始化

*{
    margin:0;
    padding:0;  
}

例如在内部样式中，添加全局选择器，运行后会发现<p>和<h1>标签都改变了样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            font-size: 20px;
            color: darkgreen;
        }
    </style>
</head>
<body>
    <p>选择器</p>
    <h1>全局选择器</h1>
</body>
</html>

 这里的<h1>标签的样式也被全局样式覆盖了。

（2）元素选择器

HTML文档中的元素，p，b，img，body都属于标签选择器。

标签选择器，选择的是页面上所有种类的标签，用于描述共性，无法描述一个元素的个性。

   

 

 

运行后会发现下面的<p>标签都生效了。

（3）类选择器（灵活）

使用圆点.来定义， 针对想要的所有标签使用。

 

通过class来未选择器取名字（名字由字母组成，可以加-，最好不要出现特殊字符），然后通过.名字来进行索引。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
            font-size: 20px;
            color:red;
        }
    </style>
</head>
<body>
    <p>选择器</p>
    <h1>全局选择器</h1>
    <p class="content">使用类选择器添加样式</p>
</body>
</html>

 

运行结果如下：

 

 

 

（4）ID选择器（以#来定义）

 

使用ID选择器时，通过#来索引名称，然后在里面编写相应的css样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #text{
            font-size: 15px;
            color: seagreen;
        }
    </style>
</head>
<body>
    <p>选择器</p>
    <h1>全局选择器</h1>
    <p id="text">使用ID选择器添加样式</p>
</body>
</html>

运行结果如下：

 

注意：ID名称是不能重复的，

 

如果想添加不同的样式，需要重新取ID名称，然后使用#索引。

 （5）合并选择器（以英文逗号来隔开）

如果不同的标签想要合并，减少代码重复率，使用英文逗号隔开即可。（以下的p标签和h1标签都应用上了）

   

 （6）选择起的优先级

 全局选择器：使用*索引

元素选择器：使用标签名称索引

类选择器：使用class索引

ID选择器：使用id索引

行内样式>ID选择器>类选择器>元素选择器

（7）关系选择器

1、后代选择器：选择所有被E元素包含的F元素，中间用空格隔开

只要E的后代，都会生效

语法：E F{};

例如li标签是ul的子标签

<body>
    <ul>
        <li>关系选择器</li>
        <li>后代选择器</li>
    </ul>
</body>

编写后代选择器方法如下：

<style>
        ul li{
            color: crimson;
        }
    </style>

2、子代选择器

语法：E>F{}

只有E的子代才能生效。

3、相邻兄弟选择器

选择紧跟E元素的F元素，用加号表示，选择相邻的第一个兄弟元素

只能向下选择。

语法：E+F{}

示例如下：

  

 

 4、通用兄弟选择器

 语法：E~F{}

选择与E元素相邻的所有兄弟元素。

 

posted @ 2022-08-10 16:34  Jaoany  阅读(102)  评论(0)  编辑  收藏  举报