css关系选择符

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>testcss3</title>
 
<script type="text/javascript" >
 
</script>
<style>
    div{
        text-align: center;
        border: 2px solid #a1a1a1;
        padding: 10px 40px;
        background: #dddddd;
        width: 350px;
        border-radius: 25px;
        box-shadow: 10px 10px 5px #dddddd;
    }
/*  相邻兄弟选择器 h1和p相邻 的p*/
    .div2 h1 + p{background-color: aqua;}
/*  子元素选择器*/
    h1 > strong {color: red;}
/*  伪类*/
    a:link {color: #FF0000}     /* 未访问的链接 up*/
    a:visited {color: #00FF00}  /* 已访问的链接 */
    a:hover {color: #FF00FF}    /* 鼠标移动到链接上 over*/
    a:active {color: #0000FF}   /* 选定的链接 down */
     
    .div3 p:first-child{font-weight: bold;}
    .div3 li:first-child{text-transform:uppercase;}
    .div4 p:first-child i{color: blue;}
     
    .div2 h1:before{content: "hello";}</style>
</head>
<body>
    <div>border-radius 属性允许您向元素添加圆角</div>
     
    <div class="div2">
        <h1>This is a heading.</h1>
        <p>This is paragraph.</p>
        <p>This is paragraph.</p>
        <p>This is paragraph.</p>
        <p>This is paragraph.</p>
        <p>This is paragraph.</p>
    </div>
     
    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>
     
    <div class="div3">
        <p>These are the necessary steps:</p>
        <ul>
        <li>Intert Key</li>
        <li>Turn key <strong>clockwise</strong></li>
        <li>Push accelerator</li>
        </ul>
        <p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
    </div>
    <div class="div4">
        <p>some <i>text</i>. some <i>text</i>.</p>
        <p>some <i>text</i>. some <i>text</i>.</p>
    </div>
</body>
</html>

http://www.w3school.com.cn/css/css_selector_child.asp

.reveal *{display: none;}
/*reveal 的子元素都不显示 没有*的话就是本身加子元素都不显示*/
.reveal *.handle{display: block;}
/*除了class="handle"的元素*/

css 关系选择符：

1：包含选择符 E F（sRules）

2：子选择符 E>F（sRules）

3.相邻选择符（E+F）

4.兄弟选择符（E~F）

posted on   防空洞123  阅读(389)  评论(0)  编辑  收藏  举报

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示