CSS选择器

最新推荐文章于 2024-08-19 19:27:18 发布

0502班的王梦

最新推荐文章于 2024-08-19 19:27:18 发布

阅读量341

点赞数 11

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_65007952/article/details/135332788

版权

本文详细介绍了CSS的基本选择器，如标签选择器、类选择器、ID选择器、通配选择器等，以及样式冲突、层次选择器、结构伪类选择器和超链接伪类选择器的用法，帮助读者理解CSS样式设置的原理和实践。

摘要由CSDN通过智能技术生成

基本选择器

选择器：选择对应的元素设置对应样式效果

语法：

选择器名称{

属性：属性值

}

<style type="text/css">
    <!--标签选择器-->
    h3{
       color:read 
    }
    <!--类选择器（可以被多个标签使用,一个标签也可以使用多个类选择器）-->
    .center{
        text-align:center
    }
    <!--边框选择器--->
    .bd{
        border:width(大小) style(类型) color(颜色)
    }
    <!--id选择器(一个标签只能有一个ID选择器，一个ID选择器也只能被一个标签使用，id选择器的前面必须写#)-->
    #card{
        //字体粗细（100-900之间的整数）
        font-weight:100
    }
     <!--通配选择器，优先级别很低-->
    *{
      margin: 0;
      padding: 0;
    }
    <!--群组选择器-->
    h3,p{
      margin: 20px;
    }
    <p class="center">Hello<p/>
    <p>Hello<p/>
    <p>Hello<p/>
    <h3>怀化学院<h3/>
    <h3>怀化学院<h3/>
    <h3>怀化学院<h3/>
</style>

注意

选择器之间存在样式冲突：选择器的权值大小决定了选择器优先级

ID选择器>类选择器>标签选择器>通配选择器

样式不冲突：合并

层次选择器

E F：选择元素E的后代F来设定样式【后代选择器】

E>F：选择元素E的子元素F设定样式【子类选择器】

E+F：选择元素E的相邻兄弟元素F设定样式【相邻兄弟选择器】

E~F：选择元素E的所有兄弟元素F设定样式【通用兄弟选择器】

结构伪类选择器

先选择第几个儿子，再看此元素是否为要设定的元素。

E:first-child

E:nth-child

E:last-child

先选筛选元素，在选择元素当中的第n个元素

E:first-of-type

E:nth-of-type

E:last-of-type

超链接伪类选择器

a:link【超链接未被点击】

a:visited【超链接点击之后】

a:hover【鼠标悬浮于链接之上的样式】

a:active【鼠标点击未释放的样式】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style type="text/css">
    /*超链接未被点击*/
    a:link{
      color: #0D7114;
      text-decoration: none;
    }
    /*超链接点击之后*/
    a:visited{
      color: #FF00FF;
      font-size:20px;
      text-decoration: underline;
    }
    /*鼠标悬浮于链接之上的样式*/
    a:hover {
      color: #FF00FF;
      font-size:20px;
      text-decoration: underline;
    }
    /*鼠标点击未释放的样式*/
    a:active {
      color: #0000FF;
      font-size: 20px;
    }

  </style>
</head>
<body>
<a href="#">百度一下 </a>
</body>
</html>

设置时的顺序：a:link>a:visit>a:hover>a:active

0502班的王梦

关注

11
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
CSS选择器

E+F：选择元素E的相邻兄弟元素F设定样式【相邻兄弟选择器】E~F：选择元素E的所有兄弟元素F设定样式【通用兄弟选择器】E F：选择元素E的后代F来设定样式【后代选择器】E>F：选择元素E的子元素F设定样式【子类选择器】先选择第几个儿子，再看此元素是否为要设定的元素。a:hover【鼠标悬浮于链接之上的样式】先选筛选元素，在选择元素当中的第n个元素。a:active【鼠标点击未释放的样式】选择器：选择对应的元素设置对应样式效果。a:visited【超链接点击之后】a:link【超链接未被点击】
复制链接

扫一扫