Home Php C# Sql C C++ Javascript Python Java Go Android Git Linux Asp.net Django .net Node.js Ios Xcode Cocoa Iphone Mysql Tomcat Mongodb Bash Objective-c Scala Visual-studio Apache Elasticsearch Jar Eclipse Jquery Ruby-on-rails Ruby Rubygems Android-studio Spring Lua Sqlite Emacs Ubuntu Perl Docker Swift Amazon-web-services Svn Html Ajax Xml Java-ee Maven Intellij-idea Rvm Macos Unix Css Ipad Postgresql Css3 Json Windows-server Vue.js Typescript Oracle Hibernate Internet-explorer Github Tensorflow Laravel Symfony Redis Html5 Google-app-engine Nginx Firefox Sqlalchemy Lucene Erlang Flask Vim Solr Webview Facebook Zend-framework Virtualenv Nosql Ide Twitter Safari Flutter Bundle Phonegap Centos Sphinx Actionscript Tornado Register | Login | Edit Tags | New Questions | 繁体 | 简体


10 questions online user: 37

0
votes
answers
26 views
+10

有沒有人可以幫助我?

-8

我試圖做一個圈子(清除內部)有小圈子(形狀周圍),並有超鏈接到其他HTML頁面! 我目前沒有收到任何東西,但是我搜索了一下,發現什麼都沒有。有沒有人可以幫助我?

+0

至少截圖努力,即使這仍將是題外話 –

+0

在這裏看到:https://codepen.io/jo-asakura/pen/stFHi – ammarx

+0

也許你必須檢查你的_google-fu_,因爲像「circle menu css」這樣的簡單搜索會返回很多結果。 – yuriy636

沙发
0
0

你是不是這個意思? A quick sample

HTML

<div id="shape"> 
    <a class="one" href="your-page.html">Link text</a> 
    <a class="two" href="your-page.html">Link text</a> 
    <a class="three" href="your-page.html">Link text</a> 
</div> 

CSS

#shape { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    -webkit-border-radius: 100px; 
    -moz-border-radius: 100px; 
    border-radius: 100px; 
    background: green; 
    text-indent: -9999px; 
} 

#shape a { 
    position: absolute; 
    display: block; 
    width: 24px; 
    height: 24px; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius: 12px; 
    border: 1px solid black; 
} 

#shape a.one { 
    top: 5px; 
    left: 20px; 
    background: red; 
} 

#shape a.two { 
    bottom: 15px; 
    left: 30px; 
    background: black; 
} 

#shape a.three { 
    top: 35px; 
    right: 0; 
    background: yellow; 
} 
+0

是的,謝謝尼克! –

0
votes
answers
22 views
+10

jquery移動更改複選框顏色

0

當選中其他顏色時,如何更改複選框顏色(藍色)和複選框圖標顏色(白色)。jquery移動更改複選框顏色

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
 
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 

 
    <form> 
 
     <label> 
 
      <input type="checkbox" name="checkbox-0 ">Check me 
 
     </label> 
 
    </form>

+0

雖然改變背景顏色是微不足道的CSS,爲圖標的顏色有兩種顏色集:*白色*和*黑*。您可以通過應用「ui-alt-icon」類來顯示*黑色*圖標。您無法着色圖標,因爲圖標圖像未內聯。以下是替代圖標集的參考資料:http://demos.jquerymobile.com/1.4.5/icons/ – deblocker

沙发
0
0

對於藍色:

.ui-btn.ui-checkbox-on.ui-btn-a:after { 
    background-color: red !important; 
} 

白色的圖標是一個SVG:

.ui-icon-check:after { 
    background-image: url(newicon.svg); 
} 
板凳
0
0

所有你需要做的是確定所使用的類由jquery。之後,你可以簡單地套用屬性這樣

.ui-btn.ui-checkbox-on:after { 
 
    background-color: red !important; 
 
} 
 

 
.ui-btn.ui-checkbox-off:after { 
 
    background-color: blue !important; 
 
}
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
 
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 

 
<form> 
 
    <label> 
 
      <input type="checkbox" name="checkbox-0 ">Check me 
 
     </label> 
 
</form>

0
votes
answers
27 views
+10

如何在flexbox的同一行上對齊文本?

1

