Chapter2 选择器

最新推荐文章于 2024-09-21 23:59:03 发布

郭晓小小

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量370

点赞数

分类专栏：前端learn 文章标签： css

本文链接：https://blog.csdn.net/u010057430/article/details/50764281

版权

前端learn 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS权威指南

Chapter1

1．块级元素：p、div、列表项

2．行内元素：strong、em、span等

3．Css的display属性可取的值，默认为inline，行内元素

4．Link标签必须放在head中，link的meta媒体属性，目前支持较为广泛的是all,screen,print

Link的rel=alternate stylesheet时为候选样式 title=default的CSS文件为默认样式表

5．@import指令：出现在style容器中，放在规则的前面@import url(st1.css) 媒体类型

6．内联样式：

Chapter2 选择器

1．CSS关键字

2．选择器分组：通用选择器 *星号

类选择器：

ID选择器：可能区分大小写

属性选择器：

<!doctype>
<html>
<head>
	<meta charset="UTF8">
    <title>CSS选择器</title>
    <style type="text/css">
        #ab{
            color: red;
        }
        .warn.danger{
            color: yellow;
        }
        .danger{
            color: blue;
        }
        h4[class]{
            background: yellow;
        }
        a[href="bb"]{
            color: pink;
        }
        h3[class~="my"]{
            color: white;
            background: pink;
        }
        h3[title*="in"]{
            color: green;
        }
        h3[title^="in"]{
            color: orange;
        }
        h3[title$="in"]{
            color: blue;
        }
        p[title|="en"]{
            color: grey;
        }
        H1 em{
            color: grey;
        }
        H1 > em{
            color: brown;
        }
        H1 + p{
            color: green;
        }
        LI + LI{
            color: pink;
        }
        a:visited{
            color: pink;
        }
        a:link{
            color: blue;
        }
        h3:first-letter{
            font-weight: bold;
            font-size: 200%;
        }
        h2:before{
            content: "**";
            color: silver;
        }
    </style>
</head>
<body>
    <p id="a" class="warn danger">a</p>
    <p id="ab">ab</p>
    <h4 class="a">属性选择器</h4>
    <h4 class="b">举例</h4>
    <h4 class="c">如下
        h4[class]{
            background: yellow;
        }
        多个属性
        a[href][class]{
            background: red;
        }
    </h4>
    <a href="aa">选择特定的属性值选择器,要求属性值和给定值完全相同</a>
    <a href="bb">
        a[href="bb"]{
        color: pink;
        }
    </a>
    <h3>部分属性值选择器,属性中包含给定值即可匹配</h3>
    <h3 class="my style">
        h3[class~="my"]{
            color: white;
            background: pink;
        }
    </h3>
    <h3>子串属性匹配器，开头结尾和包含</h3>
    <h3 title="interest">开头
        h3[title^="in"]{
            color: orange;
        }
    </h3>
    <h3 title="interest in">结尾
        h3[title$="in"]{
            color: blue;
        }
    </h3>
    <h3 title="interest">包含
        h3[title*="in"]{
            color: green;
        }
    </h3>
    <p>
        特定属性选择器
        p[title|="en"]{
            color: grey;
        }
    </p>
    <p title="en">title为en</p>
    <p title="en-or">title以en-开头</p>
    <p title="noo">title不包含en</p>
    <H1>后代选择器，上下文选择器</H1>
    <H1>test<p><em>
            H1 em{
            color: grey;
        }
    </em></p></H1>
    <H1>
        选择子元素
        <em>
            H1 > em{
                color: brown;
            }
        </em>
    </H1>
    <a></a>
    <p>我是前面的兄弟元素，不被选择</p>
    <H1>
        选择兄弟元素
        <em>
            H1 + p{
                color: green;
            }
        </em>
    </H1>
    <p>我是兄弟元素</p>
    <ol>
        <LI>1</LI>
        <LI>1</LI>
        <LI>1</LI>
    </ol>
    <b>伪类和伪元素</b>
    <p>静态伪类</p>
    <a href="http://yjxt.bupt.edu.cn/Gstudent/Default.aspx?UID=2015111438">015111438</a>
    <a href="http://baidu.com">015111438</a>
    <p>动态伪类，:focus,:hover:active</p>
    <P>:first-child</P>
    <p>设置首字母样式first-letter,第一行first-line,</p>
    <h3>
        Tim Jone
            h3:first-letter{
            font-weight: bold;
            font-size: 200%;
        }
    </h3>
    <p>插入元素：before</p>
    <h2>
        h2:before{
            content: "**";
            color: sliver;
        }
    </h2>
</body>
<script type="text/javascript">
window.onload = function(){
}
</script>
</html>