CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの要素タイプセレクター

CSS要素タイプセレクターは、タイプのすべての要素を選択するために使用されます。 CSS要素タイプセレクターの構文は次のとおりです

構文

element {
   /*declarations*/
}

例

次の例は、CSS要素タイプセレクターを示しています

<!DOCTYPE html>
<html>
<head>
<style>
li {
   list-style: none;
   margin: 5px;
   border-bottom-style: dotted;
}
div {
   box-shadow: inset 0 0 8px plum;
   padding: 36px;
}
</style>
</head>
<body>
<div>
<pre> \(╪)(╪) /</pre>
<ul>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSの要素タイプセレクター

例

<!DOCTYPE html>
<html>
<head>
<style>
li {
   text-align: center;
   list-style: none;
   margin: 5px;
   padding: 5px;
   box-shadow: inset 0 0 15px yellowgreen;
}
div {
   box-shadow: inset 0 0 8px orange;
   padding: 36px;
   width: 30%;
   border-radius: 50%;
}
</style>
</head>
<body>
<div>
<ul>
<li>Hello</li>
<li>Guys</li>
</ul>
</div>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSの要素タイプセレクター


  1. CSSで要素を垂直方向に中央揃え

    CSSで要素を垂直方向の中央に配置するには、上下のパディングを使用します。 例 次のコードを実行して、要素を中央に配置することができます <!DOCTYPE html> <html>    <head>       <style>          .center {             padding: 50px 0;         &nb

  2. CSS子孫セレクター

    CSSの子孫セレクターは、指定された要素の子孫であるすべての要素を照合するために使用されます。 例 次のコードを実行して、CSSDescendentSelectorを実装してみてください。 <!DOCTYPE html> <html>    <head>       <style>          div p {             background-color: orange