我已經使用Flexbox並排對齊了兩個div,並且我希望這兩個div中的文本都以相同的級別推到div的底部,但似乎在各個文本下面有不同的間距級別。如何在flexbox的同一行上對齊文本?

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.block1 { 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    color: red; 
 
    border: 1px solid; 
 
    display: flex; 
 
    align-items: flex-end; 
 
} 
 

 
.block2 { 
 
    font-size: 1em; 
 
    color: grey; 
 
    border: 1px solid; 
 
    display: flex; 
 
    align-items: flex-end; 
 
} 
 

 
.block1.hack-fix { 
 
    line-height: 29px; /* HACK */ 
 
}
<h2>Current:</h2> 
 
<div class="wrapper"> 
 
    <span class="block1"> 
 
    23 
 
    </span> 
 
    <span class="block2"> 
 
    Quote 
 
    </span> 
 
</div> 
 
<hr/> 
 
<h2>Needed:</h2> 
 
<div class="wrapper"> 
 
    <span class="block1 hack-fix"> 
 
    23 
 
    </span> 
 
    <span class="block2"> 
 
    Quote 
 
    </span> 
 
</div>

感謝您的幫助!

+0

由於字體大小不同,這是行高的問題。閱讀相關資產https://developer.mozilla.org/en-US/docs/Web/CSS/line-height – CBroe

沙发
0
0

你在找什麼叫做基準比對

要在flexbox中使用align-items: baseline

下面是一個更完整的解釋:

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: baseline; /* NEW */ 
 
} 
 

 
.block1 { 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    color: red; 
 
} 
 

 
.block2 { 
 
    font-size: 1em; 
 
    color: grey; 
 
}
<div class="wrapper"> 
 
    <span class="block1">23</span> 
 
    <span class="block2">Quote</span> 
 
</div>

板凳
0
0

家長:

display: flex; 

子女:

flex: 1; 
0
votes
answers
12 views
+10

css3中用戶界面模塊的用途是什麼?

-1

我想獲得CSS3的知識,所以我知道用戶界面模塊,它提供了一堆屬性,具有調整大小的屬性,但我不知道它爲什麼調整屬性,允許用戶更改大小的元素。除了我不知道用戶界面模塊的用途是什麼。所以我希望有人能回答這個給我。 非常感謝。css3中用戶界面模塊的用途是什麼?

沙发
0
0

CSS Basic User Interface Module Level 3 (CSS3 UI)由坦克·塞利克和弗洛裏安Rivoal(編輯),2017年3月2日的W3C候選推薦,有以下說:

本規範的目的是爲了實現以下目標:延長CSS2.1中的用戶界面功能;提供額外的CSS機制來增強或替換HTML中的其他動態演示相關功能;引入定向導航屬性以協助構建使用定向導航模型的用戶界面。

請注意,由於W3C發佈了候選推薦,因此造型屬性並不會在所有瀏覽器中立即可用。你應該檢查你是否可以使用文檔中描述的屬性。想到。

據我所知,規範爲樣式交互式HTML文檔(如基於Web的應用程序)提供了一些很好的工具。例如,它允許在對象周圍繪製輪廓,修改鼠標光標的形狀和其他這樣的好東西。無論您是否想要使用它們,並且確實是否可以使用取決於您的設計和目標受衆。

至於「它爲什麼調整屬性」:因爲它存在於某些瀏覽器中。在這種情況下,W3C只是記錄和標準化已有的技術。

0
votes
answers
15 views
+10

CSS意外的字符「步驟」

1

所以我一直試圖使功能「的步驟()」工作在我的網頁動畫,但我不斷收到錯誤CSS意外的字符「步驟」

「意外的字符(S)」步驟「找到」

我已經搜索谷歌,但沒有網頁討論這一點。

我跟着該網站是this

