您的位置：首页 > Web前端 > CSS

html css学习笔记-详解各种选择器

2015-05-16 10:04 721 查看 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css">
        .p1{color: blue}
        .p2{font-size: 30px;}
        .p3{font-size: 40px;}
        /*多类选择器*/
        .p1.p2{
            background-color: red;
        }
        #divid{

        }

        /*后代选择器*/
        p strong{
            font-family: fantasy;;
        }

        h1>strong{
           font-size: 50px;;
        }

        /*相邻兄弟元素器，必须有相同的父元素*/
        li+li{
            color: blue;
            font-size: 20px;;
        }
    </style>
    <title></title>
</head>
<body>
<!--
  元素选择器，最基本的选择器  如 h1{...}  p{..}
  选择器分组
     如: h1,h2{} 同时应用于h1,h2
      通配符 *{margin:0;padding:0;}  所有标签将使用该样式
  类选择器详解
      a.class{}
      多类选择器:
  id选择器详解
     id选择器是先找到结构后找到内容;后渲染
     而类选择器先渲染，再找结构再找到内容
  属性选择器详解:根据具体的属性值缩小范围
      简单属性选择器：[title]{color:aqua;}
      根据具体的属性值加载： a[href="http://www.baidu.com"]{
         ...
      }
      属性和属性值完全匹配：
         [title="t"]{
           ...
         }
      根据部分属性值选择
        [title~="mytitle"] { //模糊匹配，只要具有title 中包含mytitle都会起作用

        }
  后代选择器
        p strong{
            font-family: fantasy;;
        }
  子元素选择器
     h1>strong{
     }
  相邻兄弟选择器:可以选择紧接在另一个元素后的元素，且二者有相同的父元素
     h1+p{
       ..
     }
-->
<p class="p1">this is my web page</p>
<p class="p2">this is my web page</p>
<!--多类选择器-->
<p class="p1 p2">this is my web page</p>

<!--id选择器-->
<div id="divid">
    this is div test node
</div>

<a href="http://www.baidu.com">baidu.com</a>
<a href="http://www.yuku.com" title="mytitle aa">yudu.com</a>

<p>hello this a  后代选择器<strong>aaaaa</strong>  </p>
<h1>hello <strong>strong</strong></h1>

<!--相邻兄弟选择器-->
<ul>
    <li>ab</li>
    <li>ab</li>
    <li>ab</li>
    <li>ab</li>
</ul>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航