CSS札记（一）：CSS选择器

时间 2019-12-07

标签 css 札记选择器栏目 CSS 繁體版

原文原文链接

1、语法规则

选择器{
    属性1:属性值1;
    属性2:属性值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>

3、选择器

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. 伪元素选择器

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

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

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

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

未完待续... ...

1. css -- css选择器
2. CSS选择器(一)
3. 【CSS】【选择器】CSS选择器种类
4. css选择器
5. CSS选择器
6. CSS 选择器
7. CSS-选择器
8. css 选择器
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• Tomcat学习笔记（史上最全tomcat学习笔记）
• Docker容器实战(一) - 封神Server端技术