首页 > 博客列表 > CSS选择器讲解

博主信息

博文 41

粉丝 2

访问量 37579

专题推荐

更多>

1.css选择器优先级

tag选择器 class选择器 id同类选择器优先级顺序

同类选择器

生效顺序为同类最后一个

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      h1 {
          color : blue;
      }
      h1 {
          color : red;
      }
  </style>
</head>
<body>
  <h1>hello world</h1>
</body>
</html>

id选择器，class选择器，tag选择器优先级顺序
id选择器>class选择器>tag标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       #one {
           background-color: red;
       }
       .one {
           background-color: blue;
       }
       .two {
           background-color: blue;
       }
       ul li {
           background-color: darkcyan;
       }
    </style>
</head>
<body>
<ul>
    <li class="one" id="one">item1</li>
    <li class="two" id="two">item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>
</body>
</html>

此处可以看到结论

id选择器>类选择器和tag选择器的
类选择器>tag选择器

所以最后的结论是

id选择器>class选择器>tag标签选择器
同类选择器，最后一个选择器为优先级

2.前端组件样式模块化

方法一

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
     @import "css/css1.css";
  </style>
</head>
<body>
<h1>
  hello world!
</h1>
</body>
</html>

方法二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/css1.css">
</head>
<body>
<h1>
    hello world!
</h1>
</body>
</html>

效果图
两个效果都是一样的

3.实例演示常用伪类选择器的使用方式

css
css1

.my_form :only-of-type {
  background-color: darkcyan;
}
.index :nth-of-type(2) {
  color:red;
}

css2

.index :first-of-type {
  color: darkcyan;
}
.index :last-of-type {
  color: blue;
}

css3

@import "css1.css";
@import "form.css";

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      @import "main.css";
  </style>
</head>
<body>
<nav class="index">
  <a href="">商品详情</a>
  <a href="">商品列表</a>
  <a href="">个人中心</a>
</nav>
<form class="my_form" style="display: grid; gap: 1rem">
  <input type="text"  placeholder="Username">
  <input type="password"  placeholder="Password">
  <input type="email"  placeholder="demo@email.com">
  <button>提交</button>
</form>
</body>
</html>

效果图

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

php之类与继承

2021-05-07 22:53:35

1.css选择器优先级

tag选择器 class选择器 id同类选择器优先级顺序

同类选择器

id选择器，class选择器，tag选择器优先级顺序

2.前端组件样式模块化

方法一

方法二

效果图

3.实例演示常用伪类选择器的使用方式