CSS札记（一）：CSS选择器

2024年3月25日 134次阅读 来源: yuan

一、语法规则

选择器{
    属性1:属性值1;
    属性2:属性值2;
    ......
}
/*注释*/

二、如何在html中应用CSS

1. 外部引用css文件

   css文件：css/layout.css（css文件夹和HTML位于同一个目录下）
   <head>
       <link rel="stylesheet" href="css/layout.css">
   </head>

2. 内部嵌入css

    <head>
    <style>
        /*css代码*/
    </style>
    </head>

3. 元素内部使用

<div style="属性名:属性值;属性名:属性值;"></div>

三、选择器

1. 基本选择器

1）元素选择器

a div body ul

2）类选择器

.ClassName     例如: .current

3）ID选择器

#IdName         例如: #top_nav

4）普遍选择器

*{
   /*css代码*/
}

5）并且选择器

选择器1选择器2
p.one#first    
<p class="one" id="first"></p>

6）并列选择器

p,.one,#first
<p></p>
<div class="one"></div>
<ul id="first"></ul>

2. 层次选择器

1）后代选择器

使用空格分割两个选择器， 例如 【parant son】

2）子代选择器

使用大于号分割两个选择器，例如 【parent > son】

3）下一个兄弟选择器

使用+分割两个选择器，例如 【li:first-child + *】

4）之后所有兄弟选择器

使用波浪线~分割两个选择器，例如【li:first-child ~ *】

3. 属性选择器(过滤器)

配合基本选择器进行筛选
<input type="text" name="username">

selector[name]        选择具有name属性的元素、无论该属性的值为什么
selector[name=val]    选择具有name属性的、并且name的值为val元素
selector[name*=val]   选择具有name属性的、并且name的值之一为val的元素    
selector[name^=val]   选择具有name属性的、并且name的值以val开头的元素
selector[name$=val]   选择具有name属性的、并且name的值以val结尾的元素
selector[name~=val]   选择具有name属性的、并且name的值包含val的元素

4. 伪类选择器

配合基本选择器进行筛选

1) 子元素

:first-child
:last-child
:nth-child(n)、: nth-last-child(n) 
:first-of-type
:last-of-type
:nth-of-type(n)、:nth-last-of-type(n)

注：n可以为元素的序号，也可以为特殊的字符，比如“odd”，“even

2) 状态

:hover、:active:、focus
:enabled、 :disabled；:checked、 :default
:invalid、 :valid、 :required、 :optional、 :in-range 、:out-of-range

5. 伪元素选择器

伪元素以”::”开头，用在选择器后，用于选择指定的元素。

::after
    常用于清除浮动，让浮动的子元素将父撑起来。
    例：
        <ul id = "nav">
            <li></li>
            <li></li>
        </ul>

        #nav::after{
            content = "";
            display = block;
            clear = both;
        }

::before        
::first-letter        
::first-line        
::selection

未完待续… …

    原文作者：yuan
    原文地址: https://segmentfault.com/a/1190000014108788
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