CSS(02)--CSS的选择器即权重关系

最新推荐文章于 2024-10-19 15:55:42 发布

sdsjx01

最新推荐文章于 2024-10-19 15:55:42 发布

阅读量177

点赞数

分类专栏： CSS 文章标签： css css选择符伪类 css选择符权重

本文链接：https://blog.csdn.net/sdsjx01/article/details/88967478

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

HTML页面中的元素就是通过CSS选择器进行控制的

什么是选择器：每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

选择器的分类：

1：类型选择符（标签选择符）：
           html中所有的标签都可以直接对元素直接进行选择
           特点：对页面中所有当前类型的元素进行选择。
           应用：想清除某个元素默认样式的时候、统一某个元素样式的时候。

div{
	background: chartreuse;
}

2：id选择器：
           语法：<标签 id="id名字"></标签>
               #id名字｛
                   css语法。
               ｝
           特点：id名字在单一一个页面中是唯一的
           应用：id名是划分网页外部结构的

#nav{
	background: chartreuse;
}

3：类选择器（class选择符）
           语法：<标签 class="class名字"></标签>
               .class名字｛
                   css语法。
               ｝
           特点：一个元素可以起多个class名称
           应用：可以定义一类样式

.nav{
	background: coral;
}

4：包含选择符
语法：父元素选择符子元素选择符｛
｝

/*包含选择符*/

#nav .nav{
	background: coral;
}

5：群组选择符：
           语法：选择符1,选择符2,选择符3｛

           ｝

/*群组选择符*/
.nav,#nav,div{
	background: coral;
}

6：伪类选择符：
           a:link{}:超链接的初始状态
           a:visited{}:超链接被访问后的状态
           a:hover{}:鼠标悬停时多的状态，即鼠标划过时的状态
           a:active{}:超链接被激活时的状态，即鼠标按下时超链接的状态。

/*伪类选择符*/
a:link{
	color: #FF7F50;
}
a:visited{
	color: blueviolet;
}
a:hover{
	color: cornflowerblue;
}
a:active{
	color: aqua;
}

  7：通配符：
           选择当前页面所有标签
           语法：
           *｛margin:0;padding:0｝

/*重置样式*/
*｛	
	margin:0;
	padding:0;
｝

8:CSS3新增伪对象选择器:

   元素:first-child{}  选中第一个子元素
    元素:last-child{}   选中最后一个子元素
    元素:nth-child(number/odd/even/3n){} 选中第几个子元素/奇数/偶数/3的倍数
    元素:not(基本选择器){}  这个元素不选中
    适用于input的:
        元素:focus{}  输入框获取焦点的时候
        元素:checked{}  单选框选中的时候

 <style>
        /*第一个元素li中的a颜色变为绿色*/
        li:first-child a{
            color: #52ff5c;
        }
        div:not(.con){
            color: darkmagenta;
        }
    </style>

<body>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div class="con">123</div>


    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
    </ul>
</body>

4:常用伪对象选择器(伪元素选择器)
    元素::before{
        content:"";  要插入的内容
    }  在什么之前插入
    元素::after{
        content:"";  要插入的内容

    }  在什么之后插入

  <style>
        .one::before{
            content: "";
            width: 50px;
            height: 1px;
            background: #52ff5c;
            display: block;
        }
        .one::after{
            content: "";
            width: 1px;
            height: 50px;
            background: #1fa7ff;
            display: block;
        }
       .two::after{
            content: url(images/shouji_03.jpg) ;
       
        }


    </style>
<body>
    <div class="one">选择器</div>
     <div class="two">插入图片</div>
</body>

选择符的权重关系（*）：

内联样式 >id > class、伪类 > 标签
（1000）（100）（10）（1）
包含选择符权重为权重之和
群组选择符权重保持自身权重不变