前端之css選擇器等相關內容-52

阿新 • • 發佈：2020-09-16

1.css介紹

一 什麼是CSS
CSS全稱Cascading Style Sheet層疊樣式表，是專用用來為HTML標籤新增樣式的。

樣式指的是HTML標籤的顯示效果，比如換行、寬高、顏色等等

層疊屬於CSS的三大特性之一，我們將在後續內容中介紹

表指的是我們可以將樣式統一收集起來寫在一個地方或者一個CSS檔案裡

二 為何要用CSS
在沒有CSS之前，我們想要修改HTML標籤的樣式則需要為每個HTML標籤單獨定義樣式屬性，如下

這麼做的缺點是

#1、記憶困難：需要記憶每個標籤的所有樣式相關屬性，如果標籤沒有某個樣式相關的屬性，那麼設定了也沒有效果

#2、程式碼耦合度高：HTML語義與樣式耦合到一起
 

#3、擴充套件性差：當某一類樣式需要修改時，我們需要找到所有設定了該樣式標籤進行修改
於是CSS應運而生，很好地解決了以上三個問題

2.css的引入方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--外鏈式 -->
  <link rel="stylesheet" href="css/a.css">

  <!--嵌入式   -->
  <style>
    p {
 
      color: green;
      font-size: 30px;
     }
  </style>


  <!--匯入式(瞭解)
  <style>
    @import url("css/a.css");
  </style>
  -->
</head>
<body>
<p>你好呀</p>

<!--行內式-->
<!--<p style="color: red;font-size: 50px">你好呀</p>-->
</body>
</html>

3.css選擇器之id、class

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /*id選擇器*/
    /*
     #p2 {
       color: red;
     }
     */


    /*類選擇器*/
    /*
     .p3 {
       color: red;
     }
     */

    .p1 {
      color: red;
     }

    .p2 {
      font-size: 50px;
     }

    .p3 {
      text-decoration: underline;
     }
  </style>
</head>
<body>
<!--
<p>111</p>
<p id="p2">222</p>
<p class="p3">333</p>
<p class="p3">444</p>
-->

<!--
段落1和3顏色為red
段落2和3字型大小為50px
段落1和2的字型加上下滑線

-->
<p class="p1 p3">兩隻黃鸝鳴翠柳</p>
<p class="p2 p3">一行白鷺上西天</p>
<p class="p1 p2">兩岸猿聲啼不住</p>

</body>
</html>

4.css選擇器之標籤、萬用字元

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /*
     p {
       color: red;
     }
     */

     * {
      color: red;
     }
  </style>
</head>
<body>
<p>第一層</p>
<h1>哈哈哈</h1>
<a href="">點我啊</a>
<ul>
  <li>
    <ul>
      <li>
        <ul>
          <li>
            <p>千層餅</p>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</body>
</html>

5.css選擇器之後代、兄弟

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /*

     p {
       color: red;
     }

     div p {
       color: red;
     }

     div+p {
       color: green;
     }
     div~p {
       color: green;
     }


     div>p {
       color: red;
     }

     */

    .box1 ul p {
      color: red;
     }

  </style>
</head>
<body>
<p>1111</p>
<div class="box1">
  <ul>
    <li>
      <p>你要呀</p>
      <p>你要呀</p>
      <p>你要呀</p>
    </li>
  </ul>

  <p>333333</p>
</div>
<hr>
<p>22222</p>

<div>
  <ul>
    <li>
      <p>我不要</p>
    </li>
  </ul>

  <p>死鬼</p>
</div>
</body>
</html>

6.交集與並集

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div.box1 {
      color: red;
     }

    /*
     div,h1 {
       color: red;
     }
     */
  </style>
</head>
<body>

<div class="box1">
  <p>11111</p>
  <a href="#">點我啊</a>
</div>


<h1 class="box1">哈哈哈哈</h1>

</body>
</html>

7.序列選擇器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /*
     p:first-child {
       color: red;
     }

     p:last-child{
       color: red;
     }

     p:nth-child(3) {
       color: red;
     }


     p:first-of-type{
       color: red;
     }

     p:last-of-type{
       color: red;
     }

     p:nth-of-type(3){
       color: red;
     }

     p:only-child {
       color: red;
     }

     */
    p:only-of-type {
      color: red;
     }
  </style>
