CSS选择器的区别

来源：互联网发布：瞬联软件编辑：程序博客网时间：2024/05/31 05:27

CSS的修炼心得
           学习CSS之前必须得对html有基础的了解。
        CSS即层叠样式表（Cascading Style Sheets）,学习CSS是为了将内容与表现分离，实现更好的页面布局，具有两个特性：继承性和层叠性。
一：CSS的使用方式：CSS有三种运用方式，可以单独使用也可以一起使用。
1.行内样式：直接在html的标签中使用style属性。如：
              <head>
             </head>
              <body>
                    <h1 styele=”background-color: red; color: blue; font-family: 黑体；”>
                              我是一个好人</h>
             </body>
        其运行效果可以自己演示一下.
2.内部样式：在头文件中加入<style>标签。格式如下：

<head>
<style type=”text/css”>

</style>
</head>
<body>

</body>

3.外部样式：即样式表CSS文件在外部建立，扩展名.css。然后在html中引用。

两种方法引用：
1-使用html语法：在<head></head>部分中使用
<head>
<link real=”stylesheet” type=”text/css” href=”外部文件的地址”
</head>
2-在<head>的部分使用Css里的语法: css的import指令

二：常用选择器
          1.标签选择器
               选择器{
                           属性1名: 属性值；
                          属性2名: 属性值；
                             ……
                            }
                   如：
                                      <head>
                                               <style>
                                                    h1{
                                                           background-color:red;
                                                           color:red;
                                                           Font-family:黑体;
                                                              }
                                               </style>
                                               </head>
                                                           <body >
                                                                    <h1>我是一个好人</h1>
                                                            </body>
           运行效果可以自己演示一下
    2.类选择器:class=” 名字”
               使用类选择器: 在要使用这个选择器的网页元素中使用class属性 class=”类选择器的名字”
          影响的范围：网页中所有设置了class=””的标签，可以跨标签

         .名字{
                  background-color:red;
                  color:red;
                   Font-family:黑体;
                  }
     如:
            <head>
                  <style>
                      .one{
                              background-color:red;
                             color:red;
                             Font-family:黑体;
                              }
               </style>
             </head>
             <body >
                     <h1 class=”one”>我是一个好人</h1>
             </body>
         运行效果可以自己演示一下
   3-id选择器: #名字
                使用ID选择器: 在要使用这个选择器的网页元素中设置ID属性: id=” 类选择器的名字”
        影响的范围：网页中设置了此ID的标签，通常只影响单个网页元素

             #one{
                       属性;
                      属性;
                         }

语法与类选择器一样,只是将 “ . ”换成” # ”;<body>中class换成 id ;

代码就不演示了.

三:复合选择器:

1-后代选择器

语法：选择器1空格选择器2

影响范围: 选择器1的后代(包括直接后代和间接后代)中所有符合选择器2的元素

其运行效果:

2-交集选择器

以标签选择器开始，后面跟上类选择器或者ID选择器

例如： p.speical{ }

影响到同时满足2种选择器的元素

其效果如下:

3- 并集选择器

样式相同的多个选择器的集体声明，多个选择器之间用逗号隔开

代码：

其运行效果:

4-子元素选择器:

用法大概和后代选择器一样的用法.但是子元素的范围更小,其只能影响元素的子元素. 不能用于间接元素.

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong{color:red;}

如

<!DOCTYPE HTML>
<html>
<head>
              <style type="text/css">
                     h1 > strong {color:red;}
             </style>
      </head>

             <body>
                      <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
                      <h1>This is <em>really <strong>very</strong></em> important.</h1>
              </body>
</html>
其运行效果:

This is very very important.

This is really very important.

如:

           <!DOCTYPE HTML>
            <html>
              <head>
                         <style type="text/css">
                                   h1 > strong {color:red;}
                        </style>
             </head>

             <body>
                   <h1>This is <strong>very</strong><em> <strong>very</strong></em> important.</h1>
                   <h1>This is <em>really <strong>very</strong></em> important.</h1>
              </body>
            </html>

其效果如下:

This is veryvery important.

This is really very important.

5-相邻兄弟选择器:

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:10px;}

如:

              <!DOCTYPE HTML>
                     <html>
                      <head>
                            <style type="text/css">
                                    h1 + p {margin-top:50px;color:red;}
                            </style>
                      </head>

                       <body>
                                <h1>This is a heading.</h1>
                               <p>This is paragraph.</p>
                               <p>This is paragraph.</p>
                               <p>This is paragraph.</p>
                               <p>This is paragraph.</p>
                                <p>This is paragraph.</p>
                     </body>
                     </html>

其效果:

This is a heading.

This is paragraph.

6-伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link 正常状态下

a:visited 已被访问过的

a:hover 悬停状态下的

a:active 激活状态下的

上面的顺序不能改变.

first-child 第一个元素.

如下面的例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

           <html>
           <head>
                 <style type="text/css">
                       p:first-child {
                                         color: red;
                                           }
                 </style>
           </head>

           <body>
                <p>some text</p>
                <p>some text</p>
           </body>
         </html>
其运行效果:只有第一个<p>标签有效果

some text

7-伪元素

<html>
          <head>
          <style type="text/css">
                 p:first-line
                        {
                         color: #ff0000;
                         font-variant: small-caps
                          }
           </style>
</head>

<p>
You can use the :first-line pseudo-element to add a special effect to the first

line of a text!
</p>
</body>

</html>

其效果如下:

选择器大致就这几种,许多都是相通的.根据情况选用适合的选择器

0 0