0011-选择器

最新推荐文章于 2024-06-16 20:55:56 发布

Lynan、

最新推荐文章于 2024-06-16 20:55:56 发布

阅读量170

点赞数

分类专栏：前端HTML5 文章标签： css css3 html

本文链接：https://blog.csdn.net/JL_xcly/article/details/122886833

版权

前端HTML5 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!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>14-选择器</title>
</head>
<body>
    一、元素选择符/类型选择符（element选择器）
         语法:元素名称{属性:属性值}
         范围广，方便统一操作
    二、class选择器/类型选择器
         语法:.class名{属性:属性值};
         说明:1）当我们使用class选择符时，应先为每个元素定义一个class名称。
              2）class选择符的语法格式是:
                如:<div class="top"></div>
                   .top{width:200px;height:100px;background:green;}
         用法:class选择符更适合定义一类样式。
    三、id选择器
         语法:#id名{属性:属性值;}
         说明:1)当我们使用id选择器时，应该为每个元素定义一个id属性。如:<div id="box"></div>
              2)id选择器的语法格式是"#"加上自定义的id名。如:#box{width:100px;height:300px;}
              3）起名时要取英文名，不能用关键字:(所有的标记和属性都是关键字)如:head标记。
              4）一个id名称只能对应文档中一个具体的元素对象。（唯一性）
    四、*通配符/通配选择器
         语法:*{属性:属性值;}
         说明:通配选择符的写法是"*",其含义就是所有元素。
         *{margin:0;padding:0;}代表清除所有元素的默认边距值和填充值。
    五、群组选择器
         语法:选择符1,选择符2,选择符3...{属性:属性值;}  例:#top1,#nav1,h1{width:960px;}
         说明:当有多个选择符应用相同的声明时，可以将选择符用","分隔的方式，合并为一组。
         margin:0 auto;实现盒子的水平居中。
    六、包含选择器/后代选择器
         语法:选择符1 选择符2{属性:属性值;}
         说明:含义就是选择符1中包含的所有选择符2；
         用法:当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决。
         如:结构:<ul class="list">
                   <li></li>
                   <li></li>
                   <li></li>
                </ul>
            样式:.list li{background:red;}
    七、伪类选择器
         语法:
          1)a:link{属性:属性值;}超链接的初始状态；
          2)a:visited{属性:属性值;}超链接被访问后的状态。
          3)a:hover{属性:属性值;}鼠标悬停，即鼠标划过超链接时的状态。
          4)a:active{属性:属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态。
          link-visited-hover-active
         说明:
          1)当这4个超链接伪类选择符联合使用时，应注意它们的顺序，正常顺序为:
          a:link;a:visitsd;a:hover;a:active,错误的顺序有时会使超链接的样式失效。
          2)为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
          例如:a{color:red;}a:hover{color:green;}表示超链接的初始和访问过的状态一样，鼠标划过的状态和点击时的状态一样。
    八、选择器的权重
          当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生冲突了，会选择权重高的来执行。
          个数  选择器                   权重
          1     类型（元素）选择器        0001
          2     class选择器（类选择器）   0010
          3     id选择器                 0100
          4     包含选择符               为包含选择符的权重之和
          5     内联样式                 1000
          6     !important               10000
          css选择器解析规则1: 当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式。
          css选择器解析规则2:相同权重的选择符，样式遵循就近原则:哪个选择符最后定义，就采用哪个选择符样式。
          
               
</body>
</html>

Lynan、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0011-选择器

<!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>14-
复制链接

扫一扫