首页 > > 网页制作 > css >

CSS 小结笔记之选择器

2018-08-03 08:09:14来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

Css选择器主要分为以下几类

  • 类选择器
  • ID选择器
  • 通配符选择器
  • 标签选择器
  • 伪类选择器
  • 复合选择器

1、类选择器：通过.classname 来选择

例如

 .color2 {
            color: rebeccapurple;
        }

 

同一个标签可以通过多个类名来指定多个样式，但是若其中有重叠部分，则按权重值重叠，若在同一权重级别中，如都是内部样式表中的，则按照上下关系，下面的覆盖上面的。

例如：

  .classtest1 {
            font-size: 25px;
            color: blue;
        }
        
  .classtest2 {
            color: red;
        }
 <p class="classtest1 classtest2">classtest</p>

则p标签内容显示红色，样式覆盖只与样式定义的顺序有关，与指定的循序无关，如果将上述的p标签中的class顺序调换，则结果不会改变。例如

 <p class="classtest2 classtest1">classtest</p>

显示结果与上面的显示结果一致。

2、Id选择器通过#id来选择

例如

 #id1 {
            color: palegreen;
        }
 <p id="id1">idTest</p>

在网页中一般来说一个id对应一个元素，多个元素使用同一id值虽然不会报错，并且可以使用同一样式，但是用js进行操作时会出现问题。

3、通配符选择器 * 

通配符选择器是选择所有元素。

 

*{
background-color:yellow;
}

 

4、标签选择器element 

例如 为所有的div设置样式：

 div {
            color: blue;
            font-size: 20px
        }

5、伪类选择器

（a）连接伪类选择器  :link |:visited |:hover |:active

　    a:link {/* 链接的颜色 */
            color: blue;
        }
        
        a:visited {/* 已访问过的颜色 */
            color: green;
        }
        
        a:hover {/* 鼠标放上去的颜色 */
            color: red;
        }
        
        a:active {/*点击瞬间的颜色 */
 　　　　　　color: yellow; 
　　　}
<a href="#">a链接</a>

连接伪类选择器的顺序尽量不要改变，因为hover放在link和visited后才有效，active再hover后才有效

(b)结构伪类选择器 

  • :first-child 选取第一个元素
  • :last-child 选取最后一个元素
  • :nth-chlid(n) 选取第n个元素（n从1开始，n小于等于0时没有匹配项）
  • :nth-last-child
        li:first-child {
            color: blue;
        }
        
        li:last-child {
            color: green;
        }
        
        li:nth-child(5) {
            color: red;
        }
        
        li:nth-last-child(5) {
            color: orange;
        }
        /* even、2n指定偶数项 odd、2n+1 奇数 */
        
        li:nth-child(odd) {
            font-size: 25px;
        }
        
        li:nth-last-child(2n+1) {
            font-size: 35px;
        }
 <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
        <li>li6</li>
    </ul>

结果如下图所示

 上述的选择器是将父元素中所有的元素进行排序来计算n的，所以当目标元素中穿插了其他元素，此种方法会出现问题。需要用到以下选择器

  • :first-of-type            同种类型元素的第一个
  • :last-of-type            同种类型元素的最后一个
  • :only-of-type           同种类型元素的单独的一个  
  • :nth-of-type(n)        同种类型元素的第n个
  • nth-last-of-type(n)  同种类型元素的倒数n个
span:nth-of-type(even) {
            color: blue;
        }
 <div>
        <span>span1</span>
        <p>p1</p>
        <span>span2</span>
        <span>span3</span>
        <p>p1</p>
        <span>span4</span>
        <span>span5</span>
        <span>span6</span>
    </div>

这时用nth-of-type(n)没有问题而使用 nth-child(n)会出现问题，可以自己试一下。

(c)目标选择器 :target

只对当前目标有效

 :target {
            color: blue;
            font-size: 30px;
        }

 

    <a href="#div1">div1的链接</a>
    <a href="#div2">div2的链接</a>
    <div id="div1">div1Text</div>
    <div id="div2">div2Text</div>

点击div1的链接则div1处于活动状态，此时div1的样式改变

 

6、复合选择器

 (1)交集选择器

交集选择器是标签选择器+类选择器（中间没有空格！）。

 p.pred {
            color: red;
        }
 <span class="pred">spanText </span>
 <p class="pred">Ptext</p>