.container.main.tagline { 
 
    overflow: hidden; 
 
    /* Ensures the content is not revealed until the animation */ 
 
    border-right: .15em solid orange; 
 
    /* The typwriter cursor */ 
 
    white-space: nowrap; 
 
    /* Keeps the content on a single line */ 
 
    margin: 0 auto; 
 
    /* Gives that scrolling effect as the typing happens */ 
 
    letter-spacing: .15em; 
 
    /* Adjust as needed */ 
 
    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; 
 
} 
 

 

 
/* The typing effect */ 
 

 
@keyframes typing { 
 
    from { 
 
    width: 0 
 
    } 
 
    to { 
 
    width: 100% 
 
    } 
 
} 
 

 

 
/* The typewriter cursor effect */ 
 

 
@keyframes blink-caret { 
 
    from, 
 
    to { 
 
    border-color: transparent 
 
    } 
 
    50% { 
 
    border-color: orange; 
 
    } 
 
}
<body> 
 
    <div class="main"> 
 
    <img src="wall1.jpg" alt="main image"> 
 
    <div class="tagline">See beyond the big picture.</div> 
 
    </div> 
 
</body>

+0

本身工作正常的CSS。錯誤顯示在哪裏?你在使用預處理器嗎? – agrm

+0

我沒有使用任何預處理器。 然而,鏈接的網站注意到這一點: 1)假定使用Autoprefixer –

沙发
0
0

你給在CSS錯誤的選擇。

只應.main .tagline你有div class="tagline"一個名爲main父母中的文本在HTML

.main .tagline { 
 
    overflow: hidden; 
 
    /* Ensures the content is not revealed until the animation */ 
 
    border-right: .15em solid orange; 
 
    /* The typwriter cursor */ 
 
    white-space: nowrap; 
 
    /* Keeps the content on a single line */ 
 
    margin: 0 auto; 
 
    /* Gives that scrolling effect as the typing happens */ 
 
    letter-spacing: .15em; 
 
    /* Adjust as needed */ 
 
    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; 
 
} 
 

 

 
/* The typing effect */ 
 

 
@keyframes typing { 
 
    from { 
 
    width: 0 
 
    } 
 
    to { 
 
    width: 100% 
 
    } 
 
} 
 

 

 
/* The typewriter cursor effect */ 
 

 
@keyframes blink-caret { 
 
    from, 
 
    to { 
 
    border-color: transparent 
 
    } 
 
    50% { 
 
    border-color: orange; 
 
    } 
 
}
<body> 
 
    <div class="main"> 
 
    <img src="wall1.jpg" alt="main image"> 
 
    <div class="tagline">See beyond the big picture.</div> 
 
    </div> 
 
</body>

+0

哦,我明白了。改變了它。謝謝。 –

+0

雖然沒有解決意外的錯誤。 –

+0

更新了答案,只選擇.text而不是圖片@KoungMyatHein – dippas

0
votes
answers
20 views
+10

爲什麼是柔性壓低頁腳未能

0

我試圖使用Flex箱技術,https://css-tricks.com/couple-takes-sticky-footer/來響應下推頁腳在我的網頁http://apple.mdsc1.com/test/爲什麼是柔性壓低頁腳未能

我用: -

<style> 
    #wrapper {flex: 1 0 auto;} 
    body, html {height: 100%} 
    body { 
     display: flex; 
     flex-direction: column; 
    } 
</style> 

但失敗了。我正在使用的現成佈局中的東西是破壞柔性版本

我如何使它工作?

沙发
0
0

因爲#wrapper父不是柔性的元素,所以你需要從body改變規則,以jPanelMenu-panel並添加height:100%

body, 
 
html { 
 
    height: 100%; 
 
    margin: 0 
 
} 
 

 
.jPanelMenu-panel { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100% 
 
} 
 

 
#wrapper { 
 
    flex: 1; 
 
} 
 

 
#footer-bottom { 
 
    background: lightgreen 
 
}
<div class="jPanelMenu-panel"> 
 
    <div id="wrapper"> 
 

 
    <!-- Top Bar 
 
================================================== --> 
 
    <div id="top-bar"> 
 
     <div class="container"> 
 

 
     <!-- Top Bar Menu --> 
 
     <div class="sixteen columns"> 
 
      <ul class="top-bar-menu" style="float: right"> 
 
      <li><i class="fa fa-phone"></i>00 971 2 6130700</li> 
 
      </ul> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 

 
    <div class="clearfix"></div> 
 

 

 
    <!-- Header 
 
================================================== --> 
 
    <div class="container"> 
 

 

 
     <!-- Logo --> 
 
     <div class="four columns"> 
 
     <div style="margin-top: 18px; margin-bottom:15px; float: left"> 
 
      <h1> 
 
      <a href=""><img src="images/mdsc1logo.png" alt="mdsc1"></a> 
 
      </h1> 
 
     </div> 
 
     </div> 
 

 

 

 

 

 
    </div> 
 

 

 
    <!-- Navigation 
 