</head>
<body>
<h1>w我是標題</h1>
<p>我是段落1</p>
<h1>aaaaaa</h1>
<p>我是段落2</p>
<p>我是段落333333333333333333333333333333333333333333</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
  <hr>
  <a href=""></a>
  <p>我是段落6</p>
  <p>我是段落6</p>
  <p>我是段落6666666666666666666666666666666666666666</p>
  <p>我是段落6</p>
  <p>我是段落7777777</p>
  <ul>
    <li>
      <a href=""></a>
      <p>111111111111111</p>
      <p>111111111111111</p>
      <table></table>
    </li>
  </ul>
  <hr>
  <hr>
  <hr>
  <hr>
</div>
</body>
</html>

8.屬性選擇器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>後代選擇器</title>

  <style type="text/css">
    /*[x] {*/
    /*   color: red;*/
    /*}*/

    /*[class*="part1"] {*/
    /*   color: red;*/
    /*}*/

    /*[class^="aa"] {*/
    /*   color: red;*/
    /*}*/

    /*[href$="com"] {*/
    /*   color: red;*/
    /*}*/

    .inp1[type="text"] {
      width: 200px;
      height: 200px;
      background-color: red;
     }
  </style>
</head>
<body>
<input type="text" class="inp1">
<input type="text">
<h1 id="id1" type="text">哈哈啊</h1>
<p id="id2" x="111">我是段落111</p>
<p class="aaapart1 part2" x="222">我是段落222</p>
<p class="xxx part2 yyy">我是段落3333</p>
<p class="part1asdf" x="222">我是段落44444</p>

<a href="#">我是我</a>
<a href="http://www.baidu.com">點1</a>
<a href="https://www.baidu.com">電2</a>
<img src="1.png" alt="">
<img src="2.jpg" alt="">
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>

9.偽類選擇器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    a:link {
      color: red;
     }

    a:hover {
      color: green;
      font-size: 50px;
     }

    a:active {
      color: blue;
     }

    a:visited {
      color: yellow;
     }

    input:focus {
      background-color: red;
      outline: none;
     }
  </style>
</head>
<body>

<a href="http://www.baidu.com">點我啊小胡總</a>
<input type="text">使用者名稱
</body>
</html>

10.偽元素選擇器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /*p:first-letter {*/
    /*   font-size: 20px;*/
    /*}*/

    div:before {
      content: "*";
      color: red;
     }

    div:after {
      content: "?";
      color: red;
     }

    .p1 ~ .p2 {
      color: red;
     }

  </style>
</head>
<body>
<p class="p1">111</p>
<hr>
<p class="p2">222</p>
</body>
</html>

11.css三大特性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /*div {*/
    /*   color: red;*/
    /*   font-size: 20px;*/
    /*}*/

    /*div a {*/
    /*   text-decoration: none;*/
    /*}*/


    /*div li {*/
    /*   color: red;*/
    /*}*/
    /*div ul {*/
    /*   color: green;*/
    /*}*/

    .p1 {
      color: red !important;
      font-size: 20px !important;
     }

    .p1 {
      color: green;
      font-size: 10px;
     }


  </style>
</head>
<body>
<div>
  <ul>
    <li>
      <p class="p1">1111</p>
    </li>
  </ul>

</div>
</body>
</html>

前端之css選擇器等相關內容-52

1.css介紹一什麼是CSSCSS全稱Cascading Style Sheet層疊樣式表，是專用用來為HTML標籤新增樣式的。樣式指的是HTML標籤的顯示效果，比如換行、寬高、顏色等等層疊屬於CSS的三大特性之一，我們將在後續內容中介紹

前端之css屬性設定等相關內容-53

CSS屬性設定 1.字型屬性 1.1 font-weight：文字粗細取值描述 normal 預設值，標準粗細

慕課前端入門-CSS選擇器

萬用字元選擇器:*{margin: 0} 元素選擇器:body{} 類選擇器:.red{} ID選擇器:#green{} 後代選擇器:ul li{}

前端04-CSS-選擇器

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />

django之單表查詢等相關內容-67

