CSS 选择器

css语法:

格式:
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}

选择器:筛选具有相似特征的元素
注意:每一对属性需要使用;隔开,最后一对属性可以不加;

1.1 基础选择器

1)id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一

语法:#id属性值{}

2)元素选择器:选择具有相同标签名称的元素

语法: 标签名称{}

注意:id选择器优先级高于元素选择器、高于类选择器

3)类选择器:选择具有相同的class属性值的元素。

语法:.class属性值{}

注意:类选择器选择器优先级高于元素选择器

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        .cls1{
            color: blue;
        }

        div{
            color:green;
        }
        #div1{
            color: red;
        }
    </style>
</head>
<body>
    <div id="div1">id选择器</div>
    <div >元素选择器</div>
    <p class="cls1">类选择器</p>
</body>
</html>

结果:
CSS 选择器

1.2 扩展选择器

1)选择所有元素:

语法: *{}

2) 并集选择器:
语法:选择器1,选择器2{}

3) 子选择器:筛选选择器1元素下的选择器2元素
语法: 选择器1 选择器2{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        div p{
            color:red;
        }
    </style>
</head>
<body>
    <div>
        <p>段落一</p>
    </div>
        <p>段落二</p>
 </body>
</html>

结果:
CSS 选择器

4)父选择器:筛选选择器2的父元素选择器1
语法: 选择器1 > 选择器2{}

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        div p{
            color:red;
        }
/*选择p标签的div 加一个框*/
        div > p {
            border: 1px solid;
        }
    </style>
</head>

<body>
    <div>
        <p>段落一</p>
    </div>
        <p>段落二</p>
    <div>aaa</div>
  </body>
</html>

结果:
CSS 选择器

5)属性选择器:选择元素名称,属性名=属性值的元素(一般用于选择input标签)
语法: 元素名称[属性名="属性值"]{}

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
      /*属性选择器匹配type=‘text‘ 加边框为5px,type="password"未匹配*/
    	input[type=‘text‘]{
            border: 5px solid;
        }
    </style>
</head>
<body>
	<input type="text" >
	<input type="password" >
</body>
</html>

结果:
CSS 选择器

6)伪类选择器:选择一些元素具有的状态

语法: 元素:状态{}

  如: <a>

状态:link:初始化的状态
visited:被访问过的状态
active:正在访问状态
hover:鼠标悬浮状态

例子:创建一个超链接,初始化为粉色,鼠标悬浮为绿色,鼠标点击之后为黄色,访问过之后为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        input[type=‘text‘]{
            border: 5px solid;
        }
        /*初始状态:粉色*/
        a:link{
            color: pink;
        }
        /*鼠标悬浮*/
        a:hover{
            color: green;
        }
        /*鼠标点击完之后*/
        a:active{
            color: yellow;
        }
        /*鼠标访问之后*/
        a:visited{
            color: red;
        }

    </style>
</head>
<body>
      <br> <br> <br> <br>

<a href="https://www.baidu.com/">超链接</a>
</body>
</html>

结果:
CSS 选择器

CSS 选择器

上一篇:Salesforce LWC学习(三十六) Quick Action 支持选择 LWC了


下一篇:1.0 数据类型