JavaWeb学习——CSS的选择器学习

JavaWeb学习——CSS的选择器学习

1.CSS基础选择器

我们利用基础选择器，为下面的元素设置样式：

    <h1 class="class1">我是一只快乐的小青蛙</h1>
    <h2 id="a" class="class1">红尘来去一场梦</h2>
    <p class="class1">你好世界！</p>

①标签选择器

标签选择器是将HTML标签作为选择器名的一种选择器
如下：

     h1{
           color: red;
       }

效果显示：

当多个标签属性一致是，也可以使用逗号隔开，如：

       h1,h2,p{
           color: yellow;
       }

效果展示：

②id选择器

id选择器是给标签添加id属性，然后通过id选择器给标签设置样式
如下：

        #a{
            color: red;
        }

效果展示：

③类选择器

类选择器是给多个标签元素设置同一个class属性，让它们成为一类。然后用过类选择器给其添加样式：

        .class1{
            border: 1px black solid;
        }

效果展示：

基本选择器的优先级：
ID选择器>类选择器>标签选择
而且基本选择器不遵循“就近原则”

2.CSS高级选择器

①层次选择器

层次选择器中又有四种选择器：

• (1)后代选择器（包含选择器）
  选择ul标签下的所有p标签（只要是在ul标签下的p标签都会被选择）：

  <ul>
      <li><p>Java</p></li>
      <li><p>PHP</p></li>
      <li><p>Python</p></li>
      <li><p>C#</p></li>
      <li><p>C++</p></li>
  </ul>
  

          ul p{
              color: red;
          }
  

  效果展示：
  

• (2)子选择器
  选择ul标签下的第一层的p标签（只能选择到ul标签的儿子，不能深入到下一层）：

  <ul>
      <p>你好啊子选择器</p>
      <li><p>Java</p></li>
      <li><p>PHP</p></li>
      <li><p>Python</p></li>
      <li><p>C#</p></li>
      <li><p>C++</p></li>
  </ul>
  

  效果展示：
  
  注意区分后代选择器和子选择器！！！！

• (3)相邻兄弟选择器
  选择span标签相邻的下一个h1标签：

      <h1>相邻兄弟选择器</h1>
      <span id="a">span标签</span>
      <h1>相邻兄弟选择器</h1>
      <h1>相邻兄弟选择器</h1>
  

          #a+h1{
              color: red;
          }
  

  效果展示：
  
  如果span相邻的下一个标签不是h1标签，那么相邻兄弟选择器就会失效：

      <h1>相邻兄弟选择器</h1>
      <span id="a">span标签</span>
      <h2>你好</h2>
      <h1>相邻兄弟选择器</h1>
      <h1>相邻兄弟选择器</h1>
  

          #a+h1{
              color: red;
          }
  

  效果展示：
  

• (4)通用兄弟选择器
  选择span标签后面的所有是h1的兄弟标签：

    <h1>通用兄弟选择器</h1>
    <span id="a">span标签</span>
    <h2>你好</h2>
    <h1>通用兄弟选择器</h1>
    <h1>通用兄弟选择器</h1>

        #a~h1{
            color: red;
        }

效果展示：

②结构伪类选择器

使用结构为类选择器给下面标签设置样式

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

• (1)E:first-child

  作为父元素的第一个子元素的元素E
  选择 ul 下的所有 li 标签的第一个子节点：

  	        ul li:first-child{
  	            background: red;
  	        }
  

  效果展示：
  

• (2)E:last-child

  作为父元素的最后一个子元素的元素E
  选择 ul 下的所有 li 标签的最后一个子节点：

          ul li:last-child{
              background: red;
          }
  

  效果展示：
  

• (3)E F:nth-child(n)

  选择父级元素E的第n个子元素F，（n可以是1、2、3），关 键字为even（偶数位置）、odd（奇数位置）
  选择 ul 下的所有 li 标签的偶数位置节点：

          ul li:nth-child(even){
              background: red;
          }
  

  效果展示：
  

• (4)E:first-of-type

  选择父元素内具有指定类型的第一个E元素

          ul li:first-of-type{
              background: red;
          }
  

  效果展示：
  

• (5)E:last-of-type
  选择父元素内具有指定类型的最后一个E元素

          ul li:last-of-type{
              background: red;
          }
  

  效果展示：
  

• (6)E F:nth-of-type(n)
  选择父元素内具有指定类型的第n个F元素

        ul li:nth-of-type(4){
            background: red;
        }

效果展示：

③属性选择器（常用）

• (1)选择p标签中id为a的标签

      <p id="a">中国</p>
      <p>美国</p>
      <p>日本</p>
      <p>韩国</p>
      <p>朝鲜</p>
  

          p[id=a]{
              color: red;
          }
  

  效果展示：
  

• (2)选择p标签中class为class1的标签

      <p class="class1">中国</p>
      <p class="class1">美国</p>
      <p>日本</p>
      <p>韩国</p>
      <p class="class1">朝鲜</p>
  

   ```
           p[class*=class1]{
               color: red;
           }
   ```
  

  效果展示：
  

• (3)选择a标签中href属性以http开头的标签

          <a href="http://www.baidu.com">百度一下</a>
          <a href="www.sougou.com">搜狗搜索</a>
          <a href="www.163.com">网易</a>
          <a href="http://www.xibukaiyuan.cn">西开</a>
  

          a[href^=http]{
              color: red;
          }
  

  效果展示：
  

• (4))选择a标签中href属性以cn结尾的标签

         a[href$=cn]{
              color: red;
          }
  

   效果展示：