html5——css选择器

复习

div>p: 子代

div+p：div后面相邻的第一个p

div~p: div后面所有的兄弟p

属性选择器

标志：[]；区别于id选择器：#，区别于类名选择器：.

特殊符号：^：开头 $：结尾 *：包含

E[title] : 选中页面的E元素，并且E需要带有title属性

E[title="abc"] ：选中页面的E元素，并且E需要带有title属性,属性值为abc

E[title^="abc"] ：选中页面的E元素，并且E需要带有title属性,属性值以abc开头

E[title$="abc"] ：选中页面的E元素，并且E需要带有title属性,属性值以abc结尾

E[title*="abc"] ：选中页面的E元素，并且E需要带有title属性,属性值包含abc

结构伪类选择器

E：first-child　选中父元素中的第一个子元素

E：last-child　选中父元素中的最后一个子元素

E：nth-child(n)　属于其父元素中的第n个子元素，E是子元素

n: 0,1,2,3,4..... 偶数： 2n(even) 奇数：2n-1 (odd) 前5个： -n+5 7的倍数：nth-child(7n)

E：nth-last-child(3)，从后向前选择，选中倒数第3个

E：empty 表示元素为空的状态

E:target：表示元素被激活的状态要配合锚点使用

注意：所选到的元素的类型必须是指定的类型E,否则选择无效；

伪元素

通过css模拟出html效果

E::before

E::after

注意：必须有content 属性

伪元素选择器

E::first-letter：选中第一个字母

E::first-line：选中第一行

E::selection：表示选择的区域通过设置 color background

首字母下沉

<style>
    /*选中第一个字,加上左浮动，文字就会环绕，有下沉效果*/
    p:first-child::first-letter{
        font-size:40px;
        color:red;
        float: left;
    }
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .nav {
            position: fixed;
            top: 150px;
            left: 50px;
        }

        ul {
            list-style: none;
        }

        li {
            width: 50px;
            height: 30px;
            border: 1px solid #000;
            background-color: pink;
            text-align: center;
            font: 400 15px/30px "simsun";
            margin-top: 20px;
            color: red;
        }

        .box {
            width: 600px;
            height: 700px;
            margin: 20px auto;
            background-color: pink;
            font: 600 30px/700px "simsun";
            text-align: center;
            color: green;
        }

        /*target 伪类 要配合锚点使用 表示被激活的状态*/
        .box:target {
            background-color: #ccc;
        }
    </style>
</head>
<body>
<div class="nav">
    <ul>
        <li><a href="#yf1">上衣</a></li>
        <li><a href="#yf2">下衣</a></li>
        <li><a href="#yf3">内衣</a></li>
        <li><a href="#yf4">外衣</a></li>
    </ul>
</div>
<div class="box" id="yf1">上衣</div>
<div class="box" id="yf2">下衣</div>
<div class="box" id="yf3">内衣</div>
<div class="box" id="yf4">外衣</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div::before {
            content: "";
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
<div>你好吗？</div>
</body>
</html>

参考：CSS3选择器手册