================================================== --> 
 
    <div style="background-color: #292929"> 
 
     <div class="container"> 
 
     <div class="sixteen columns"> 
 

 
      <a href="#menu" class="menu-trigger"><i class="fa fa-bars"></i> Menu</a> 
 

 
      <nav id="navigation"> 
 
      <ul class="menu js-enabled arrows" id="responsive" style="margin: 0px"> 
 

 
       <li><a href="index.php" class="current homepage">Home</a></li> 
 
       <li><a href="about.php">About Us</a></li> 
 

 
       <li class="dropdown"> 
 
       <a href="#" class="with-ul">Solutions</a> 
 
       <ul style="display: none;"> 
 
        <li><a href="apple.php">Apple</a></li> 
 
        <li><a href="microsoft.php">Microsoft</a></li> 
 
        <!--       <li><a href="ordering.php">Online Ordering</a></li>--> 
 
       </ul> 
 
       </li> 
 

 
       <li><a href="contactus.php">Contact Us</a></li> 
 

 
      </ul> 
 
      </nav> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <!-- Slider 
 
    ================================================== --> 
 
    <div class="container"> 
 
     <div class="sixteen columns"> 
 
     <p style="font-size: 50px; margin-top: 40px">The Home Page For MDS ONE As A Whole</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="footer-bottom"> 
 
    
 

 
    <!-- Container --> 
 
    <div class="container"> 
 

 
     <div class="eight columns">© Copyright 2017 by <a href="http://www.mdsc1.com">MDSC1</a>. All Rights Reserved.</div> 
 

 

 
    </div> 
 
    <!-- Container/End --> 
 

 

 
    </div> 
 
</div>

+0

我不明白。我該怎麼辦?我在http://www.esolutions-dm.ae/careers.php中使用了相同的技術,它在那裏工作,但它不工作http://apple.mdsc1.com/test/ –

+0

我已經更新了答案一個片段看看@shadishtaklef – dippas

+0

它的工作。謝謝:) –

0
votes
answers
19 views
+10

CSS縮放轉換影響位置計算

0

我有一個div,我顯示並放置在另一個元素上。當我將CSS轉換應用於整個身體時,該位置不再被正確計算。這裏的JavaScript:CSS縮放轉換影響位置計算

function Start() { 

    $('#ScaleBodyBtn').click(function() { 

    $('body').css({ 
     'transform': 'scale(1.5)', 
     'transform-origin': 'top left' 
    }); 
    }); 

    $('#ShowOverlayBtn').click(function() { 

    var ThePosition = $('#ShowOverlayBtn').offset(); 

    $('#Overlay').css({ 
     'top': ThePosition.top, 
     'left': ThePosition.left 
    }).show(); 

    }); 
} 

$(Start); 

這裏的HTML/CSS

<input id="ScaleBodyBtn" type="button" value="scale body" /> 
<input id="ShowOverlayBtn" type="button" value="show overlay" /> 
<div id="Overlay"></div> 

#ShowOverlayBtn, 
#ScaleBodyBtn { 
    clear: both; 
    display: block; 
    margin: 50px 30px; 
} 

#Overlay { 
    display: none; 
    background: red; 
    height: 50px; 
    width: 50px; 
    position: absolute; 
} 

而這裏的the jsFiddle進行復制的問題。您點擊顯示覆蓋圖,它就會出現在按鈕的正上方。先刷新並按Scale Body,這次當你點擊Show Overlay按鈕時,紅色的div不在正確的位置。

我需要改變以解決這個問題?

沙发
0
0

您的位置計算正常。

但是,您的覆蓋圖位於主體內部,因此它也受到您在其中設置的轉換的影響。

將它設置在另一個未轉換的div上,並且您沒有問題。

function Start() { 
 

 
    $('#ScaleBodyBtn').click(function() { 
 

 
    $('#body').css({ 
 
     'transform': 'scale(1.5)', 
 
     'transform-origin': 'top left' 
 
    }); 
 
    }); 
 

 
    $('#ShowOverlayBtn').click(function() { 
 

 
    var ThePosition = $('#ShowOverlayBtn').offset(); 
 

 
    $('#Overlay').css({ 
 
     'top': ThePosition.top, 
 
     'left': ThePosition.left 
 
    }).show(); 
 

 
    }); 
 
} 
 

 
$(Start);
#ShowOverlayBtn, 
 
