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

时间 2019-11-17

标签 css 选择器元素栏目 CSS 繁體版

原文原文链接

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

基本规则结构：html

语法= 选择器 +声明块浏览器

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

　　若是想给全部段落都添加缩进的话使用元素选择器是最好的选择spa

p{
   text-indent:2em;  
}

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

　　a)类选择器：

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

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

.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属性了。get

　　与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>