整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          MistCSS 火了!JS-from-CSS 才是前端未來?

          家好,很高興又見面了,我是"高級前端?進階?",由我帶著大家一起關注前端前沿、深入前端底層技術,大家一起進步,也歡迎大家關注、點贊、收藏、轉發,您的支持是我不斷創作的動力。

          什么是 MistCSS

          A new, better and faster way to write visual components. CSS-in-JS? Nope! JS-from-CSS

          MistCSS 是一種新的、更好、更快的編寫可視化組件的方法,其拋棄了傳統的 CSS-in-JS 而采用 JS-from-CSS, 支持 Next.js、Remix 和 TailwindCSS 等等。

          MistCSS 的典型特征包括:

          • 普適性:支持 Next.js、TailwindCSS、Remix 等等
          • 注重風格:不再需要使用 JS/TS 代碼進行上下文切換,直接使用所有現代 CSS 功能。生成的代碼降低了團隊成員之間出現錯誤和實施不一致的風險。
          • 改進的代碼庫:自動類型安全,支持可視化、無狀態組件和其他組件之間的清晰分離。自動類型安全,無需手動編寫 TypeScript 類型并確保傳遞的所有 props 均有效。
          • 完美 DX:無需向 VScode 添加擴展,無需學習新的 API,零配置開箱即用。
          • ? 運行速度快:無性能成本、零運行時間和本機瀏覽器支持

          與 CSS-in-JS 工具不同,MistCSS 不需要代碼編輯器擴展,沒有 API 限制,也沒有學習曲線,可以完全訪問 CSS 的強大功能。

          MistCSS 允許編寫更簡潔的代碼,樣式的作用域類似于 CSS Module,并且視覺行為位于同一位置,類似于 CSS-in-JS。同時,MistCSS 的運行時為零,不會給項目增加任何開銷。

          目前 MistCSS 在 Github 通過 MIT 協議開源,是一個值得關注的前端開源項目。

          如何使用 MistCSS

          通過示例可以更好地理解 MistCSS,以下代碼創建一個接受兩個 props 的經典 Button 組件:

          • size: 'lg' | 'sm'
          • danger: boolean
          // src/Button.mist.css
          @scope (.button) {
            button:scope {
              /* Default style */
              font-size: 1rem;
              border-radius: 0.25rem;
              &[data-size='lg'] {
                font-size: 1.5rem;
              }
              &[data-size='sm'] {
                font-size: 0.75rem;
              }
              &[data-danger] {
                background-color: red;
                color: white;
              }
            }
          }

          注意:@scope 中的類在項目中必須是唯一的,后續會添加自動檢查功能

          上面的 CSS 代碼是 標準且有效的, MistCSS 沒有引入任何專有語法。因此,代碼編輯器本身就支持。然后執行下面的命令進行編譯:

          npx mistcss ./src
          //  Button.mist.tsx will be created

          此時編譯器會自動生成如下圖所示的代碼,和往常自己寫 Button 組件非常類似,但是思路卻完全反過來,即通過寫樣式文件來反向生成組件

          接著就可以像下面一樣導入 Button 組件:

          import {Button} from '.components/Button.mist'
          
          export default const App = () => (
            <main>
              {/* 像普通組件一樣使用 React component */}
              <Button size="lg">Submit</Button>
              <Button size="lg" danger>Delete</Button>
              <Button onClick={handleClick}>Cancel</Button>
              {/*  TypeScript will catch the wrong size here */}
              <Button size="foo">Oops</Button>
            </main>
          )

          通過上面的步驟,一個視覺和類型安全的 React 組件就完成了,無需任何額外 JS 代碼?。

          由于 MistCSS 使用純 CSS,因此開發者不受限制可以直接使用所有 CSS 功能:

          • 容器查詢 @container 以根據組件大小調整樣式
          • CSS 變量,例如 --primary-color,具有一致的樣式
          • 媒體查詢 @media (prefers-color-scheme: dark),處理暗模式

          當然,也可以在 MistCSS 組件中使用 TailwindCSS 實用程序類。

          參考資料

          https://github.com/typicode/mistcss

          https://typicode.github.io/mistcss/

          https://twitter.com/argyleink/status/1769741521270583393/photo/4

          React以其聲明式編程范式和組件化架構,成為了構建用戶界面的首選技術之一。然而,隨著項目規模的擴大和設計需求的多樣化,如何高效地管理 CSS 樣式成為了每個React開發者都需要面對的挑戰。

          本文將從一下三個方面進行介紹,探討如何在 React 中應用和管理樣式,包括內聯樣式、CSS 類、CSS Modules 和 CSS-in-JS 技術,提升界面美觀和開發效率。

          常見的樣式方案

          在 React 中,組件樣式指的是如何為每個獨立的組件定義和管理視覺表現。組件樣式的設計和應用是 React 開發中的關鍵部分,它決定了應用的外觀和用戶體驗。

          內聯樣式 (Inline Styles)

          在 React 中,內聯樣式是一種直接在元素上定義 CSS 樣式的方式,類似于在 HTML 中使用 style 屬性。不同的是,在 React 中,內聯樣式是通過一個 JavaScript 對象來定義的,而不是傳統的 CSS 字符串。這使得內聯樣式在 React 中具有更強的動態性和靈活性。

          基本語法

          在 React 中,內聯樣式通過元素的 style 屬性來設置,該屬性接受一個 JavaScript 對象。對象的鍵是 CSS 屬性名(使用駝峰命名法),值是對應的樣式值;如下:

          import React from 'react';
          
          function InlineStyles() {
              const divStyle = {
                  color: 'blue',
                  backgroundColor: 'lightgray',
                  padding: '10px',
              };
          
              return <div style={divStyle}>Hello, World!</div>;
          }
          
          export default InlineStyles;

          在這個例子中,divStyle 是一個包含樣式屬性的 JavaScript 對象,并通過 style 屬性應用到 div 元素上。

          效果如下:

          樣式屬性的命名

          在 React 的內聯樣式中,CSS 屬性名使用駝峰命名法(camelCase),而不是傳統的 CSS 短橫命名法(kebab-case)。例如:

          • background-color 在 React 中寫成 backgroundColor
          • font-size 寫成 fontSize
          • margin-top 寫成 marginTop

          動態樣式

          內聯樣式可以非常方便地實現動態樣式。你可以根據組件的狀態或屬性來動態地改變樣式。

          import React, { useState } from 'react';
          
          function DynamicStyles() {
              const [isActive, setIsActive] = useState(false);
          
              const handleClick = () => {
                  setIsActive(!isActive);
              };
          
              const divStyle = {
                  color: isActive ? 'red' : 'blue',
                  backgroundColor: 'lightgray',
                  padding: '10px',
                  cursor: 'pointer',
                  userSelect: 'none',
              };
          
              return (
                  <div style={divStyle} onClick={handleClick}>
                      Click me to change color!
                  </div>
              );
          }
          
          export default DynamicStyles;

          在這個例子中,當點擊 div 元素時會切換其文本顏色。效果圖如下:

          樣式合并

          React允許將多個樣式對象合并為一個,這在需要應用多個條件樣式時非常有用:

          const baseStyle = { padding: '10px', margin: '5px' };
          const activeStyle = { backgroundColor: 'green' };
          
          // 合并樣式
          const finalStyle = { ...baseStyle, ...activeStyle };
          
          // ...
          <div style={finalStyle} />

          內聯樣式的優缺點:

          優點:

          • 局部作用域:內聯樣式只作用于當前的元素,不會影響其他元素,避免了樣式沖突。
          • 動態性:可以很方便地根據組件的狀態或屬性來動態設置樣式。
          • 簡潔:對于簡單的樣式,可以減少代碼量和文件數量。

          缺點:

          • 可維護性:當樣式變得復雜時,內聯樣式會使得組件代碼變得難以維護。
          • 復用性差:內聯樣式無法復用,相同的樣式需要在多個地方重復定義。
          • 缺少偽類和偽元素支持:內聯樣式無法直接使用 CSS 偽類和偽元素(如 :hover, ::after)。
          • 性能差:聯樣式對象包含大量的屬性或者嵌套的對象,這可能會使得樣式對象的創建和合并更加耗時。

          CSS 類 (CSS Classes)

          與內聯樣式相比,使用 CSS 類樣式可以使代碼更清晰、可維護性更高。

          使用 CSS 類樣式的基本方法

          • 創建 CSS 文件
          • 首先,你需要創建一個 CSS 文件,并在其中定義你的 CSS 類。例如,創建一個 common.css 文件:
          /* common.css */
          .container {
              color: blue;
              background-color: lightgray;
              padding: 10px;
          }
          
          .active {
              color: red;
          }

          在 React 組件中引入 CSS 文件 在你的 React 組件中,使用 import 語句引入剛剛創建的 CSS 文件:

          import { useState } from 'react';
          import '../assets/styles/common.css';
          
          function ClassStyles() {
              const [isActive, setIsActive] = useState(false);
          
              const handleClick = () => {
                  setIsActive(!isActive);
              };
          
              return (
                  <div
                      className={`container ${isActive ? 'active' : ''}`}
                      onClick={handleClick}>
                      Click me to change color!
                  </div>
              );
          }
          
          export default ClassStyles;
          • 在這個示例中,我們使用模板字符串(template literals)來動態添加或移除 CSS 類。效果如下:

          動態添加或移除 CSS 類

          可以使用條件渲染的方法動態添加或移除 CSS 類。例如,使用三元運算符或條件運算符:

          <div
              className={`container ${isActive ? 'active' : ''}`}
              onClick={handleClick}>
              Click me to change color!
          </div>

          或者,使用 classnames、clsx 庫來處理復雜的類名邏輯,下面用 classnames 做個演示:

          import { useState } from 'react';
          import classNames from 'classnames';
          
          function ClassnamesStyles() {
              const [isActive, setIsActive] = useState(false);
          
              const handleClick = () => {
                  setIsActive(!isActive);
              };
          
              return (
                  <div
                      className={classNames('container', { active: isActive })}
                      onClick={handleClick}>
                      Click me to change color!
                  </div>
              );
          }
          
          export default ClassnamesStyles;

          然后在 App.jsx 中引入 ClassnamesStyles 組件;在這個示例中,classnames 庫使得根據條件判斷類名的處理更加簡潔和易讀。效果如下:

          CSS Modules

          為了避免全局樣式沖突,React 推薦使用 CSS 模塊(CSS Modules),它允許你將 CSS 類名限定在本地作用域內。

          • 創建 CSS 模塊文件 首先,創建一個 CSS 模塊文件,例如 page.module.css:
          /* page.module.css */
          .container {
              color: blue;
              background-color: lightgray;
              padding: 10px;
          }
          
          .active {
              color: red;
          }

          在 React 組件中引入和使用 CSS 模塊

          import { useState } from 'react';
          import styles from '../assets/styles/page.module.css';
          
          function CssModuleStyles() {
              const [isActive, setIsActive] = useState(false);
          
              const handleClick = () => {
                  setIsActive(!isActive);
              };
          
              return (
                  <div
                      className={`${styles.container} ${isActive ? styles.active : ''}`}
                      onClick={handleClick}>
                      Click me to change color!
                  </div>
              );
          }
          
          export default CssModuleStyles;
          • 在這個示例中,CSS 類名是通過 styles 對象來引用的,這樣可以確保類名在本地作用域內不發生沖突。

          優缺點對比

          優點:

          • 可維護性高:樣式定義集中在一個地方,使得代碼更清晰易讀。
          • 復用性好:相同的樣式可以在多個組件中復用。
          • 避免沖突:使用 CSS 模塊可以避免全局命名沖突。

          缺點:

          • 動態性較差:相比于內聯樣式,動態設置樣式略顯不便。
          • 額外的構建步驟:需要引入和配置 CSS 文件,增加了項目的構建復雜度。

          Styled Components 和 CSS-in-JS

          在 React 中,Styled Components 和 CSS-in-JS 是用于管理和應用樣式的現代解決方案。它們旨在使樣式更加模塊化、可復用和動態化。

          Styled Components

          Styled Components 是一個流行的 CSS-in-JS 庫,它使用 ES6 的模板字符串語法來定義組件級別的樣式。通過使用 Styled Components,你可以將組件的樣式與其邏輯緊密結合,使得樣式更加模塊化和可維護。

          • 安裝 styled-components 庫
          $ npm install styled-components
          • 使用示例

          以下是如何在 React 中使用 Styled Components:

          import { useState } from 'react';
          import styled from 'styled-components';
          
          // 定義一個帶有樣式的容器組件
          const Container = styled.div`
              /* 根據 props.isActive 設置顏色 */
              color: ${props => (props.isActive ? 'red' : 'blue')};
              background-color: lightgray;
              padding: 10px;
              cursor: pointer;
              transition: color 0.3s;
          `;
          
          const Button = styled.button`
              /* 根據 props.primary 設置按鈕樣式 */
              background: ${props => (props.$primary ? '#BF4F74' : 'white')};
              color: ${props => (props.$primary ? 'white' : '#BF4F74')};
              font-size: 1em;
              margin: 1em;
              padding: 0.25em 1em;
              border: 2px solid #bf4f74;
              border-radius: 3px;
          `;
          
          function StyledComponentsStyles() {
              const [isActive, setIsActive] = useState(false);
          
              const handleClick = () => {
                  setIsActive(!isActive);
              };
          
              return (
                  <main>
                      <Container isActive={isActive}>Click me to change color!</Container>
                      <Button onClick={handleClick} $primary={isActive}>
                          Primary
                      </Button>
                  </main>
              );
          }
          
          export default StyledComponentsStyles;

          效果如下:

          CSS-in-JS

          CSS-in-JS 是一種將 CSS 樣式直接寫在 JavaScript 文件中的技術。Styled Components 是 CSS-in-JS 的實現之一,但還有其他庫和方法可以實現 CSS-in-JS,例如 emotion、styled-jsx 等。

          優點

          • 模塊化:每個組件的樣式都與組件本身緊密結合,避免了樣式沖突。
          • 動態樣式:可以方便地根據組件的狀態或屬性來動態調整樣式。
          • 可維護性:將組件的樣式和邏輯放在一起,使得代碼更加內聚和可維護。
          • 自動前綴:自動添加瀏覽器前綴,使得樣式兼容更多瀏覽器。

          缺點

          • 性能:在某些情況下,CSS-in-JS 可能會對性能產生影響,因為樣式是在運行時生成的。
          • 學習曲線:需要學習新的庫和語法,可能增加項目的復雜性。

          其他 CSS-in-JS 庫

          • Emotion Emotion 是另一個流行的 CSS-in-JS 庫,具有強大的動態樣式和高性能的特點。
          1. 安裝 Emotion
          $ npm install @emotion/react
          1. 使用示例

          在使用 emotion 方案的 jsx 文件開頭加入一行 /** @jsxImportSource @emotion/react **/ 的 JSX Pragma(編譯指示),告訴 JS 編譯器使用 @emotion/react 包來替代 React 原生的jsx 運行時。

          /* @jsxImportSource @emotion/react */
          import React from 'react';
          import { css } from '@emotion/react';
          
          const color = 'white';
          
          function EmotionStyles() {
              return (
                  <div
                      css={css`
                          padding: 32px;
                          font-size: 16px;
                          background-color: hotpink;
                          font-size: 24px;
                          border-radius: 4px;
                          &:hover {
                              color: ${color};
                          }
                      `}>
                      Hover to change color.
                  </div>
              );
          }
          
          export default EmotionStyles;

          效果如下:

          emotion 也支持了 style-components 的方案,不過要安裝一下依賴:npm i @emotion/styled,使用示例如下:

          /* @jsxImportSource @emotion/react */
          import { useState } from 'react';
          import styled from '@emotion/styled';
          
          const Container = styled.div`
              color: ${props => (props.isActive ? 'red' : 'blue')};
              background-color: lightgray;
              padding: 10px;
              cursor: pointer;
              transition: color 0.3s;
          `;
          
          function EmotionStyledStyles() {
              const [isActive, setIsActive] = useState(false);
          
              const handleClick = () => {
                  setIsActive(!isActive);
              };
          
              return (
                  <Container isActive={isActive} onClick={handleClick}>
                      Click me to change color!
                  </Container>
              );
          }
          
          export default EmotionStyledStyles;

          效果如下:

          Styled Components 和 CSS-in-JS 是現代 React 開發中非常流行的樣式解決方案。它們提供了模塊化、動態化和高可維護性的樣式管理方式。根據項目需求選擇合適的方案,可以顯著提高開發效率和代碼質量。

          總結

          在 React 項目中,有許多不同的樣式管理工具和庫可供選擇。以下是一些常見的選擇:

          • CSS-in-JS:Styled Components, Emotion
          • Utility-First CSS 框架:Tailwind CSS、unocss
          • 組件庫:Bootstrap (react-bootstrap), Ant Design, Material-UI等
          • CSS 預處理器:Sass、less
          • CSS 模塊:CSS Modules

          選擇合適的樣式管理工具取決于你的項目需求、團隊的熟悉度以及具體的使用場景。




          原文轉自:https://juejin.cn/post/7384992844191154214

          SS(Cascading Style Sheets) ,層疊樣式表(級聯樣式表),用于設置HTML頁面中的文本內容的字體、大小、對齊方式等,圖片的寬高、邊框樣式、邊距等以及頁面的布局排版等各種外觀顯示樣式。

          CSS以HTML為基礎,可以針對不同的瀏覽器設置不同的樣式。CSS的出現可以說拯救了我們的頁面,讓HTML 專注去做結構呈現, 而樣式全部交給 CSS來美化。

          CSS樣式規則,具體格式如下:

          CSS語法由兩部分組成:選擇器和聲明。 聲明包括:屬性和屬性值
          選擇符 {屬性: 屬性值 ; 屬性:屬性值}

          規則:

          1. 每個CSS樣式由兩部分組成,即選擇器和聲明。選擇器用于指定CSS樣式作用的HTML對象,聲明又分為屬性和屬性值;
          2. 屬性是對選擇器選定的對象設置的樣式屬性,例如字體大小、文本顏色等。必須放在花括號中,屬性與屬性值用英文冒號連接,以“鍵值對”的形式出現。
          3. 每條聲明用英文分號結束。當一個屬性有多個屬性值的時候,屬性值與屬性值不分先后順序。在書寫樣式過程中,空格、換行等操作不影響屬性顯示。

          注釋規則

          • 注釋規則
          • /* 需要注釋的內容 */
          • 示例
          • p { color: red; /* 所有段落標簽字體顏色是紅色*/ }

          三、CSS樣式表引入方法

          CSS放到什么位置呢? 怎么讓它跟我們的HTML文件關聯起來呢?

          內聯樣式(行內式)

          內聯樣式,又稱行內樣式、行間樣式、內嵌樣式。是通過標簽的style屬性來設置元素的樣式。

          • 語法
          <標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標簽名>
          
          <h2 style="color:red;">
              紅色標題
          </h2>
          
          • 說明
          • (1)style是標簽的屬性,任何HTML標簽都有style屬性,用來設置行內樣式。
          • (2)屬性和值的書寫規范與CSS樣式規則相同。
          • 注意
          • 行內樣式只對其所在的標簽及嵌套在其中的子標簽起作用。

          內部樣式表

          內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標簽中,并且用style標簽定義

          • 語法
          • <head> <style type="text/CSS"> 選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;} p{ color:#000;font-size:14px;} </style> </head>
          • 說明
          • (1)style標簽一般位于head標簽中title標簽之后,也可以把他放在HTML文檔的任何地方。
          • (2)type=“text/CSS” 在html5中可以省略, 寫上也比較符合規范, 所以這個地方可以寫也可以省略。

          外部樣式表(外鏈式)

          當我們頁面比較復雜,大量的內部樣式,會導致頁面看上去不美觀,而且不利于維護。這時我們通常將所有的樣式放在一個或多個以 .CSS 為擴展名的外部樣式表文件中,通過link標簽將外部樣式表文件鏈接到HTML文檔中。

          • 格式
          • <head> <link rel="stylesheet" type="text/CSS" href="CSS文件的路徑" /> </head>
          • 說明
          • (1)rel:用于定義文檔關聯(當前文檔與被鏈接文檔之間的關系),在這里需要指定為“stylesheet”,表示被鏈接的文檔是一個樣式表文件,表示關聯樣式表。
          • (2)type:用于定義文檔類型,通常指定為“text/css”,表示鏈接的外部文件為CSS樣式表。
          • (3)href:用于定義所鏈接外部樣式表文件的URL,通常是相對路徑。
          • 注意
          • link 是單標簽哦 _!
          • 使用link元素導入外部樣式表時,需將該元素寫在文 檔頭部,即與之間。

          三種樣式表總結

          樣式表

          特點

          使用

          控制范圍

          優先級

          行內樣式表

          書寫方便,權重高

          較少

          控制單個標簽(小)

          內部樣式表

          結構和樣式部分分離

          較多

          控制一個頁面(中)

          與書寫的順序有關,后書寫的高

          外部樣式表

          結構和樣式完全分離,需要引入

          最多,推薦使用

          控制整個網站(多)

          與書寫的順序有關,后書寫的高

          四、標簽的類型(顯示模式)

          網頁中的標簽很多,為了更好的完成我們的網頁布局,我們需要在不同地方會放不同類型的標簽。

          根據標簽在網頁中的顯示模式,可以將HTML標簽一般分為塊級標簽和行內標簽兩種類型,即塊元素和行內元素。

          塊級元素(block-level)

          • 說明
          • 每個塊元素通常都會獨自占據一行或多行,可以設置其寬度、高度、對齊方式等屬性,常用于網頁布局和網頁結構的搭建。
          • 舉例
          • 常見的塊元素有:<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>標簽是最典型的塊元素,非常適合布局,所以我們常稱之為 “CSS+DIV布局”。
          • 特點
          1. 塊元素總是從新行開始,寬度是容器的100%。
          2. 塊狀元素都可以定義自己的寬度、高度、外邊距以及內邊距。
          3. 兩個相鄰塊元素不會出現并列顯示的現象;默認,塊元素會按自上而下順序排列。
          4. 塊級元素一般可以容納內聯元素和其他塊元素,故將其比喻為一個盒子。
          • 注意
          • 文字類塊級標簽,里面不能放其他塊級元素。比如,只有文字才能組成段落 因此 p 里面不能放塊級元素,同理還有這些標簽h1,h2,h3,h4,h5,h6,dt。

          行內元素(inline-level 或內聯元素)

          • 說明
          • 行內元素(內聯元素)不占獨立的區域,僅靠自身的字體大小和圖像尺寸來支撐結構,一般不可以設置寬度、高度、對齊等屬性,常用于控制頁面中文本的樣式。
          • 舉例
          • 常見的行內元素有<a>、<b>、<span>、<strong>、<em>、<i>、<del>、<s>、<ins>、<u>等,其中<span>標簽最典型的行內元素。
          • 特點
          1. 和相鄰行內元素在一行上顯示
          2. 設置寬、高無效,可設置水平方向的padding和margin,但垂直方向的無效。
          3. 默認寬度就是它本身內容的寬度。
          4. 行內元素只能容納文本或其他行內元素。(a除外)
          • 注意

          鏈接里面不能再放鏈接!

          行內塊元素(inline-block)

          • 說明
          • 在行內元素中有幾個特殊的標簽,比如<img />、<input />、<td>,可以設置它們的寬、高和對齊方式,故稱之為行內塊元素。
          • 特點
          • 可同相鄰行內元素(行內塊)顯示在一行上,但之間會有空白縫隙
          • 默認寬度就是它本身內容的寬度
          • 可設置高度,行高、外邊距以及內邊距

          元素顯示模式轉變(display)

          通過設置display的值,改變元素的顯示模式。

          • 屬性值
          • block、inline、inline-block、none
          • 說明
          1. 行內轉塊:display:block;
          2. 將元素轉為塊狀元素,使該元素擁有塊狀元素的特點;
          3. 顯示:
          4. 類似在元素后面添加換行符,也就是說其他元素不能在其后面并列顯示。
          5. 塊轉行內:display:inline;
          6. 將元素轉換為內聯元素,使該元素擁有行內元素的特點;
          7. 顯示:
          8. 在元素后面刪除換行符,多個元素可以在一行內并列顯示。
          9. 塊、行內元素轉換為行內塊: display: inline-block;
          10. 只有這一個元素類型支持vertical-align屬性,img,input(行內塊元素)。
          11. 顯示:
          12. 元素的內容以塊狀顯示,行內的其他元素顯示在同一行。
          13. none 此元素不會被顯示

          主站蜘蛛池模板: 污污内射在线观看一区二区少妇 | 国产视频福利一区| 国产suv精品一区二区6| 中文字幕一区二区人妻性色| 糖心vlog精品一区二区三区| 99精品一区二区免费视频| 国产亚洲无线码一区二区| 无码AⅤ精品一区二区三区| 久久精品成人一区二区三区| 日本免费一区二区在线观看| 国产亚洲3p无码一区二区| 国产在线视频一区| 久久久久久一区国产精品| 视频一区视频二区日韩专区| 精彩视频一区二区三区| 精品日韩一区二区三区视频| 人妻互换精品一区二区| 国产精品电影一区| 久久蜜桃精品一区二区三区| 蜜桃AV抽搐高潮一区二区| 国内精品视频一区二区八戒| 麻豆果冻传媒2021精品传媒一区下载| 亚洲国产精品一区| 久久91精品国产一区二区| 国产午夜精品一区二区三区| 国精无码欧精品亚洲一区| 风间由美性色一区二区三区| 午夜影视日本亚洲欧洲精品一区 | 国产精品亚洲一区二区三区| 深田咏美AV一区二区三区| 精品国产AV无码一区二区三区| 韩国福利视频一区二区| 波多野结衣在线观看一区| 亚洲成a人一区二区三区| 中文字幕一区二区三区免费视频| 国产成人高清视频一区二区| 99久久精品国产高清一区二区| 亚洲无人区一区二区三区| 久久精品一区二区免费看| 麻豆一区二区免费播放网站| 香蕉久久ac一区二区三区|