对于上面的例子中，只有p标签改变了颜色

(2)并集选择器 element,element 

当多个标签需要设置同种样式时，使用并集选择器,并集选择器用逗号隔开，如：

 

 div,
 span,
 .cla1{
            color:pink;
        }

 

<div>divtext</div>
<span>spantext</span>
<h3 class="cla1">h3text</h3>

上面三中结果显示样式一致。

(3)后代选择器 element element 

后代选择器用空格隔开，例如

 div span {
            color: orange;
        }

 

指定div下面的span标签是橙色

<div>divText</div>
<span>SpanText</span>
<div>
    <span>divspanText</span>
</div>

只有 divspanText 文本变成橙色

(4)子元素选择器 element>element

 后代选择器只要是满足前一个标签内的子孙元素都可以，而子元素选择器只有子元素才可以。

 div>p {
            color: hotpink
        }
  <div>
        <p>divpText</p>
        <h1>
            <p>h1pText</p>
         </h1>
    </div>

只有divptext颜色改变，而h1ptext颜色不变。

(5) 下一级选择器 element+element

选择紧接着在上一个元素之后的元素

 

 div+p {
            color: green;
        }

 

   <div>
     <p>divpText</p>
      <h1>
          <p> h1pText</p>
      </h1>
    </div>
    <p>ptext</p>

只有ptext颜色改变。

 (6)属性选择器 E[attr] 

具体用法在下例给出

    div[class=cla] {
            color: pink;
        }
        
        div[class^=div] {
            /*以div开头的class*/
            color: blue;
            font-size: 15px;
        }
        
        div[class$=div] {
            /*以div结尾的class*/
            color: orange;
            font-size: 15px;
        }
        
        div[class*=Text] {
            /*包含Text的class*/
            color: green;
            font-size: 15px;
        }

 

    <div class="cla">claText</div>
    <div class="div1">div1Text</div>
    <div class="div2">div2Text</div>
    <div class="div3">div3Text</div>
    <div class="1div1Text">1div1Text</div>
    <div class="1div1Text">2div1Text</div>
    <div class="1div1Text">3div1Text</div>
    <div class="1div">1divText</div>
    <div class="2div">2divText</div>
    <div class="3div">3divText</div>

(7)伪元素选择器 

  • ::first-letter 首字母
  • ::first-line  首行
  • ::selection 选中的元素
  • ::brfore     在元素开始添加内容与content一起使用
  • ::after       在元素结尾添加内容与content一起使用
      p::first-letter {
            color: red;
            font-size: 30px;
        }
        
        p::first-line {
            color: palegreen;
            font-size: 25px;
        }
        
        p::selection {
            color: blue;
            font-size: 25px;
        }
        
        P::after {
            content: '-结尾'
        }
        
        p::before {
            content: '开头：';
        }
 <p>层叠样式表(英文全称：Cascading Style Sheets) 是一种用来表现HTML（标准通用标记语言的一个应用） 或XML（标准通用标记语言的一个子集） 等文件样式的计算机语言。 CSS不仅可以静态地修饰网页， 还可以配合各种脚本语言动态地对网页各元素进行格式化。
    </p>

伪元素与伪类选择器的区别：

首先，在Css3标准中伪元素选择器使用两个冒号'::'，而伪类选择器使用一个冒号‘ : ’。再就是如果不使用伪元素选择器，想要达成相同的效果需要多添加元素才能实现，而不使用为例选择器想要达成相同的效果需要增加一个类来实现。

例如对于上面的伪元素选择器，想要改变第一个字母的颜色大小则需要增加一个标签：

        span {
            color: red;
            font-size: 30px;
        }
 <p><span>层</span>叠样式表(英文全称：Cascading Style Sheets) 是一种用来表现HTML（标准通用标记语言的一个应用） 或XML（标准通用标记语言的一个子集） 等文件样式的计算机语言。 CSS不仅可以静态地修饰网页， 还可以配合各种脚本语言动态地对网页各元素进行格式化。
    </p>

而不使用伪类选择器想要改变第一个元素的样式需要增加一个类，例如

 .first {
            color: blue;
        }
<li class="first">li1</li>

 

 

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：Bootstrap-table 部分浏览器显示不出来

下一篇：如何让浮动的元素换行？？css

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签