css选择器的作用及分类_css用什么软件能够让他运行

CSS的五种基本选择器 　　要使用css对HTML页面中的素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。 　　㈠什么是选择器？ 　　每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 　　“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些素。 　　  　　㈡CSS的五大选择器 　　⑴标签选择器（素选择器） 　　⑵ID选择器（唯一性，一次引用） 　　⑶类选择器（单类选择器，多类选择器） 　　⑷属性选择器（简单属性选择，具体属性选择，部分属性选择， 特定属性选择） 　　⑸派生选择器（后代选择器(descendant selector)，子素选择器(child selector)，相邻兄弟选择器(Adjacent sibling selector)） 　　  　　㈢素选择器（标签选择器） 　　一个完整的HTML页面是由很多不同的标签组成。标签选择器：指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。 　　如果设置 HTML 的样式，选择器通常将是某个 HTML 素，比如 p、h1、em、a，甚至可以是 html 本身。 　　  　　例如： 　　html {background-color: black;} 　　p {font-size: 30px; backgroud-color: gray;} 　　h2 {background-color: red;} 　　以上css代码会对整个文档添加黑色背景；将所有p素字体大小设置为30像素同时添加灰色背景；对文档中所有h2素添加红色背景。 　　  　　㈣ID 选择器 　　⑴ID 选择器允许以一种独立于文档素的方式来指定样式。 　　⑵ID 选择器可以为标有特定 ID 的 HTML 素指定特定的样式。 根据素ID来选择素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次。 　　⑶id 选择器以 “#” 来定义。 　　  　　例如：在css中，下面的两个 id 选择器，第一个可以定义素的颜色为红色，第二个定义素的颜色为黄色： 　　    #red{color：red；} 　　   #yellow{color：yellow；} 　　下面的 HTML 代码中，id 属性为 red 的 p 素显示为红色，而 id 属性为 green 的 p 素显示为绿色。 　　  <p id=”red”>这个段落是红色。</p> 　　  <p id=”yellow”>这个段落是黄色。</p> 　　  　　㈤类选择器 　　类选择器使用类名来选择素，前提是要在HTML中，给素定义一个class的属性，，然后使用”.”进行标识，后面紧跟类名。 　　(1)单类选择器 　　类选择器允许以一种独立于文档素的方式来指定样式。该选择器可以单独使用，也可以与其他素结合使用。 　　①修改 HTML 代码 　　在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。为了将类选择器的样式与素关联，必须将 class 指定为一个适当的值。 　　请看下面的 HTML 代码： 　　<h1 class=”important”> 　　This heading is very important 　　</h1> 　　  　　<p class=”impportant”> 　　This paragraph is very important. 　　</p> 　　在上面的代码中，两个素的 class 都指定为 important：第一个标题（ h1 素），第二个段落（p 素）。 　　  　　②语法 　　我们使用以下语法向这些归类的素应用样式，即类名前有一个点号（.），然后结合通配选择器： 　　*.important {color:red;} 　　如果只想选择所有类名相同的素，可以在类选择器中忽略通配选择器，这没有任何不好的影响： 　　.important {color:red;} 　　  　　③结合素选择器 　　类选择器可以结合素选择器来使用。 　　♧例如，只让段落显示为红色文本： 　　p.important {color:red;} 　　选择器现在会匹配 class 属性包含 important 的所有 p 素，但是其他任何类型的素都不匹配，不论是否有此 class 属性。 　　选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。 因为 h1 素不是段落，这个规则的选择器与之不匹配，因此 h1 素不会变成红色文本。 　　  　　♧例如：为 h1 素指定不同的样式，可以使用选择器 h1.important： 　　p.important {color:red;} 　　h1.important {color:blue;} 　　  　　⑵多类选择器 　　在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。 　　例如，如果希望将一个特定的素同时标记为重要（important）和警告（warning），就可以写作： 　　          <p class=”important warning”> 　　                This paragraph is very important warning. 　　           </p> 　　注：这两个词的顺序无关紧要，写成 warning important 也可以。 　　  　　假设 class 为 important 的所有素都是粗体，而 class 为 warning 的所有素为斜体，class 中同时包含 important 和 warning 的所有素还有一个银色的背景 。 　　就可以写作： 　　.important {font-weight:bold;} 　　.warning{font-style:italic;} 　　.important .warning{background:silver;} 　　通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的素（类名的顺序不限）。 　　如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。 　　  　　㈥属性选择器 　　属性选择器可以根据素的属性及属性值来选择素。 　　⑴简单属性选择 　　如果希望选择有某个属性的素，而不论属性值是什么，可以使用简单属性选择器。 　　例子 1:把包含标题（title）的所有素变为红色，可以写作： 　　*[title] {color:red;} 　　  　　例子 2:只对有 href 属性的锚（a 素）应用样式： 　　a[herf] {color:red;} 　　  　　例子 3:根据多个属性进行选择，只需将属性选择器链接在一起即可。 　　为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写： 　　a[herf] [title] {color:red;} 　　  　　例子 4:对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像： 　　img[alt] {border:5px solid red;} 　　  　　⑵根据具体属性值选择 　　例子 1:将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写： 　　a [href=”http://www.baidu.com”] {color:red;} 　　  　　例子 2:把多个属性-值选择器链接在一起来选择一个文档。 　　a [href=”http://www.baidu.com”] [title=”baidu”] {color:red;} 　　这会把第一个超链接的文本变为红色，但是第二个或第三个链接不受影响： 　　注意：这种格式要求必须与属性值完全匹配。 　　如果属性值包含用空格分隔的值列表，匹配就可能出问题。 　　  　　⑶根据部分属性值选择 　　如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。 　　选择 class 属性中包含 important 的素，可以用下面这个选择器做到这一点： 　　p[class~=”important”] {color:yellow;} 　　注意：如果忽略了波浪号，则说明需要完成完全值匹配。 　　  　　⑷特定属性选择类型 　　举例：*[lang |=”en”] {color:red;} 　　上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有素。因此，以下示例标记中的前三个素将被选中，而不会选择后两个素： 　　
　　  　　㈦后代选择器 　　⑴后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某素后代的素。 　　⑵在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。 　　⑶每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。 　　  　　举例：只对 h1 素中的 em 素应用样式，可以这样写： 　　           h1 em {colopr:red;} 　　⑴上面这个规则会把作为 h1 素后代的 em 素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中. 　　⑵h1 em 选择器可以解释为 “作为 h1 素后代的任何 em 素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。 　　  　　具体应用： 　　可以使 HTML 中不可能实现的任务成为可能。假设有一个文档，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区的背景为白色，这两个区都包含链接列表。不能把所有链接都设置为蓝色，因为这样一来边栏中的蓝色链接都无法看到。解决方法是使用后代选择器。在这种情况下，可以为包含边栏的 div 指定值为 sidebar 的 class 属性，并把主区的 class 属性值设置为 maincontent。 　　编写以下样式： 　　div.sidebar {background:blue;} 　　div.maincontent {background:white;] 　　div.sidebar a:link {color:white;} 　　div.maincontent a:link {color:blue;} 　　  　　㈧子素选择器 　　⑴子素选择器（Child selectors）只能选择作为某素子素的素。 　　⑵不希望选择任意的后代素，而是希望缩小范围，只选择某个素的子素，请使用子素选择器（Child selector）。 　　⑶子选择器使用了大于号（子结合符）。子结合符两边可以有空白符，这是可选的。 　　  　　例如：选择只作为 h1 素子素的 strong 素，可以这样编写： 　　          h1 > strong {color:red;} 　　         如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 素子素的所有 strong 素”。 　　        　　        这个规则会把第一个 h1 下面的两个 strong 素变为红色，但是第二个 h1 中的 strong 不受影响： 　　       
　　  　　  　　㈨相邻兄弟选择器 　　⑴相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一素后的素，且二者有相同父素。 　　⑵相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。与子结合符一样，相邻兄弟结合符旁边可以有空白符。 　　  　　例如：如果要增加紧接在 h1 素后出现的段落的上边距，可以这样写： 　　h1 + p {margin-top:50px;} 　　这个选择器读作：“选择紧接在 h1 素后出现的段落，h1 和 p 素拥有共同的父素”。 　　  　　具体解释:请看下面这个文档树片段： 　　
　　在上面的片段中，div 素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。 　　不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父素（最多只能算堂兄弟）。 　　简单来说：ul与ol是相邻兄弟，而ul里面的列表项与ol里面的列表项不是相邻兄弟。 　　  　　注意：用一个结合符只能选择两个相邻兄弟中的第二个素。请看下面的选择器： 　　li + li {font-weight:bold;} 　　上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。 　　  　　参考：https://www.w3school.com.cn 　　  　　    希望有所帮助。