CSS_html/css_WEB-ITnoseのブラックテクノロジー

原文はこちらから: https://jellybool.com/post/css-that-you-may-not-know

いくつかの理由により、昨日は 1 つの投稿を投稿する約束だったブログを書きませんでした。これは昨日したことを補うためです。そうなると私はクリックベイトになります。ここでのブラック テクノロジは、実際にはあまり知られていないものの、特定の問題を解決するのに非常に役立つ CSS のいくつかのプロパティです。

border-radius

多くの開発者はおそらくこの border-radius を正しく理解していません。なぜなら、基本的に多くの人がこのボーダー半径を次のように使用するからです:

.box {  border-radius: 4px;}

わずかにハイエンドのものは次のようなものです:

.box {  border-radius: 4px 6px 6px 4px;}

しかし、究極の黒テクノロジー これはどのように使用されるかです:

.box {  border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;}

はい、8 つの値を割り当てることができます。見たことがありませんか?心配しないでください。具体的な説明は次のとおりです:

斜线前面的影响的是水平方向，斜线后面影响的是垂直方向，各个数字就分别代表四个不一样的方向。

outline-offset

多くの開発者は CSS を記述するときに次のステートメントに精通していると思います:

input {    outline : none;}input:focus {    outline : none;}

これは、入力からデフォルトの青い線フレームを削除します。入力ボックスのメソッド。実際、ここでもう 1 つ言及しておきたいのは、CSS には、outline-offset 属性があり、次のようにデフォルトのワイヤーフレームの距離を設定できることです。

属性値のサイズを調整すると、次のようになります。概要 距離が変わりました。

クラス宣言

誰もが次のクラス宣言に精通しているかもしれません:

input {    outline-offset: 4px ;}

もちろん何もありませんが、次のように書くと:

.col-8 {}

さて、見た目は次のようになります:

.? {  color: hotpink;}.★ {  color: yellow;}

Unicode であれば、このようにクラスを宣言できます。

連続する複数の要素を選択する

<br /><br /><div class="? ★"></div>

上記の書き方で実際に選択できるのは、ol以下の7番目から14番目のli要素です。

擬似クラス設定の単一タグ

HTML には、0c6dc11e160d3b678d68754cc175188a、f32b48428a809b51f04d3228cdf461fa などの一般的な単一タグがいくつかあります。詳細については、こちらをご覧ください:

http://www.w3.org/TR/html5/syntax.html#void-elements

次の例は、f32b48428a809b51f04d3228cdf461fa を変更するものです。

そうです

はい、重要なのは、before と :after の 2 つの疑似クラスを使用することです。ちなみに、これら 2 つの疑似クラスを実際に使用して e8e496c15ba93d81f6ea4fe5f55a2244 と 2cdf5bf648cf2f33323966d7f58a7f3f を変更できますが、前提条件として、これら 2 つの表示属性を次のように設定します。

ol li:nth-child(n+7):nth-child(-n+14) {  background: lightpink;}/** Or Safari Way **/ol li:nth-child(-n+14):nth-child(n+7) {  background: lightpink;}

属性 大文字と小文字を区別する

HTML を記述するときに次のようなコードがある場合:

hr:before {    content: "??";}hr:after {    content: " This is an <hr> element";}

次に、CSS 変更に属性セレクターを使用します:

display: block

このような宣言メソッドは間違いなく有効になります。ただし、このように宣言すると、結果はどうなりますか:

<br /><br /><div class="box"></div><input type="email">

これが大文字になると、最初の class="BOX" は f9bfd434f855cb7391dc997b9996352a には影響しません。 2 番目の type="EMAIL" は通常どおり e8dc7451c84937575e38c52150e3cc83 を変更します。したがって、属性セレクターを使用するときは、大文字と小文字の区別に注意してください。

現時点では、これらの CSS ブラック テクノロジを思い出す必要があると感じているので、いくつか追加することができます。

ハッピーハッキング