css3-选择器-CSDN博客

本文链接：https://blog.csdn.net/RedGuy_anluo/article/details/50472127

    1. 元素选择器

h1、h2{}

<h1>标题1</h1>
<h2>标题2</h2>

*{
    /*font-size: 45px;*/
    color: red;
    margin: 0px;
    padding:0px;
}

h1,h2{
     /*如果使用过通配符之后下方没有进行再次赋值，则一律按照通配符的设置*/
     /*color: cyan;*/
 }

    1.  类选择器：允许以一种独立与文档元素的方式来指定样式

  比如：给<div class="div"></div>
  使用方法：div.div{}
   给<a class="div"></a>
  使用方法:   a.div{}
其中，如果class的名称没有重复的，点前面的可以省略

     多类选择器：可以拥有所拥有类的所有属性：

<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>

.p1{
    color:cyan;
}
.p2{
    font-size: 55px;
}
.p1.p2{
    font-style: italic;
}
此时，最后一个p标签既有cyan的颜色，又有55号字体的大小，还是斜体。其中前两个属性是由 .p1.p2来的


    1. id 选择器


设置后根据#选择:
#mydiv{
    color: red;
}



ID选择器和类选择器的区别：
     ID只能在文档中使用一次，而类可以使用多次
<div id="mydiv">hello world</div>
<!--同样id的标签只能存在一个-->
<!--<div id="mydiv">hello world</div>-->
<div class="div1"></div>
<!--而同样class的标签可以存在多个-->
<div class="div1"></div>
<div class="div1"></div>
     ID选择器不能结合使用
     当使用JS时候，需要用到 id



4 、属性选择器

<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <link href="select.css" rel="stylesheet" type="text/css">
    <style>
        [title]{
            color: darkcyan;
        }
    </style>
</head>
<body>
    <p title="">hello</p>
</body>

   根据具体属性值选择：
          除了选择拥有某些的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素： 例如：  a[href="www.baidu.com"]{}，在定义属性的时候，必须完全匹配

     根据部分属性值选择：
当波浪线后的部分存在哪个标签内，哪个可以有效执行
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <link href="select.css" rel="stylesheet" type="text/css">
    <style>
        [title~="title"]{
            color: darkcyan;
        }
    </style>
</head>
<body>
    <p title="t">hello</p>
    <p title="title">hello</p>
    <p title="tit">hello</p>
    <p title="title hello">hello</p>
</body>

后代选择器： 可以隔代寻找  

<p>this is my <strong>web<i> hello</i></strong> page</p>

p strong i{  // 隔代寻找：可以写成 p i{}
    color: blue;
}
结果： this is my web hello page

子元素选择器：   不可以隔代
<p>this is my <strong>web<i> hello</i></strong> page</p>

p>strong>i{  // 不可以隔代寻找：不可以写成 p>i{}
    color: blue;
}