学习web前端的第二天

2023-12-28 16:19:46

选择器

css中的选择器有 id选择器，类（Class）选择器，属性选择器，通配符选择器，伪类选择器，伪选择器,群组选择器，后代选择器等。

这边要强调下
伪类选择器:简而言之的是它可以创建一个简单的一个元素的标签，如：after和:bfore
伪选择器：简而言之的是它描述的是一个标签的动态，如: :link,:foucs:hover等

id选择器

语法及规则：

<style>
        #wode{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
    </style>
     <body>
   <p id="wode"></p>
   </body>

class选择器

语法及规则：

 <style>
        .wode{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
    </style>
   </head>
   <body>
   <p class="wode"></p>
   </body>

属性选择器

代码及语法

<style>
        p{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
    </style>
   </head>
   <body>
   <p class="wode"></p>
   </body>

通配符选择器

语法及规范

 <style>
       *{
           padding: 0px;
           margin: 0px;
       }
    </style>

css3新添加的标签

:nth-child(n){} ----------------> n表示的是你的元素的索引号
:first-child{}----->表示的是第一个元素
:last-child{}---->表示的是最后一个元素
:nth-last-child{}—>表示的倒数几个元素
如下图及代码和语法：

<style>
      li:nth-child(2){
          /* 选中的是第二个li */
          color: red;
      }
      li:last-child{
          /* 选中的是最后一个li */
          color: pink;
      }
      li:nth-last-child(2){
          /* 选中的是倒数第二个元素 */
          color: orange;
      }
      li:first-child{
          /* 选中的是第一个li */
          color: gray;
      }
    </style>
   </head>
   <body>
   <ul>
       <li>第1个标签</li>
       <li>第2个标签</li>
       <li>第3个标签</li>
       <li>第4个标签</li>
       <li>第5个标签</li>
       <li>第6个标签</li>
   </ul>
   </body>

emmet语法（了解）

当你使用vsCode的时候，你创建一个html页面的时候，点击打开，一般都要按下英文下的 "!"然后按下tab键后，则生成的代码，我们通常把他叫做emmet语法

css特点：
1.有些的属性可以继承，比如color，font-size,line-height等
2.多个样式选择器都可以对同一样式进行设置

优先级规则
1.内联样式 > 内部样式 > 外部样式
2.!improtant > id选择器 >class选择器>元素选择器>t通配符选择器
3.!improtant不能用则不要用，因为用不好对维护产生影响
4.在同一个class下的时候，谁的选择器越长权限越高

基本样式

1.css1:该版本提供了有关文字，颜色，位置和文本属性等基本信息
2.css2：样本得到更多的充实
3.css3各浏览器厂商对css3进行兼容
overflew样式表示的是可见度 —>visible是默认值,hidden，隐藏但是占据位置
display:none; 隐藏但是不占据位置

<style>
        p{
            width: 300px;
            height: 300px;
        }
        p:nth-child(1){
            /* 我是还想在 */
            visibility: hidden;
        }
        p:nth-child(2){
            /* 我不想留在这里了 */
            display: none;
        }
    </style>
   </head>
   <body>
   <p>1ppppp</p>
   <p>2ppppp</p>
   <p>3ppppp</p>

码农公寓

选择器