#ScaleBodyBtn { 
 
    clear: both; 
 
    display: block; 
 
    margin: 50px 30px; 
 
} 
 

 
#Overlay { 
 
    display: none; 
 
    background: red; 
 
    height: 50px; 
 
    width: 50px; 
 
    position: absolute; 
 
} 
 

 
#body2 { 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="body"> 
 
<input id="ScaleBodyBtn" type="button" value="scale body" /> 
 
<input id="ShowOverlayBtn" type="button" value="show overlay" /> 
 
</div> 
 
<div id="body2"> 
 
<div id="Overlay"></div> 
 
</div>

0
votes
answers
15 views
+10

如何預先填充img的父div的高度?

0
<div class="main-container"> 
    <a> 
    <img class="img-responsive" /> 
    </a> 
</div> 

.container { 
    min-width: 300px; 
    width: fit-content; 
    max-width: 50%; 
} 

.img-responsive { 
    max-width: 100%; 
    height: auto; 
} 

此代碼正常工作,但正如您在CSS代碼中看到的,容器的寬度最初爲300px,並且會在加載圖像時展開。如何預先填充img的父div的高度?

圖像加載需要時間,所以主容器以width = 300,height = 0開始。

我想主容器在圖像加載之前已經被展開。我有圖像的縱橫比和寬度。如果可能,我想要css解決方案。

例如,如果圖像寬度爲400px,縱橫比爲1:1,我希望主容器爲400x400,以便在加載之前預先填充img的空間。

而當圖像寬度爲200px,寬高比爲1:1時,主容器應爲300x200。

CSS Image Layouting before image loaded得到的答案沒有幫助,因爲它始終強制容器寬度爲最小寬度。

+0

[圖像加載之前的CSS圖像佈局]可能的重複(https://stackoverflow.com/questions/15520623/css-image-layouting-before-image-loaded) – CBroe

+0

它與^不同。我的問題在容器上設置了最小和最大寬度。 – emil

+0

在我的例子中,https://stackoverflow.com/questions/15520623/css-image-layouting-before-image-loaded的答案總是強制img大小爲300px。 – emil

沙发
0
0

您可以分別將divmin-widthmin-height分別設置爲圖像的寬度和高度。

+0

我應該在最小高度中設置什麼值? – emil

+0

不管你想要它是多麼大... –

+0

我希望它是正確的.. – emil

724
votes
answers
20 views
+10

Flexbox not giving equal width to elements

Attempting a flexbox nav that has up to 5 items and as little as 3, but it's not dividing the width equally between all the elements.

Fiddle

The tutorial I'm modeling this after is http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

SASS

* {
  font-size: 16px;
}

.tabs {
  max-width: 1010px;
  width: 100%;
  height: 5rem;
  border-bottom: solid 1px grey;
  margin: 0 0 0 6.5rem;
  display: table;
  table-layout: fixed;
}
.tabs ul {
  margin: 0;
  display: flex;
  flex-direction: row;
}
.tabs ul li {
  flex-grow: 1;
  list-style: none;
  text-align: center;
  font-size: 1.313rem;
  background: blue;
  color: white;
  height: inherit;
  left: auto;
  vertical-align: top;
  text-align: left;
  padding: 20px 20px 20px 70px;
  border-top-left-radius: 20px;
  border: solid 1px blue;
  cursor: pointer;
}
.tabs ul li.active {
  background: white;
  color: blue;
}
.tabs ul li:before {
  content: "";
}
<div class="tabs">
  <ul>
    <li class="active" data-tab="1">Pizza</li>
    <li data-tab="2">Chicken Noodle Soup</li>
    <li data-tab="3">Peanut Butter</li>
    <li data-tab="4">Fish</li>
  </ul>
</div>
up vote 717 down vote accepted favorite
沙发
+7170
+50

There is an important bit that is not mentioned in the article to which you linked and that is flex-basis. By default flex-basis is auto.

From the spec:

If the specified flex-basis is auto, the used flex basis is the value of the flex item’s main size property. (This can itself be the keyword auto, which sizes the flex item based on its contents.)

Each flex item has a flex-basis which is sort of like its initial size. Then from there, any remaining free space is distributed proportionally (based on flex-grow) among the items. With auto, that basis is the contents size (or defined size with width, etc.). As a result, items with bigger text within are being given more space overall in your example.

If you want your elements to be completely even, you can set flex-basis: 0. This will set the flex basis to 0 and then any remaining space (which will be all space since all basises are 0) will be proportionally distributed based on flex-grow.

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}

