1.css常用的选择器

最新推荐文章于 2022-11-21 21:18:46 发布

堵车了

最新推荐文章于 2022-11-21 21:18:46 发布

阅读量114

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_45660035/article/details/119361466

版权

css 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1.css选择器的作用

css选择器的作用就是根据需求的不同把不同的标签选出来。其可以分成简单选择器和复合选择器

2.常用的简单选择器

通用选择器

<!DOCTYPE html>
<html lang="zh-CN">

<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>test1</title>
  <style>
    /* 通用选择器一般是对页面的所有内容加样式 */
   * {
     color: red;
   }
  </style>
</head>

<body>
  <div>这是一段测试用的文字</div>
</body>

</html>

注意在一般开发时有一个最通用的写法，其目的是为了浏览器的兼容性，消除不同浏览器自带的一个样式

   * {
     margin: 0;
     padding: 0;
   }

标签选择器

标签选择器的作用是给指定页面的所有该标签加样式

<!DOCTYPE html>
<html lang="zh-CN">

<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>test1</title>
  <style>
    /* 标签选择器是给页面所有的该标签加样式 */
    div {
      color: red;
    }
  </style>
</head>

<body>
  <div>这是一段测试用的文字</div>
  <div>这是一段测试用的文字2</div>
</body>

</html>

类选择器

类选择器是实际开发中使用到的最多的一个。添加属性的方式是根据class属性进行

<!DOCTYPE html>
<html lang="zh-CN">

<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>test1</title>
  <style>
    /* 类选择器是通过class属性来加标签的 */
    .first {
      color: red;
    }

    .last {
      color: blue;
    }
  </style>
</head>

<body>
  <div class="first">这是可以通过类选择器加样式</div>
  <div class="last">这是可以通过类选择器加样式</div>
  <div class="first">这是可以通过类选择器加样式</div>
</body>

</html>

id选择器

相比较类选择器，其使用很少，同时由于一个页面标签的id唯一性，所以可以通过id给特定的标签加样式

<!DOCTYPE html>
<html lang="zh-CN">

<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>test1</title>
  <style>
    /* id选择器对特定了标签添加样式 */
    #first {
      color: red;
    }

    #next {
      color: black;
    }

    #last {
      color: blue;
    }
  </style>
</head>

<body>
  <div id="first">这是可以通过id选择器加样式</div>
  <div id="next">这是可以通过id选择器加样式</div>
  <div id="last">这是可以通过id选择器加样式</div>
</body>

</html>

3.常用的复合选择器

后代选择器

后代选择器其目的就是选择父标签里面特定的子标签去添加样式

<!DOCTYPE html>
<html lang="zh-CN">

<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>test1</title>
  <style>
    /* 后代选择器用于选择某个标签里面的部分内容 */
    .father .son {
      color: red;
    }

    /* 后代选择器的层次可以不停的叠加 */
    .father .son span {
      color: blue;
    }
  </style>
</head>

<body>
  <div class="father">
    <span class="son">这是第一个内容</span>
    <span class="son">这是第二个内容<span>这是孙子的内容</span></span>
    <span>这是第三个内容</span>
  </div>
</body>

</html>

子代选择器

相比较后代选择器，子代选择器只会选择父类的直接后代标签，不会传递到直接后代里面的后代标签。选择的返回相比较更加的精确

<!DOCTYPE html>
<html lang="zh-CN">

<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>test1</title>
  <style>
    /* 子代选择器只会选择直系后代 */
    .father>a {
      color: red;
    }
  </style>
</head>

<body>
  <div class="father">
    <a href="#">这是直系后代</a>
    <div><a href="#">这不是直系后代</a></div>
  </div>
</body>

</html>

并集选择器

并集选择器是给多组标签同时定义相同的样式时使用。

<!DOCTYPE html>
<html lang="zh-CN">

<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>test1</title>
  <style>
    /* 并集选择器可以同时对多个不同标签添加相同的样式 */
    .first,
    p,
    span {
      color: red;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="first">这是一个div标签</div>
    <p>这是一段p标签</p>
    <span>这是一段span标签</span>
  </div>
</body>

</html>

伪类选择器

常用a连接的伪类选择器

:link   默认的，表示未访问过的样式 
:visited  表示访问过的样式，较常用
:hover 表示鼠标悬停, 很常用
:active 表示点击状态的

<!DOCTYPE html>
<html lang="zh-CN">

<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>test1</title>
  <style>
    
    a {
      color: red;
    }
    a:visited {
      color: cyan;
    }
    a:hover {
      color: beige;
    }
    a:active {
      color: pink;
    }
  </style>
</head>

<body>
  <a href="#">这是一段测试的话</a>
</body>

</html>

常用的input标签的伪类选择器

:focus  对输入框聚焦时的样式

<!DOCTYPE html>
<html lang="zh-CN">

<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>test1</title>
  <style>
    input:focus {
      background-color: red;
    }
  </style>
</head>

<body>
  <form action="">
    <label for="name">
      姓名：
    </label>
    <input id="name" type="text">
    <label for="password">
      密码：
    </label>
    <input id="password" type="text">

  </form>
</body>

</html>

3.css选择器的权重

类型	权重
通配符选择器（*）	0,0,0,0
标签选择器，伪元素选择器（::before ,::after）	0,0,0,1
类选择器，属性选择器，伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内样式（style）	1,0,0,0
!important	无穷

权重高的会覆盖权重低的相同样式
权重相同，采用就近原则，后者覆盖前者相同样式
多个样式权重叠加是没有进位计算的。如：0,0,0,5 + 0,0,0,5 = 0,0,0,10而不是0,0,1,0

堵车了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.css常用的选择器

1.css选择器的作用css选择器的作用就是根据需求的不同把不同的标签选出来。其可以分成简单选择器和复合选择器2.常用的简单选择器通用选择器<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
复制链接

扫一扫