CSS의 선택기에 하이퍼텍스트 태그 선택기가 포함되어 있나요?
- 青灯夜游원래의
- 2022-09-01 17:25:313997검색
포함되지 않습니다. CSS 선택기에는 다음이 포함됩니다. 1. HTML 페이지의 요소 이름을 통해 특정 HTML 요소를 찾는 태그 선택기 2. HTML 요소의 클래스 속성 값을 통해 특정 HTML 요소를 찾는 클래스 선택기 HTML 요소의 id 속성 값을 통해 특정 HTML 요소를 찾습니다. 4. 와일드카드 선택기 "*"는 사용자 정의 요소를 포함한 모든 유형의 태그 요소를 참조할 수 있습니다. 5. 속성 선택기는 태그의 기존 속성 이름을 사용합니다. 특정 HTML 요소를 찾기 위한 HTML 요소 또는 속성 값입니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
Css 선택자에는 "하이퍼텍스트 태그 선택자"가 포함되지 않지만 클래스 선택자, 태그 선택자, ID 선택자, 속성 선택자, 의사 클래스 선택자 등이 포함됩니다.
css 선택기란 무엇입니까? 스타일은 CSS의 가장 작은 구문 단위입니다. 각 스타일은 아래 그림과 같이 선택기와 선언(규칙)의 두 부분으로 구성됩니다.
1. 선택기(Selector) 
선택기는 HTML 요소의 ID, 클래스 속성 또는 요소 이름 자체 및 스타일을 정의할 HTML 요소를 지정하는 데 사용되는 일부 특수 기호로 구성됩니다. , 선택기 p는 페이지의 모든
태그에 대한 스타일을 정의하는 것을 의미합니다.
2. 선언이러한 선언은 브라우저에 지정된 개체를 렌더링하는 방법을 알려줍니다. 선택자. 모든 선언은 선택기 바로 뒤 중괄호 쌍 { } 안에 배치됩니다. 문은 속성과 속성 값이라는 두 부분을 포함해야 하며, 문 끝을 표시하기 위해 세미콜론을 사용해야 합니다. 스타일의 마지막 문에서는 세미콜론을 생략할 수 있습니다.
-
속성: 색상, 테두리, 글꼴(글꼴)과 같은 일련의 키워드로 구성된 HTML 요소에 설정하려는 스타일 이름입니다. ) 등 CSS는 W3C 공식 웹사이트를 통해 볼 수 있는 다양한 속성을 제공합니다.
{ }内，然后整体紧邻选择器的后面。声明必须包括两部分：属性和属性值，并用分号来标识一个声明的结束，在一个样式中最后一个声明可以省略分号。
属性：您希望给 HTML 元素设置的样式名称，由一系列关键词组成，例如 color（颜色）、border（边框）、font（字体）等，CSS 中提供了众多属性，您可以通过 W3C 官网查看；
值：由数值和单位或者关键字组成，用来控制某个属性的显示效果，例如 color 属性的值可以是 red 或 #F1F1F1 等。
css选择器有哪些？
我们从一个Html结构开始
<div id="box"> <div class="one"> <p class="one_1"> </p > <p class="one_1"> </p > </div> <div class="two"></div> <div class="two"></div> <div class="two"></div> </div>关于css常用的选择器有：
id选择器（#box），选择id为box的元素
类选择器（.one），选择类名为one的所有元素
标签选择器（div），选择标签为div的所有元素
后代选择器（#box div），选择id为box元素内部所有的div元素
子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
群组选择器（div,p），选择div、p的所有元素
还有一些使用频率相对没那么多的选择器：
伪类选择器
:link ：选择未被访问的链接 :visited：选取已被访问的链接 :active：选择活动链接 :hover ：鼠标指针浮动在上面的元素 :focus ：选择具有焦点的 :first-child：父元素的首个子元素
伪元素选择器
:first-letter ：用于选取指定选择器的首字母 :first-line ：选取指定选择器的首行 :before : 选择器在被选元素的内容前面插入内容 :after : 选择器在被选元素的内容后面插入内容
属性选择器
[attribute] 选择带有attribute属性的元素 [attribute=value] 选择所有使用attribute=value的元素 [attribute~=value] 选择attribute属性包含value的元素 [attribute|=value]：选择attribute属性以value开头的元素
在CSS3中新增的选择器有如下：
层次选择器（p~ul），选择前面有p元素的每个ul元素
伪类选择器
:first-of-type 表示一组同级元素中其类型的第一个元素 :last-of-type 表示一组同级元素中其类型的最后一个元素 :only-of-type 表示没有同类型兄弟元素的元素 :only-child 表示没有任何兄弟的元素 :nth-child(n) 根据元素在一组同级中的位置匹配元素 :nth-last-of-type(n) 匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从末尾开始计数 :last-child 表示一组兄弟元素中的最后一个元素 :root 设置HTML文档 :empty 指定空的元素 :enabled 选择可用元素 :disabled 选择被禁用元素 :checked 选择选中的元素 :not(selector) 选择与 <selector> 不匹配的所有元素
属性选择器
[attribute*=value]：选择attribute属性值包含value的所有元素 [attribute^=value]：选择attribute属性开头为value的所有元素 [attribute$=value]：选择attribute属性结尾为value的所有元素
css基本选择器和优先级
css基本选择器
选择器名称 描述 类型选择器/元素选择器
又称为 类型选择器，这种基本选择器是通过HTML页面的元素名定位具体HTML元素。如果类型选择器单独使用的话，会定位当前HTML页面中所有该元素名的元素。 类选择器 是通过HTML元素的class属性的值定位具体HTML元素。这种基本选择器的用法是 값: 숫자 값과 단위 또는 키워드로 구성되며 특정 항목의 표시 효과를 제어하는 데 사용됩니다. 예를 들어 색상 속성의 값은 빨간색 또는 #F1F1F1 등일 수 있습니다..类名CSS 선택기가 무엇인가요? Html 구조로 시작합니다 #nav-global > ul > li > a.nav-link
CSS에 대해 일반적으로 사용되는 선택기는 다음과 같습니다. 🎜🎜🎜유형 선택기/ 요소 선택기🎜🎜🎜 유형 선택기라고도 알려진 이 기본 선택기는 HTML 페이지 이름의 요소를 통해 특정 HTML 요소를 찾습니다. 유형 선택기를 단독으로 사용하면 현재 HTML 페이지에서 이 요소 이름을 가진 모든 요소를 찾습니다. 🎜🎜🎜🎜클래스 선택기🎜🎜는 HTML 요소의 클래스 속성 값을 통해 특정 HTML 요소를 찾습니다. 이 기본 선택기의 사용법은id 선택기(#box ), ID가 상자
- 🎜클래스 선택기(.one)인 요소를 선택하고 클래스 이름이 one🎜
- 🎜태그 선택기(div)인 모든 요소를 선택하고 모든 요소를 선택합니다. 태그 div 🎜
- 🎜Descendant 선택기(#box div)를 사용하여 상자 요소 🎜
- 🎜하위 선택기(.one> one_1) 내부에 ID가 있는 모든 div 요소를 선택합니다. 상위 요소가 .one🎜
- 🎜인접 형제 선택기(.one+.two)인 모든 .one_1 요소를 선택하고, .one🎜
- 🎜그룹 선택기 바로 다음의 모든 .two 요소를 선택합니다. (div, p), div 및 p의 모든 요소를 선택합니다🎜
- 🎜의사 클래스 선택기🎜
nbsp;html> <meta> <title>这是一个demo</title> <style> #myid{color:red;} .myclass1{color:yellow;} h1,p {color:green;} </style> <h1>这是一个标题，请查看优先级</h1> <p>这是一个段落，请查看优先级</p>- 🎜 의사 요소 선택기 🎜
- 🎜속성 선택기🎜
- 🎜계층적 선택기(p~ul), p 요소 앞에 오는 각 ul 요소를 선택합니다🎜 li>
- 🎜의사 클래스 선택기🎜
- 🎜속성 선택기🎜
선택기 이름 설명 🎜.class name형식입니다. 🎜🎜🎜🎜id 선택기는 클래스 선택기와 유사합니다. 클래스 선택기는 클래스 선택기와 일치하고 ID 선택기는 id 속성과 일치합니다. ID 속성은 전체 페이지에서 반복할 수 없는 유일한 속성이라는 점은 주목할 가치가 있습니다. 🎜🎜🎜🎜🎜범용 선택기/와일드카드 선택기🎜是一个星号（ *），这个选择器是一个特殊的标签选择器，它可以指代所有类型的标签元素，包括自定义元素，以及<script>、<style>、<title>等元素，但是不包括伪元素。</script>属性选择器 是通过HTML元素已经存在属性名或属性值来定位具体HTML元素，在官方文档中类选择器和ID选择器都属于属性选择器，因为本质上类选择器是HTML元素中class的属性值，ID选择器是 HTML 元素中id的属性值。 优先级
相信大家对CSS选择器的优先级都不陌生：
内联 > ID选择器 > 类选择器 > 标签选择器
到具体的计算层面，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：
如果存在内联样式，那么 A = 1, 否则 A = 0
B的值等于 ID选择器出现的次数
C的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数
D 的值等于 标签选择器 和 伪元素 出现的总次数
这里举个例子：
#nav-global > ul > li > a.nav-link
套用上面的算法，依次求出 A B C D 的值：
因为没有内联样式 ，所以 A = 0
ID选择器总共出现了1次， B = 1
类选择器出现了1次， 属性选择器出现了0次，伪类选择器出现0次，所以 C = (1 + 0 + 0) = 1
标签选择器出现了3次， 伪元素出现了0次，所以 D = (3 + 0) = 3
上面算出的A 、 B、C、D 可以简记作：(0, 1, 1, 3)
知道了优先级是如何计算之后，就来看看比较规则：
从左往右依次进行比较 ，较大者优先级更高
如果相等，则继续往右移动一位进行比较
如果4位全部相等，则后面的会覆盖前面的
经过上面的优先级计算规则，我们知道内联样式的优先级最高，如果外部样式需要覆盖内联样式，就需要使用
!important下面我们来看一个实例
nbsp;html> <meta> <title>这是一个demo</title> <style> #myid{color:red;} .myclass1{color:yellow;} h1,p {color:green;} </style> <h1>这是一个标题，请查看优先级</h1> <p>这是一个段落，请查看优先级</p>我们可以看到因为标签
有行内样式，所以它显示为了蓝色；
而标签
虽然定义了三种css样式，但是由于id选择器的优先级最高，所以显示为了红色
（学习视频分享：web前端）
위 내용은 CSS의 선택기에 하이퍼텍스트 태그 선택기가 포함되어 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!