2021-03-02

2021-03-06 22:30:07 阅读：123 来源： 互联网

标签：02 03 child 标签元素 2021 menu type 选择器

css选择器

css中最重要是选择器的使用，选择作用于页面上的某一个或某一类元素，对于字体、页面等的样式优化一般都是运用选择器，这样会方便简单一些。
选择器也有分类，分为以下几类。

基本选择器

标签是一种全局选择器，例如你想使整个页面的某一类标签全是一种样式，可以使用*号，也可以使用标签选择器。

body{
        background: bisque;
    }
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style-type:none ;
    }
    a{
        text-decoration: none;
    }

这些都是标签选择器，使用之后，所有该标签下的元素的样式会根据你设置的属性而改变。

id选择器
id选择器全局唯一，意思是在整个页面中只被使用一次。它允许以一种独立于文档元素的方式来指定样式。

#c1{
        margin: 0 auto;
        width: 1000px;
        height: 78px;
        background: aliceblue; 
    }
……
<h1 id="c1">我是标题1</h1>

以#号为标识，在使用的时候，在行内用id引用。

类选择器
作用于所有选择class属性一致的标签，类选择器允许以一种独立于文档元素的方式来指定样式，该选择器可以单独使用，也可以与其他元素结合使用。

.header{
        margin: 0 auto;
        width: 1000px;
        height: 78px;
        background: aliceblue;
    }
    .header-left{
        position: relative;
        height: 78px;
        float: left;
    }
 <div class="header">
         <div class="header-left">
             <img src="https://staticssl.kugou.com/public/root/images/logo.png" alt="">
             <input name=" " type="text" id=" ">
             <div class="search-btn">
            <!-- 标签显示斜体文本效果。-->
                 <i> </i>
             </div>
         </div>
         <div class=" header-right">
             <ul>
                 <li><a href="##">客服中心</a></li>
                 <li><a href="##">招贤纳士</a></li>
                 <li><a href="##">会员中心</a></li>
             </ul>
             <a href="#" class="loginBtn"> 登录</a>
         </div>
     </div>

只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

优选原则
在基本的这些选择器中，有优先级的区别， id选择器要大于类选择器，也要大于标签选择器，而类选择器大于标签选择器。

层次选择器

层次选择器有点类似于套娃，一层套一层的，但是实际上运用的还是基本的选择器。

层次选择器的结构可以用上图来解释，假如你想改变body里面所有的样式，那么在body这一层可以停下来。但你要是想继续往下，就一直寻找下一层，直到寻找到你需要的，你想要改变的那层。

 .menu .menu-left .sub-menu li a{
        height: 37px;
        line-height: 37px;
        font-size: 15px;
        color: #bbb;
    }

例如在这里，先是一个class选择器，在这个下面是.menu-left，然后是.sub-menu，在这个下面的所有li标签中的a标签都会被选择器设置的属性所改变，一层一层的套下去。
层次选择器也可以分为几个大类，像后代选择器、子代选择器、相邻兄弟选择器、通用选择器等。
3.结构伪类选择器
这一类选择器使用起来也很方便，而且还可以精准定位到元素，可以按照使用的方法分为四类。通用子元素过滤器，像nth-child(n)和nth-last-child(n)；通用子类型元素过滤器，nth-of-type(n)和nth-last-of-type(n)；特定位置的子元素，first-child，last-child，first-of-type，last-of-type；特定状态的元素root（根节点）、only-child（独子元素）、only-of-type（独子类型元素）和empty（孤节点）。

.menu-right li:last-child a{
                    background: url(https://webimg.kgimg.com/7366e06d43da71239d4f2ebd24b4e02e.png) no-repeat left center;
                }

属性选择器

具有特定属性的HTML元素样式不仅仅是class和id。但是注意IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。

input[type="text"]
{
	width:150px;
	display:block;
	margin-bottom:10px;
	background-color:yellow;
}
input[type="button"]
{
	width:120px;
	margin-left:35px;
	display:block;
}

还有一些正则表达式，也可以使用。

标签：02,03,child,标签,元素,2021,menu,type,选择器
来源： https://blog.csdn.net/wyj123_/article/details/114284063

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

2021-03-02

css选择器