选择器(标签选择器,类选择器,Id选择器)/css引入方式/css样式/层次选择器/结构伪类选择器/属性选择器

本文链接：https://blog.csdn.net/2401_84692568/article/details/141093889

第四章

一、选择器

1.标签选择器

选择器{
    属性名：属性值
}

h1 {
    font-size:12px;
    color:#F00;
}
直接选择标签，对标签的样式就行修改。

2.类选择器

<div class="yi"></div>
.yi{
    width: 300px;
    background-color: aliceblue;
 
}
在css中使用需要与htmlclass值相等才能使用(最常使用)

3.Id选择器

<div id="yi"></div>
#yi{
    width: 300px;
    background-color: aliceblue;
}
id在使用的过程中要保证id值唯一（不唯一也能用但是不好，id以后要进行参数的传递）

优先级

id>class>标签

二.css引入方式

一、链入式（最常使用）

 <link rel="stylesheet" href="../css/shop.css">
rel必须写否则无法识别

二、导入式

<style type="text/css">
<!--
@import url("style.css");
-->
</style>
不经常使用

三、css样式

一、行内样式

<p style="font-size:20px;">
</p>
直接在html标签内进行设置样式（在以后拉代码，无法改变样式时，直接采取行内样式覆盖原样式）

二、内部样式

<style>
  .yi{
    width: 300px;
    background-color: aliceblue;
 
}  
</style>
可以写在html页面任何位置（最好写在body以上）

三、外部样式

 <link rel="stylesheet" href="../css/shop.css">
rel必须写否则无法识别
直接引入外部样式

优先级采取就近原则（但内部和外部不绝对，谁离的近，采取谁的样式）

四、层次选择器

一、E F

相当于选择父级元素下所有的F标签

body h2{
    font-size: 16px;
}
<body>
       <h2 class="er"> 如何做菜？</h2>
       <p>烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。</p>
       <p>步步精心经营，细心打理，我们都能成为餐饮大亨哦。</p>
        <h2 >如何经营餐厅？</h2>
    
</body>

二、E>F

只选择E的儿子，不选择E的孙子

body>h2{
    font-size: 16px;
}
<body>
       <h2 class="er"> 如何做菜？</h2>
       <p>烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。</p>
        <ul>
            <li>
                <h2>
                    我不会被选择
                </h2>
            </li>
    </ul>
       <p>步步精心经营，细心打理，我们都能成为餐饮大亨哦。</p>
        <h2 >如何经营餐厅？</h2>
    
</body>

三、相邻兄弟选择器

h2+p{
color:blue;
}
<body>
     <h2 class="er"> 如何做菜？</h2>（不会变色）
       <p>烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。</p>(会变色)
       <p>步步精心经营，细心打理，我们都能成为餐饮大亨哦。</p>（不会变色）
        <h2 >如何经营餐厅？</h2>
</body>
只会选择相邻的下一个兄弟（只选择一个）

四、通用兄弟选择器

h2~h2{
color: blue;
}

 <h2 class="er"> 如何做菜？</h2>（不会变色）
   
        <h2 >如何经营餐厅？</h2>(会变色)
<h2 >111？</h2>(会变色)
<h2 >222？</h2>(会变色)
<h2 >333？</h2>(会变色)
自己本身不能选择

五、结构伪类选择器

一、E：first/last-child

 p:first-child{
            color:red;
        }
p:last-child{
            color: blue;
        }

<body>
    <p>111</p>(变红色)
    <p>2222</p>
    <ul>
        <li>11</li>
        <li>22</li>
    </ul>
    <p>444</p>(变蓝色)
</body>
另外一种情况；
 p:first-child{
            color:red;
        }
p:last-child{
            color: blue;
        }

<body>
    <p>111</p>(变红色)
    <p>2222</p>
    <ul>
        <li>11</li>
        <li>22</li>
    </ul>
    <h1>444</h1>(不会变色)
</body>
如果最后一个孩子不是p而是h1那将会不能匹配的p元素，所以h1不会变色，只有第一个p变色。

二、E F:nth-child(n)

<style>
    body p:nth-child(1){
            color: rgb(226, 154, 28);
        }
     ul li:nth-child(1){
            color: aqua;
        }
</style> 

<body>
    <p>111</p>(会变色)
    <p>2222</p>
    <ul>
        <li>11</li>(会变色)
        <li>22</li>
    </ul>
    <p>444</p>
    <h1>444</h1>
</body>
选择父元素下的第几个子元素

三、E:first/last-of-type,E F:nth-of-type(n)

跟上面同理只是，在选择的时候先看标签类型，在看排序第几。

<style>
    p:first-of-type{
            color:red;
        }
p:last-of-type{
            color: blue;
        }
</style> 
<body>
    <p>111</p>(变红色)
    <p>2222</p>
    <ul>
        <li>11</li>
        <li>22</li>
    </ul>
    <p>444</p>(变蓝色)
     <h1>444</h1>
</body>

六、属性选择器

一、在选择的时候写完标签之后不能有空格要紧跟着写[],否则无法选择


<style>
      input[type='text']{
    background-color: #d9ed1eea;
   }(选择属性input标签下 属性type=text的标签)
    
   input[type^=pass]{
    background-color: brown;
   } (选择属性input标签下 type以pass字符串开头的标签)
</style>
前三个最常用