CSS选择器

• 标签选择器
  对于p标签，统一进行处理。就好比：在Android中，我们有一些常用的textview、imageView控件像字体大小、尺寸要一致，我们把它放到style文件里，这里的标签选择器类似。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style type="text/css">
        
   p{
         width: 880px;
         height: 50px;
         background: pink;
         color:  white;
         font-size: 40px;


   }

    </style>
</head>
<body>

   <p>Android开发工程师</p>
   <p>前端开发工程师</p>

    
</body>
</html>

10-1.PNG

• id选择器
  id选择器可以根据id属性的值为标签指定样式。如果我只想让其中的一个 p标签指定样式，怎么办？？增加一个id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style type="text/css">
        
   #android{
         width: 880px;
         height: 50px;
         background: pink;
         color:  white;
         font-size: 40px;


   }

    </style>
</head>
<body>

   <p id="android">Android开发工程师</p>
   <p>前端开发工程师</p>

    
</body>
</html>

10-2.PNG

• 类选择器
  id选择器是 idvalue# 而类选择器是 .className
• 通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符选择器</title>
    <style type="text/css">
        *{
            color: red;
        }

    </style>
     

</head>
<body>

   
   <p>前端开发工程师</p>
   <strong>android开发</strong>
    <em>后台开发</em>
    
</body>
</html>
 

10-3.PNG

通配符选择器我们把所有的标签字体都设置成红色了，mmp，这是什么操作。在实际应用中，我们要适配各种浏览器。。。。。我们需要剔除浏览器的一些默认设置(统一处理)，例如：

*{
            margin: 0;
            padding: 0;
        }

• 并集选择器
  并集选择器由各个选择器通过逗号连接而成的，它为不同的标签设置相同的CSS样式

  
  
  01.PNG

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style type="text/css">
        
        .welcome,#title,div{
            font-size: 23px;
            color: red;

        }


    </style>
</head>
<body>

    <p class="welcome">第一段内容</p>
    <p id="title"> 第二段内容</p>
    <div>第三段内容</div>
</body>
</html>

• 标签指定式选择器
  标签名.类选择器名 ,,,,,,标签名#ID选择器名

  
  
  02.PNG

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签指定式选择器</title>
    <style type="text/css">
        p.welcome,p#title{
            color:red;
            font-size: 30px;
        }
    </style>
</head>
<body>

    <p class="welcome">11111111111</p>
    <p id="title">222222222222</p>
</body>
</html>

• 后代选择器
  后代选择器强调的是”嵌套” div空格.welcome

  
  
  03.PNG

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style type="text/css">
        div .welcome{
            color: red;
        }
    </style>
</head>
<body>

    <div>
        
       <div>
        
          <section>
            <p class="welcome">1111111</p>
          </section>
       </div>
       
        <p class="welcome">22222222222</p>
         <p class="welcome">3333333333</p>
    </div>
    
</body>
</html>

• 子选择器
  子选择器用于为指定标签的第一代子元素设置样式

div>.welcome{
            color: red;
        }

只有第一代类名为welcome的类可以设置样式，后代选择器和子选择器的区别是：子选择器仅仅作用于标签的直接后代（第一代），后代选择器作用于所有的子孙后代元素。