This diagram from the spec does a pretty good job of illustrating the point.

And here is a working example with your fiddle.

這個廢墟在Safari上包裹著我。 - 雪人2017年2月18日16:45

關於這個答案的一個很棒的事情是你用這個例子解釋flex-basis比在整個互聯網上的任何其他地方更好。我打算聯繫麻省理工學院,給你一個榮譽教授。 - dudewad 2017年4月21日18:46

只是提到flex:1; 是flex-grow組合的簡寫:1,flex-basis:0。 - Vadim Ovchinnikov 17年3月29日16:39

如果有人想深入了解,我在網上看到了這篇精彩文章:css-tricks.com/flex-grow-is-weird-Kuldeep Kumar 2月22日6:49

+70

要使用相等的寬度創建元素Flex,您應該設置為您的孩子(flex元素):

flex-basis: 25%;
flex-grow: 0;

它將給行25%寬度的所有元素。他們不會一個接一個地成長。

這非常尷尬,因為它完全降低了flex的好處。如果您要對列大小進行硬編碼,則可以更輕鬆地解決問題。 - Kloar 2016年11月4日14:50

這根本沒有錯。如果你想擁有相同長度的盒子並且在排滿了時就會折斷......你可以很容易地達到這樣的目的。如果你需要最小寬度,也可以設置最小寬度 - Ilario Engler 2017年5月10日7:29

@Kloar你說這就像它是flexboxes的唯一好處......當你需要相同的寬度時,它們當然仍然是有益的,例如響應性。而且,它不像flexboxes不容易? - 用戶2999349年9月13日在14:58

0
votes
answers
32 views
+10

最簡單的方法來選擇Flex容器的所有元素?

0

什麼是最簡單的方法來選擇flexbox容器的所有子元素,並給他們所有相同的餘量,例如?最簡單的方法來選擇Flex容器的所有元素?

例子:

<div class="flexboxcontainer"> 
<h1>Headline</h1> 
<p>Some Text</p> 
<div>Some more text</div> 
<p class="smalltext">Some small text</p> 
</div> 
+1

'.flexboxcontainer> *' –

+0

.flexboxcontainer *使用CSS內的所有元素選擇和.flexboxcontainer> *選擇爲了無小孩。 –

沙发
0
1

要選擇直接兒童(1級兒童柔性容器):

.flexboxcontainer { 
 
    display: flex; 
 
} 
 

 
.flexboxcontainer>* { 
 
    /*Select only 1 level children */ 
 
    padding: 20px; 
 
    border: 2px solid black; 
 
}
<div class="flexboxcontainer"> 
 
    <h1>Headline</h1> 
 
    <p>Some Text</p> 
 
    <div>Some more text 
 
    <h3>Random stuff</h3> 
 
    </div> 
 
    <p class="smalltext">Some small text 
 
    <span>Additional text</span> 
 
    </p> 
 
</div>

要選擇所有兒童,即後代(柔性容器的所有平兒) :

.flexboxcontainer { 
 
    display: flex; 
 
} 
 

 
.flexboxcontainer * { 
 
    /*Select all level children */ 
 
    padding: 20px; 
 
    border: 2px solid black; 
 
}
<div class="flexboxcontainer"> 
 
    <h1>Headline</h1> 
 
    <p>Some Text</p> 
 
    <div>Some more text 
 
    <h3>Random stuff</h3> 
 
    </div> 
 
    <span class="smalltext">Some text 
 
    <p>More text</p> 
 
    </span> 
 
</div>

板凳
0
1
.flexboxcontainer > * { 
    /* You properties */ 
} 

它無關,與彎曲 - 你可以選擇與上述選擇元素的所有直接子。

地板
0
1

對於直接孩子,這將是.flexboxcontainer > * { ... },爲所有兒童.flexboxcontainer * { ... }