CSS和CSS3选择器

最新推荐文章于 2024-07-22 20:38:06 发布

一点点墨

最新推荐文章于 2024-07-22 20:38:06 发布

阅读量249

点赞数

分类专栏： css+html 文章标签： css3 css

本文链接：https://blog.csdn.net/smilerm/article/details/78795901

版权

css+html 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

1、元素选择器

<style type="text/css">
   html{color:black;}  
   h1{color:blue}
</style>

2、选择器分组

 <style type="text/css">
    h2,p{color:gray;}
</style>

3、类选择器

<style type="text/css">
   .important{ color:red;}  /*选择所有class=’important’的元素*/
   p.important{ color: red;}  /*中间没有空格；匹配class=”important”的所有p元素*/
   div .important{ color:blue;}  /*有空格；匹配div标签的子元素中class=”important”*/
</style>
<body>
  <div class="important">
      <p></p>
      <p class="important"></p>
      <div class="one"></div>
  </div>
</body>

4、ID选择器

  <style type="text/css">
    #intro{ font-weight:800;}  /*选择id=”intro”的元素；类名可以重复有多个；id只能有唯一的一个；二者都区分大小写；*/
  </style>
  <body>
    <div id="intro"></div>
  </body>

5、属性选择器

    a[href] {color:red; }   /*只对有和href属性的锚(a元素)应用样式*/
    a[href][title] {color:red;}   /*匹配同时有href和title属性的HTML超链接a*/
    a[href=”http://my.csdn.net/”]{ color:red; }  /*匹配具体属性值*/
    p[class~=”important”] { color: blue;}  /*属性值中包含某个值，要用”~”*/
     [abc^=”def”]  /*选择abc属性以”def”开头的所有元素，不一定是完整单词*/
     [abc$=”def”]  /*选择abc属性值以”def”结尾的所有元素*/
     [abc*=”def”]   /*选择abc属性值中包含子串”def”的所有元素*/
     [abc|=”hello”]   /*选择abc属性等于hello或者hello- 开头的所有元素；class=”hello box”都不行，空格不行；只能是整个单词hello或者hello-box；*/

6、后代选择器(包含选择器)

  div ul{ width:300px; }  /*选择div的子元素中的所有ul元素，不论嵌套多深*/

7、子选择器

h1 > p {color:red;}  /*选择只作为h1元素子元素的p元素；父子关系，不是子孙关系；*/

8、相邻兄弟选择器

 h1 + p {margin-top:50px;}  /*选择紧接在h1后面的p元素，而且两个有相同父元素；*/
 eg:
  <h1>aa</h1> 
  <p>bb</p> 
  <p>cc</p>  /*h1+p选择紧跟在h1后面的p(bb)；*/

9、伪类

         a:link {color: #ff0000;}    /* 未访问的链接*/
         a:visited {color:red;}    /* 已访问的链接 */
         a:hover {color:blue;}    /* 鼠标移动到链接上 */
         a:active {color:green;}   /*选定的链接；被激活的元素*/
         input:focus{color:white;}  /*向拥有键盘输入焦点的元素添加样式*/
         li:hover a{color:orange;}   /*鼠标移动到li上面，a元素改变样式*/
         p:first-child   /*选择该元素的父级元素中p标签元素，如果父级元素下的第一个子元素不是p标签，则不选择*/

  eg：
     <ul>
         <p>aaaaaa</p>
         <li>
            <p>bbbbb</p>
            <p>cccccc</p>
        </li>
    <ul>
    p:first-child{color:red;}  //先看p标签的父元素，再看父元素下第一个元素是不是p标签，不是p就匹配失败；
   li:first-child{color:green;}  //li的父元素ul下第一个子元素不是li，所以匹配失败

eg:
   <p><q lang=”no”>段落中的引用的文字</q></p>
    q:lang(no){color:red;}    //lang类为属性值为no的q元素添加样式；

css3选择器：

     n可以是数值，也可以是表达式算法，如3n选择第3个，第6个....
      :nth-child(n)  //选择器匹配属于其父元素的第n个元素；匹配类型
      :nth-of-type(n)  //匹配属于父元素的特定类型的第n个子元素的每个元素
  eg:  
      p:nth-child(2);   /*先找出p的父元素中的第2个元素，是p标签则选中，不是则不选中；nth-last-child(n) 同上，从最后一个元素算起 */  
      p:nth-of-type(2); /* 选择属于其父元素的第二个<p>元素的每个<p>元素*/   
      p:empty      /*选择没有子元素的每个p元素*/
      p:last-child    /* 选择属于其父元素最后一个子元素每个p元素*/
      input:enabled  /*选择每个启用的input元素*/
      input:disabled  /*选择每个禁用的input元素*/
      input:checked  /* 选择每个被选中的input元素*/
      :not(p)   /*选择非p元素的每个元素*/
      ::selection  /*选择被用户选取的元素部分*/

10、伪元素

 :first-letter   //向文本的第一个字母添加特殊样式
 :first-line    //向文本的首行添加样式
 :before     //在元素之前添加内容
 :after      //在元素之后添加内容
 eg:  css:   h1:before {content:url(img/login.jpg); }
      html:  <body>
                <h1>this is a heading</h1>
                <p>this is a</p>
            </body>