css选择器(1)——元素选择器、类名和id选择器

原文链接： https://www.mk2048.com/blog/blog.php?id=h0j0ij0jih2j&title=css%E9%80%89%E6%8B%A9%E5%99%A8%281%29%E2%80%94%E2%80%94%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8%E3%80%81%E7%B1%BB%E5%90%8D%E5%92%8Cid%E9%80%89%E6%8B%A9%E5%99%A8

css的主要优点之一就是它能很容易地向所有同类型的元素应用一组样式。当然它是通过选择器来实现这一点的。

基本规则结构：

语法= 选择器声明块

1.元素选择器——直接使用html元素名，指向文档元素

　　如果想给所有段落都添加缩进的话使用元素选择器是最好的选择

p{
   text-indent:2em;  
}

2.类选择器和id选择器——独立于文档元素来指定样式

　　a)类选择器：

　　给部分段落文本加粗，以及列表的某些项，这时可以使用类选择器来应用样式而不需要像使用元素选择器一样考虑具体涉及的元素，只要事先给要指定样式的元素添加相同的类名即可（给需要指定样式元素的class属性指定相同的值）。

　　选择器写法："."加上类名

.target{
    font-weight:bold;
}

　　b)多类选择器：

　　一个元素可以不只有一个类名，class值还可以包含一个词列表，比如：class="first second"；

<style>
    /*通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素,类名的顺序可以颠倒*/
    /*匹配class既有one又有two的段落，第三段和第四段的字体被设置成了粗的*/
    p.one.two{
        font-weight: bold;
    }
</style>
<body>
        <p class='one'>one</p>
        <p class='two'>two</p>
        <p class='one two'>one   two</p>
        <p class='one two third'>one   two   third</p>
</body>

　　c)id选择器：

　　你可能知道会在一个给定的文档中会有一个ID值为important的元素，但是你不知道这个最重要的东西是一个段落，一个短语，一个列表项还是一个小节标题，你只知道每个文档中都会有这么一个最重要的内容，它可能会出现在任何元素中，且只出现一次，那么这种情况下就可以使用id属性了。

　　与class属性不同，id属性的一个值仅可以赋给一个元素，如果有一个元素的id值为one，那么该文档中其他元素的id值都不能是one。（实际上浏览器一般不检查html中id属性的唯一性，你设置多个元素有相同的id属性并不会报错）

　　另外，与class属性不同，id值不能为词列表。如：id='one two'是错的。

　　选择器写法："#"加上id值。

<style>
    #one{
        font-weight: bold;
    }
</style>
<body>
        <p id='one'>利用id选择器来指定样式</p>
</body>

更多专业前端知识，请上【猿2048】www.mk2048.com