1 常用和非常用欄位和引數概覽 # 常用欄位-IntegerField整數-AutoField-BooleanField-CharField-DateField-DateTimeField-DecimalField-FileField上傳檔案，本質是varchar-ImageField圖片，本質是varchar，繼承了Fil

django框架之引入及介紹等相關內容-59

1 web應用 1 用瀏覽器訪問的應用程式2 優點：-不需要客戶端-更新直接在服務端更新，客戶端感知不到-跨平臺性好3 缺點：-強調瀏覽器的適用性-使用者的資料都儲存在軟體廠商那邊

vue框架之前後端互動等相關內容-112

0 購物車案例 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><script src=\"js/vue.js\"></script><title>Title</title></head><body

元素定位之CSS選擇器

前言 CSS（Cascading Style Sheets）是一種語言，它用來描述HTML和XML的元素顯示樣式。在CSS語言中有CSS選擇器，Selenium中也可以使用CSS選擇器來定位元素，然後進行一系列自動化的操作指令。CSS定位比Xpath速度

前端之css網頁佈局及JavaScript引入等相關內容-55

CSS網頁佈局及JavaScript引入 1.定位流 1、相對定位就是相對於自己以前在標準流中的位置來移動

前端之HTML基礎等相關內容-50

1.基礎 <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\"

前端之HTML標籤等相關內容-51

1.列表標籤 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><style>ul {list-style: none;}</style></head><bo

前端之JavaScript函式以及BOM、DOM操作等相關內容-57

函式與BOM、DOM操作 1.函式 1.javascript中的變數提升和函式提升 1、在js中只有兩種作用域

django框架之轉換器的使用等相關內容-63

1 django2.0版的path 1 從2.x以後，建議使用path，是一個準確路徑2 使用正則方式，推薦使用re_path,用法跟url一模一樣

django框架之分頁器及forms元件等相關內容-72

1 分頁器元件介紹 1 專案資料量大了以後，比如涉及到分頁，一頁一頁的載入顯示2 django中分頁器元件，把分頁常用的東西，封裝到一個類中3 例項化得到一個物件，物件裡有屬性和方法

地圖選擇器怎麼用_小猿圈前端之Css 後代選擇器與子代選擇器的區別

技術標籤：地圖選擇器怎麼用學習前端的朋友們，理解後代選擇器和子代選擇器有什麼區別不？沒搞明白的朋友，跟著小猿圈一起來學習一下吧。

vue框架前後端分離專案之課程頁面前端、課程表分析、編寫及資料錄入等相關內容-126

1 課程頁面前端 <script>import Header from \"@/components/Header\"// import Footer from \"@/components/Footer\"export default {name: \"Course\",data() {return {category: 0,}},components: {Heade

前端的學習之路：初級CSS---選擇器的權重

技術標籤：初級CSScss前端選擇器的權重 <!DOCTYPE html> <html lang="en">

WEB前端第十一課——CSS選擇器

1.屬性選擇器　　通過HTML的屬性及屬性值來選擇元素，如<patt= \"val\" >文字內容</p>，class 即是<p>元素的屬性，val 則是 att 的屬性值

2、前端CSS—css選擇器

目錄一、CSS簡介二、CSS語法三、CSS的三種引入方式3.1 內嵌方式3.2 行內樣式3.3 外部樣式連結式匯入式四、基本選擇器4.1 標籤選擇器4.2 id選擇器4.3 類選擇器4.4 通用選擇器4.5 id選擇器和class選擇器的比較五、高階

面向物件之繼承等相關內容-26

day26 1.繼承介紹 \"\"\"1 什麼是繼承繼承是一種新建類的方式，新建的類稱之為子類，被繼承的類稱之為父類、基類、超類python支援多繼承2 為何要繼承子類會遺傳父類的屬性，所以繼承是用來解決類與類之間程式碼冗

前端之css選擇器等相關內容-52

1.css介紹

2.css的引入方式

3.css選擇器之id、class

4.css選擇器之標籤、萬用字元

5.css選擇器之後代、兄弟

6.交集與並集

7.序列選擇器

8.屬性選擇器

9.偽類選擇器

10.偽元素選擇器

11.css三大特性

相關推薦